程序員面試30題，你面試失敗的原因都在這里！

時(shí)間飛逝，轉(zhuǎn)眼間從離開百度到創(chuàng)辦愛創(chuàng)課堂前端培訓(xùn)學(xué)校近3年了。工作也發(fā)生了巨大變化，從以前的企業(yè)項(xiàng)目開發(fā)到現(xiàn)在在學(xué)校日復(fù)一日地為學(xué)生授課，但無(wú)論對(duì)著計(jì)算機(jī)編程，還是為學(xué)生講述前端知識(shí)，都十分讓我享受。

每到畢業(yè)季，看著自己帶出的學(xué)生找到理想的工作，心中亦是十分欣慰。學(xué)生求職中，經(jīng)常會(huì)問(wèn)我一些面試中的問(wèn)題，每次耐心地幫他們解答，對(duì)他們幫助很大。

臨近畢業(yè)的學(xué)生很多恐懼面試，所以在學(xué)校內(nèi)部我整理了一些面試題冊(cè)子與學(xué)生分享，學(xué)生受益頗多。再后來(lái)，為使在這里畢業(yè)的更多學(xué)生持續(xù)地學(xué)習(xí)更廣闊的知識(shí)，愛創(chuàng)課堂組織了一個(gè)“愛創(chuàng)課堂每日一題”活動(dòng)，每天推出一道與工作相關(guān)的技術(shù)問(wèn)題，受到廣大畢業(yè)學(xué)生好評(píng)……

通過(guò)這些活動(dòng)我認(rèn)識(shí)到，不論是在面試中，還是工作中，通過(guò)學(xué)習(xí)了解確實(shí)可以避免少踩一些坑，少走一些彎路，于是我將培訓(xùn)學(xué)校內(nèi)部用的前端面試知識(shí)，整理成一本書。

希望能夠與更多的讀者分享愛創(chuàng)課堂的知識(shí)；希望《前端程序員面試秘籍》能夠幫助那些正在找工作的人順利找到工作；也希望這本書能夠幫助那些在工作中遇到問(wèn)題而躊躇不前的人順利解決問(wèn)題；同時(shí)也希望這本書能夠幫助那些學(xué)習(xí)前端、期望了解前端更多知識(shí)的人。

1．JavaScript有哪些垃圾回收機(jī)制?

答：有以下垃圾回收機(jī)制。

標(biāo)記清除（mark and sweep）

這是JavaScript最常見的垃圾回收方式。當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候，比如在函數(shù)中聲明一個(gè)變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”。當(dāng)變量離開環(huán)境的時(shí)候（函數(shù)執(zhí)行結(jié)束），將其標(biāo)記為“離開環(huán)境”。

垃圾回收器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記，然后去掉環(huán)境中的變量，以及被環(huán)境中變量所引用的變量（閉包）的標(biāo)記。在完成這些之后仍然存在的標(biāo)記就是要?jiǎng)h除的變量。

引用計(jì)數(shù)（reference counting）

在低版本的IE中經(jīng)常會(huì)發(fā)生內(nèi)存泄漏，很多時(shí)候就是因?yàn)樗捎靡糜?jì)數(shù)的方式進(jìn)行垃圾回收。

引用計(jì)數(shù)的策略是跟蹤記錄每個(gè)值被使用的次數(shù)。當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型賦值給該變量的時(shí)候，這個(gè)值的引用次數(shù)就加1。如果該變量的值變成了另外一個(gè)，則這個(gè)值的引用次數(shù)減1。當(dāng)這個(gè)值的引用次數(shù)變?yōu)?的時(shí)候，說(shuō)明沒有變量在使用，這個(gè)值沒法被訪問(wèn)。

因此，可以將它占用的空間回收，這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理引用次數(shù)為0的值占用的空間。

在IE中雖然JavaScript對(duì)象通過(guò)標(biāo)記清除的方式進(jìn)行垃圾回收，但是BOM與DOM對(duì)象是用引用計(jì)數(shù)的方式回收垃圾的。也就是說(shuō)，只要涉及BOM和DOM，就會(huì)出現(xiàn)循環(huán)引用問(wèn)題。

2．列舉幾種類型的DOM節(jié)點(diǎn)

答：有以下幾類DOM節(jié)點(diǎn)。

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)。

每個(gè)HTML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)。

每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)。

包含在HTML元素中的文本是文本節(jié)點(diǎn)。

3．談?wù)剆cript標(biāo)簽中defer和async屬性的區(qū)別。

答：區(qū)別如下。

（1）defer屬性規(guī)定是否延遲執(zhí)行腳本，直到頁(yè)面加載為止。async屬性規(guī)定腳本一旦可用，就異步執(zhí)行。

（2）defer并行加載JavaScript文件，會(huì)按照頁(yè)面上script標(biāo)簽的順序執(zhí)行。async并行加載JavaScript文件，下載完成立即執(zhí)行，不會(huì)按照頁(yè)面上script標(biāo)簽的順序執(zhí)行。

4．說(shuō)說(shuō)你對(duì)閉包的理解。

答：使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染；缺點(diǎn)是閉包會(huì)常駐內(nèi)存，增加內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄漏。在JavaScript中，函數(shù)即閉包，只有函數(shù)才會(huì)產(chǎn)生作用域。

閉包有3個(gè)特性。

（1）函數(shù)嵌套函數(shù)。

（2）在函數(shù)內(nèi)部可以引用外部的參數(shù)和變量。

（3）參數(shù)和變量不會(huì)以垃圾回收機(jī)制回收。

5．解釋一下unshift()方法。

答：該方法在數(shù)組啟動(dòng)時(shí)起作用，與push()不同。它將參數(shù)成員添加到數(shù)組的答頂部。下面給出一段示例代碼。

var name=["john"]

name.unshift("charlie");

name.unshift("joseph","Jane");

console.log(name);

輸出如下所示。

[" joseph "," Jane ", " charlie ", " john "]

6．encodeURI()和decodeURI()的作用是什么?

答：encodeURl()用于將URL轉(zhuǎn)換為十六進(jìn)制編碼。而decodeURI()用于將編碼的URL轉(zhuǎn)換回正常URL。

7．為什么不建議在JavaScript中使用innerHTML?

答：通過(guò)innerHTML修改內(nèi)容，每次都會(huì)刷新，因此很慢。在innerHTML中沒有驗(yàn)證的機(jī)會(huì)，因此更容易在文檔中插入錯(cuò)誤代碼，使網(wǎng)頁(yè)不穩(wěn)定。

8．如何在不支持JavaScript的舊瀏覽器中隱藏JavaScript代碼?

答：在標(biāo)簽之前添加“// -->”，代碼中沒有引號(hào)。

舊瀏覽器現(xiàn)在將JavaScript代碼視為一個(gè)長(zhǎng)的HTML注釋，而支持JavaScript的瀏覽器則將“”作為一行注釋。

9．在DOM操作中怎樣創(chuàng)建、添加、移除、替換、插入和查找節(jié)點(diǎn)?

答：具體方法如下。

（1）通過(guò)以下代碼創(chuàng)建新節(jié)點(diǎn)。

createDocumentFragment() //創(chuàng)建一個(gè)DOM片段

createElement() ? ? ? ? ? ? ?//創(chuàng)建一個(gè)具體的元素

createTextNode() ? ? ? ? ? ? //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

（2）通過(guò)以下代碼添加、移除、替換、插入節(jié)點(diǎn)。

appendChild()

removeChild()

replaceChild()

insertBefore() ? ? ? ? ? ? ? //并沒有insertAfter()

（3）通過(guò)以下代碼查找節(jié)點(diǎn)。

getElementsByTagName() ? ? ? //通過(guò)標(biāo)簽名稱查找節(jié)點(diǎn)

getElementsByName() ? ? ? ? ?//通過(guò)元素的name屬性的值查找節(jié)點(diǎn)(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)

//組，其中包括id等于name值的節(jié)點(diǎn))

getElementById() ? ? ? ? ? ? //通過(guò)元素Id查找節(jié)點(diǎn)，具有唯一性

10．如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

答：調(diào)用localstorge、cookie等數(shù)據(jù)存儲(chǔ)通信方式。

11．null和undefined的區(qū)別是什么?

答：null是一個(gè)表示“無(wú)”的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示“無(wú)”的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。

當(dāng)聲明的變量還未初始化時(shí)，變量的默認(rèn)值為undefined。

null用來(lái)表示尚未存在的對(duì)象，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。

undefined表示“缺少值”，即此處應(yīng)該有一個(gè)值，但是還沒有定義，典型用法是如下。

（1）如果變量聲明了，但沒有賦值，它就等于undefined。

（2）當(dāng)調(diào)用函數(shù)時(shí)，如果沒有提供應(yīng)該提供的參數(shù)，該參數(shù)就等于undefined。

（3）如果對(duì)象沒有賦值，該屬性的值為undefined。

（4）當(dāng)函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。

null表示“沒有對(duì)象”，即此處不應(yīng)該有值，典型用法是如下。

（1）作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。

（2）作為對(duì)象原型鏈的終點(diǎn)。

12．new操作符的作用是什么?

答：作用如下。

（1）創(chuàng)建一個(gè)空對(duì)象。

（2）由this變量引用該對(duì)象。

（3）該對(duì)象繼承該函數(shù)的原型（更改原型鏈的指向）。

（4）把屬性和方法加入到this引用的對(duì)象中。

（5）新創(chuàng)建的對(duì)象由this引用，最后隱式地返回this，過(guò)程如下。

var obj ?= {};

obj.__proto__ = Base.prototype;

Base.call(obj);

13．JavaScript延遲加載的方式有哪些?

答：包括defer和async、動(dòng)態(tài)創(chuàng)建DOM（創(chuàng)建script，插入DOM中，加載完畢后回調(diào)、按需異步載入JavaScript。

14．call()和apply() 的區(qū)別和作用是什么?

答：作用都是在函數(shù)執(zhí)行的時(shí)候，動(dòng)態(tài)改變函數(shù)的運(yùn)行環(huán)境（執(zhí)行上下文）。

call和apply的第一個(gè)參數(shù)都是改變運(yùn)行環(huán)境的對(duì)象。

區(qū)別如下。

call從第二個(gè)參數(shù)開始，每一個(gè)參數(shù)會(huì)依次傳遞給調(diào)用函數(shù)；apply的第二個(gè)參數(shù)是數(shù)組，數(shù)組的每一個(gè)成員會(huì)依次傳遞給調(diào)用函數(shù)。

如：

func.call(func1, var1, var2, var3)

對(duì)應(yīng)的apply寫法為：

func.apply(func1, [var1, var2, var3])

15．哪些操作會(huì)造成內(nèi)存泄漏?

答：內(nèi)存泄漏指不再擁有或需要任何對(duì)象（數(shù)據(jù)）之后，它們?nèi)匀淮嬖谟趦?nèi)存中。

提示：垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為0（沒有其他對(duì)象引用過(guò)該對(duì)象），或?qū)υ搶?duì)象的唯一引用是循環(huán)的，那么該對(duì)象占用的內(nèi)存立即被回收。

如果setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)，會(huì)引發(fā)內(nèi)存泄漏。

閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）等會(huì)造內(nèi)存泄漏。

16．列舉IE與finefox的不同之處。

答：不同之處如下。

（1）IE支持currentStyle；Firefox使用getComputStyle。

（2）IE使用innerText；Firefox使用textContent。

（3）在透明度濾鏡方面，IE使用filter:alpha(opacity= num)；Firefox使用-moz-opacity: num。

（4）在事件方面，IE使用attachEvent：Firefox使用addEventListener。

（5）對(duì)于鼠標(biāo)位置：IE使用event.clientX；Firefox使用event.pageX。

（6）IE使用event.srcElement；Firefox使用event.target。

（7）要消除list的原點(diǎn)，IE中僅須使margin:0即可達(dá)到最終效果；Firetox中需要設(shè)置margin:0、padding:0和list-style:none。

（8）CSS圓角：IE7以下不支持圓角。

17．講解一下JavaScript對(duì)象的幾種創(chuàng)建方式。

答：有以下創(chuàng)建方式。

（1）Object構(gòu)造函數(shù)式。

（2）對(duì)象字面量式。

（3）工廠模式。

（4）安全工廠模式。

（5）構(gòu)造函數(shù)模式。

（6）原型模式。

（7）混合構(gòu)造函數(shù)和原型模式。

（8）動(dòng)態(tài)原型模式。

（9）寄生構(gòu)造函數(shù)模式。

（10）穩(wěn)妥構(gòu)造函數(shù)模式。

18．如何實(shí)現(xiàn)異步編程?

答：具體方法如下。

方法 1，通過(guò)回調(diào)函數(shù)。優(yōu)點(diǎn)是簡(jiǎn)單、容易理解和部署；缺點(diǎn)是不利于代碼的閱讀和維護(hù)，各個(gè)部分之間高度耦合（Coupling），流程混亂，而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。

方法 2，通過(guò)事件監(jiān)聽。可以綁定多個(gè)事件，每個(gè)事件可以指定多個(gè)回調(diào)函數(shù)，而且可以“去耦合”（Decoupling），有利于實(shí)現(xiàn)模塊化；缺點(diǎn)是整個(gè)程序都要變成事件驅(qū)動(dòng)型，運(yùn)行流程會(huì)變得很不清晰。

方法 3，采用發(fā)布/訂閱方式。性質(zhì)與“事件監(jiān)聽”類似，但是明顯優(yōu)于后者。

方法 4，通過(guò)Promise對(duì)象實(shí)現(xiàn)。Promise對(duì)象是CommonJS工作組提出的一種規(guī)范，旨在為異步編程提供統(tǒng)一接口。它的思想是，每一個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象，該對(duì)象有一個(gè)then方法，允許指定回調(diào)函數(shù)。

19．請(qǐng)解釋一下JavaScript的同源策略。

答：同源策略是客戶端腳本（尤其是JavaScript）的重要安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator 2.0，目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。

這里的同源策略指的是協(xié)議、域名、端口相同。同源策略是一種安全協(xié)議。指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性。

20．為什么要有同源限制?

答：我們舉例說(shuō)明。比如一個(gè)黑客，他利用Iframe把真正的銀行登錄頁(yè)面嵌到他的頁(yè)面上，當(dāng)你使用真實(shí)的用戶名、密碼登錄時(shí)，他的頁(yè)面就可以通過(guò)JavaScript讀取到你表單上input中的內(nèi)容，這樣黑客就會(huì)輕松得到你的用戶名和密碼。

21．在JavaScript中，為什么說(shuō)函數(shù)是第一類對(duì)象?

答：第一類函數(shù)即JavaScript中的函數(shù)。這通常意味著這些函數(shù)可以作為參數(shù)傳遞給其他函數(shù)，作為其他函數(shù)的值返回，分配給變量，也可以存儲(chǔ)在數(shù)據(jù)結(jié)構(gòu)中。

22．什么是事件? IE與Firefox的事件機(jī)制有什么區(qū)別? 如何阻止冒泡?

答：事件是在網(wǎng)頁(yè)中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如，當(dāng)單擊一個(gè)按鈕時(shí)，就會(huì)產(chǎn)生一個(gè)事件，它可以被JavaScript偵測(cè)到。

在事件處理機(jī)制上，IE支持事件冒泡；Firefox同時(shí)支持兩種事件模型，也就是捕獲型事件和冒泡型事件。

阻止方法是ev.stopPropagation()。注意舊版IE中的方法ev.cancelBubble = true。

23．函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別?

答：在JavaScript中，在向執(zhí)行環(huán)境中加載數(shù)據(jù)時(shí)，解析器對(duì)函數(shù)聲明和函數(shù)表達(dá)式并非是一視同仁的。解析器會(huì)首先讀取函數(shù)聲明，并使它在執(zhí)行任何代碼之前可用（可以訪問(wèn)）。至于函數(shù)表達(dá)式，則必須等到解析器執(zhí)行到它所在的代碼行，才會(huì)真正解析和執(zhí)行它。

24．如何刪除一個(gè)cookie?

答：為了刪除cookie，要修改expires，代碼如下。

document.cookie = 'user=icketang;expires = ' + new Date(0)

25．編寫一個(gè)方法，求一個(gè)字符串的長(zhǎng)度（單位是字節(jié)）。

答：假設(shè)一個(gè)英文字符占用一字節(jié)，一個(gè)中文字符占用兩字節(jié)：

function GetBytes(str){

var len = str.length;

var bytes = len;

for(var i=0; i

if (str.charCodeAt(i) > 255) bytes++;

}

return bytes;

}

alert(GetBytes("hello 愛創(chuàng)課堂！"));

26．對(duì)于元素，attribute和property的區(qū)別是什么?

答：attribute是DOM元素在文檔中作為HTML標(biāo)簽擁有的屬性；property就是DOM元素在JavaScript中作為對(duì)象擁有的屬性。

對(duì)于HTML的標(biāo)準(zhǔn)屬性來(lái)說(shuō)，attribute和property是同步的，會(huì)自動(dòng)更新，但是對(duì)于自定義的屬性來(lái)說(shuō)，它們是不同步的。

27．解釋延遲腳本在JavaScript中的作用。

答：默認(rèn)情況下，在頁(yè)面加載期間，HTML代碼的解析將暫停，直到腳本停止執(zhí)行。這意味著，如果服務(wù)器速度較慢或者腳本特別“沉重”，則會(huì)導(dǎo)致網(wǎng)頁(yè)延遲。在使用Deferred時(shí)，腳本會(huì)延遲執(zhí)行，直到HTML解析器運(yùn)行。這縮短了網(wǎng)頁(yè)的加載時(shí)間，并且它們的顯示速度更快。

28．什么是閉包（closure）?

答：為了說(shuō)明閉包，創(chuàng)建一個(gè)閉包。

function hello() {

// 函數(shù)執(zhí)行完畢，變量仍然存在

var num = 100;

var showResult= function() { alert(num); }

num++;

return showResult;

}

var showResult= hello();

showResult()//執(zhí)行結(jié)果：彈出101

執(zhí)行hello()后，hello()閉包內(nèi)部的變量會(huì)存在，而閉包內(nèi)部函數(shù)的內(nèi)部變量不會(huì)存在，使得JavaScript的垃圾回收機(jī)制不會(huì)收回hello()占用的資源，因?yàn)閔ello()中內(nèi)部函數(shù)的執(zhí)行需要依賴hello()中的變量。

29．如何判斷一個(gè)對(duì)象是否屬于某個(gè)類?

答：使用instanceof關(guān)鍵字，判斷一個(gè)對(duì)象是否是類的實(shí)例化對(duì)象；使用constructor屬性，判斷一個(gè)對(duì)象是否是類的構(gòu)造函數(shù)。

30．JavaScript中如何使用事件處理程序?

答：事件是由用戶與頁(yè)面的交互（例如單擊鏈接或填寫表單）導(dǎo)致的操作。需要一個(gè)事件處理程序來(lái)保證所有事件的正確執(zhí)行。事件處理程序是對(duì)象的額外屬性。此屬性包括事件的名稱和事件發(fā)生時(shí)采取的操作。

《前端程序員面試秘籍》

張容銘?著

本書針對(duì)前端知識(shí)所涉及的方方面面，總結(jié)歸納了30個(gè)模塊，提出了1076道前端面試題，模擬了真實(shí)的面試場(chǎng)景。從面試官的角度出發(fā)，針對(duì)某一知識(shí)點(diǎn)，并以面試官的口吻提出疑問(wèn)。在解答問(wèn)題過(guò)程中，站在應(yīng)試者的角度給出答案。讓讀者進(jìn)入真實(shí)的企業(yè)面試氛圍。書中面試題極具針對(duì)性，并具有一定的獨(dú)立性，讀者可以根據(jù)個(gè)人喜好，可以針對(duì)性地閱覽某一章節(jié)。

本文轉(zhuǎn)載自異步社區(qū)。

編程語(yǔ)言 算法

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。