前端的十個(gè)問(wèn)題,你知道幾個(gè)?
01、null和undefined
undefined是全局對(duì)象的一個(gè)屬性,當(dāng)一個(gè)變量沒(méi)有賦值或者訪(fǎng)問(wèn)一個(gè)對(duì)象不存在的屬性,這時(shí)候都是undefined。
null:表示是一個(gè)空對(duì)象。在需要釋放一個(gè)對(duì)象的時(shí)候,直接賦值為null即可。
02、箭頭函數(shù)
箭頭函數(shù)是ES6新增的,簡(jiǎn)化函數(shù)的定義。箭頭函數(shù)沒(méi)有自身的this,所以this是從外部獲取的,也就是繼承了外部的執(zhí)行上下文。
箭頭函數(shù)不能作為構(gòu)造函數(shù),如果通過(guò)call()或者apply()調(diào)用箭頭函數(shù)的時(shí)候,不需要綁定this,直接傳入?yún)?shù)即可。
03、call、apply和bind的作用
bind、call和apply都是改變函數(shù)this的指向。 bind在改變this的時(shí)候,返回的是一個(gè)改變執(zhí)行上下文的函數(shù),不會(huì)立即執(zhí)行。 call和apply在改變this指向同時(shí)也執(zhí)行該函數(shù)。 bind只有一個(gè)參數(shù),call和apply可接收多個(gè)參數(shù),第一個(gè)參數(shù)是this的指向。apply的第二參數(shù)是一個(gè)數(shù)組。
04、函數(shù)的this
this是函數(shù)的執(zhí)行上下文,分為全局執(zhí)行上下文和函數(shù)執(zhí)行上下文。
this在嚴(yán)格模式下,指向的是undefined,非嚴(yán)格模式下默認(rèn)指向window。
函數(shù)的this,在函數(shù)被調(diào)用的時(shí)候,指向的是函數(shù)的調(diào)用者,也就是誰(shuí)調(diào)用,就指向誰(shuí)。
如果通過(guò)new 構(gòu)造函數(shù)創(chuàng)建一個(gè)新的對(duì)象,那么構(gòu)造函數(shù)的中的this指向新對(duì)象本身。
普通函數(shù)不繼承this,箭頭函數(shù)沒(méi)有this,它是繼承外部的this。
05、變量提升
變量提升是指js的變量和函數(shù)在編譯的時(shí)候提升到最前面。
造成變量提升的現(xiàn)象,是因?yàn)槭褂胿ar關(guān)鍵字聲明的變量,變量提升的時(shí)候,只有聲明在提升,變量賦值并沒(méi)有提升,在變量初始化之前訪(fǎng)問(wèn)該變量,就會(huì)返回undefined。使用let或者const聲明變量,就形成暫時(shí)性死區(qū),在let或者const聲明變量之前訪(fǎng)問(wèn)變量會(huì)報(bào)錯(cuò)。
06、map和forEach的區(qū)別
map有返回值,可以開(kāi)辟新的空間,return返回一個(gè)長(zhǎng)度和原數(shù)組長(zhǎng)度一樣的新數(shù)組。
forEach函數(shù)沒(méi)有返回值,返回的undefined。
map的處理速度比f(wàn)orEach快,返回新數(shù)組,這樣方便鏈?zhǔn)秸{(diào)用其他數(shù)組方法,比如filter、reduce等等。
07、怎么理解事件循環(huán)、微任務(wù)和宏任務(wù)
瀏覽器的事件循環(huán)是執(zhí)行js代碼的時(shí)候,遇見(jiàn)同步任務(wù),直接推進(jìn)調(diào)用棧中執(zhí)行,遇到異步任務(wù)時(shí)候,將異步任務(wù)掛起,等到異步任務(wù)有返回之后再推到任務(wù)隊(duì)列中。
當(dāng)調(diào)用棧中所有的同步任務(wù)執(zhí)行完成,將任務(wù)隊(duì)列中的任務(wù)按照順序執(zhí)行。重復(fù)執(zhí)行這一系列的行為就是事件循環(huán)。
異步任務(wù)又分為宏任務(wù)和微任務(wù)。宏任務(wù)就是任務(wù)隊(duì)列中的任務(wù),每一個(gè)宏任務(wù)中包含一個(gè)微任務(wù)隊(duì)列;
微任務(wù):就是等宏任務(wù)中的主要功能執(zhí)行完成后,渲染引擎并沒(méi)有立即執(zhí)行下一個(gè)宏任務(wù),而是執(zhí)行當(dāng)前宏任務(wù)中的微任務(wù)。
宏任務(wù)包含:script標(biāo)簽內(nèi)的代碼、定時(shí)器、Ajax請(qǐng)求
微任務(wù):Promise
08、跨站點(diǎn)請(qǐng)求偽造CSRF
攻擊者盜用用戶(hù)的身份,以用戶(hù)的身份發(fā)起惡意請(qǐng)求。但是對(duì)于服務(wù)器來(lái)說(shuō),這個(gè)請(qǐng)求是合理的。
預(yù)防CSR攻擊方法:
- 使用驗(yàn)證碼,強(qiáng)烈要求用戶(hù)和應(yīng)用進(jìn)行交互
- 在http中referer字段,檢查是否是從正確的域名訪(fǎng)問(wèn)過(guò)來(lái),它記錄了http請(qǐng)求的來(lái)源地址
- 使用token驗(yàn)證,在http請(qǐng)求頭中添加token字段,在服務(wù)器端設(shè)置一個(gè)攔截器來(lái)驗(yàn)證token,如果token無(wú)效,那么拒絕訪(fǎng)問(wèn)
09、XSS攻擊
XSS攻擊是腳本攻擊,攻擊者通過(guò)向web頁(yè)面插入script代碼,在用戶(hù)瀏覽這個(gè)頁(yè)面時(shí)候,執(zhí)行script的腳本代碼,達(dá)到攻擊的目的。
預(yù)防:對(duì)數(shù)據(jù)進(jìn)行嚴(yán)格的輸出編碼,比如URL編碼、css編碼、JavaScript編碼。
10、瀏覽器如何渲染頁(yè)面的
瀏覽器從服務(wù)器獲取到html后,將html轉(zhuǎn)化為DOM樹(shù),再將css樣式轉(zhuǎn)化為對(duì)應(yīng)的stylesheet,根據(jù)DOM樹(shù)和stylesheet繪制成頁(yè)面。


































