174道JavaScript 面試知識(shí)點(diǎn)總結(jié)（上）

來(lái)源 | https://github.com/CavsZhouyou/

1. 介紹 js 的基本數(shù)據(jù)類(lèi)型。

js 一共有六種基本數(shù)據(jù)類(lèi)型，分別是 Undefined、Null、Boolean、Number、String，還有在 ES6 中新增的 Symbol 和 ES10 中新增的 BigInt 類(lèi)型。
Symbol 代表創(chuàng)建后獨(dú)一無(wú)二且不可變的數(shù)據(jù)類(lèi)型，它的出現(xiàn)我認(rèn)為主要是為了解決可能出現(xiàn)的全局變量沖突的問(wèn)題。
BigInt 是一種數(shù)字類(lèi)型的數(shù)據(jù)，它可以表示任意精度格式的整數(shù)，使用 BigInt 可以安全地存儲(chǔ)和操作大整數(shù)，即使這個(gè)數(shù)已經(jīng)超出了 Number 能夠表示的安全整數(shù)范圍。

2. JavaScript 有幾種類(lèi)型的值？你能畫(huà)一下他們的內(nèi)存圖嗎？

涉及知識(shí)點(diǎn)：

• 棧：原始數(shù)據(jù)類(lèi)型（Undefined、Null、Boolean、Number、String）
• 堆：引用數(shù)據(jù)類(lèi)型（對(duì)象、數(shù)組和函數(shù)）

兩種類(lèi)型的區(qū)別是：存儲(chǔ)位置不同。
原始數(shù)據(jù)類(lèi)型直接存儲(chǔ)在棧（stack）中的簡(jiǎn)單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲(chǔ)。

引用數(shù)據(jù)類(lèi)型存儲(chǔ)在堆（heap）中的對(duì)象，占據(jù)空間大、大小不固定。如果存儲(chǔ)在棧中，將會(huì)影響程序運(yùn)行的性能；引用數(shù)據(jù)類(lèi)型在
棧中存儲(chǔ)了指針，該指針指向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)
體。

回答：

js 可以分為兩種類(lèi)型的值，一種是基本數(shù)據(jù)類(lèi)型，一種是復(fù)雜數(shù)據(jù)類(lèi)型。

基本數(shù)據(jù)類(lèi)型....（參考1）

復(fù)雜數(shù)據(jù)類(lèi)型指的是 Object 類(lèi)型，所有其他的如 Array、Date 等數(shù)據(jù)類(lèi)型都可以理解為 Object 類(lèi)型的子類(lèi)。

兩種類(lèi)型間的主要區(qū)別是它們的存儲(chǔ)位置不同，基本數(shù)據(jù)類(lèi)型的值直接保存在棧中，而復(fù)雜數(shù)據(jù)類(lèi)型的值保存在堆中，通過(guò)使用在棧中
保存對(duì)應(yīng)的指針來(lái)獲取堆中的值。

詳細(xì)資料可以參考：《JavaScript 有幾種類(lèi)型的值？》《JavaScript 有幾種類(lèi)型的值？能否畫(huà)一下它們的內(nèi)存圖；》

3. 什么是堆？什么是棧？它們之間有什么區(qū)別和聯(lián)系？

堆和棧的概念存在于數(shù)據(jù)結(jié)構(gòu)中和操作系統(tǒng)內(nèi)存中。

在數(shù)據(jù)結(jié)構(gòu)中，棧中數(shù)據(jù)的存取方式為先進(jìn)后出。而堆是一個(gè)優(yōu)先隊(duì)列，是按優(yōu)先級(jí)來(lái)進(jìn)行排序的，優(yōu)先級(jí)可以按照大小來(lái)規(guī)定。完全
二叉樹(shù)是堆的一種實(shí)現(xiàn)方式。

在操作系統(tǒng)中，內(nèi)存被分為棧區(qū)和堆區(qū)。

棧區(qū)內(nèi)存由編譯器自動(dòng)分配釋放，存放函數(shù)的參數(shù)值，局部變量的值等。其操作方式類(lèi)似于數(shù)據(jù)結(jié)構(gòu)中的棧。

堆區(qū)內(nèi)存一般由程序員分配釋放，若程序員不釋放，程序結(jié)束時(shí)可能由垃圾回收機(jī)制回收。

詳細(xì)資料可以參考：《什么是堆？什么是棧？他們之間有什么區(qū)別和聯(lián)系？》

4. 內(nèi)部屬性 [[Class]] 是什么？

所有 typeof 返回值為 "object" 的對(duì)象（如數(shù)組）都包含一個(gè)內(nèi)部屬性 [[Class]]（我們可以把它看作一個(gè)內(nèi)部的分類(lèi)，而非
傳統(tǒng)的面向?qū)ο笠饬x上的類(lèi)）。這個(gè)屬性無(wú)法直接訪(fǎng)問(wèn)，一般通過(guò) Object.prototype.toString(..) 來(lái)查看。例如：

Object.prototype.toString.call( [1,2,3] );
// "[object Array]"

Object.prototype.toString.call( /regex-literal/i );
// "[object RegExp]"

// 我們自己創(chuàng)建的類(lèi)就不會(huì)有這份特殊待遇，因?yàn)?nbsp;toString() 找不到 toStringTag 屬性時(shí)只好返回默認(rèn)的 Object 標(biāo)簽
// 默認(rèn)情況類(lèi)的[[Class]]返回[object Object]
class Class1 {}
Object.prototype.toString.call(new Class1()); // "[object Object]"
// 需要定制[[Class]]
class Class2 {
  get [Symbol.toStringTag]() {
    return "Class2";
  }
}
Object.prototype.toString.call(new Class2()); // "[object Class2]"

5. 介紹 js 有哪些內(nèi)置對(duì)象？

涉及知識(shí)點(diǎn)：

全局的對(duì)象（ global objects ）或稱(chēng)標(biāo)準(zhǔn)內(nèi)置對(duì)象，不要和 "全局對(duì)象（global object）" 混淆。這里說(shuō)的全局的對(duì)象是說(shuō)在
全局作用域里的對(duì)象。全局作用域中的其他對(duì)象可以由用戶(hù)的腳本創(chuàng)建或由宿主程序提供。

標(biāo)準(zhǔn)內(nèi)置對(duì)象的分類(lèi)

（1）值屬性，這些全局屬性返回一個(gè)簡(jiǎn)單值，這些值沒(méi)有自己的屬性和方法。

例如 Infinity、NaN、undefined、null 字面量

（2）函數(shù)屬性，全局函數(shù)可以直接調(diào)用，不需要在調(diào)用時(shí)指定所屬對(duì)象，執(zhí)行結(jié)束后會(huì)將結(jié)果直接返回給調(diào)用者。

例如 eval()、parseFloat()、parseInt() 等

（3）基本對(duì)象，基本對(duì)象是定義或使用其他對(duì)象的基礎(chǔ)。基本對(duì)象包括一般對(duì)象、函數(shù)對(duì)象和錯(cuò)誤對(duì)象。

例如 Object、Function、Boolean、Symbol、Error 等

（4）數(shù)字和日期對(duì)象，用來(lái)表示數(shù)字、日期和執(zhí)行數(shù)學(xué)計(jì)算的對(duì)象。

例如 Number、Math、Date

（5）字符串，用來(lái)表示和操作字符串的對(duì)象。

例如 String、RegExp

（6）可索引的集合對(duì)象，這些對(duì)象表示按照索引值來(lái)排序的數(shù)據(jù)集合，包括數(shù)組和類(lèi)型數(shù)組，以及類(lèi)數(shù)組結(jié)構(gòu)的對(duì)象。例如 Array

（7）使用鍵的集合對(duì)象，這些集合對(duì)象在存儲(chǔ)數(shù)據(jù)時(shí)會(huì)使用到鍵，支持按照插入順序來(lái)迭代元素。

例如 Map、Set、WeakMap、WeakSet

（8）矢量集合，SIMD 矢量集合中的數(shù)據(jù)會(huì)被組織為一個(gè)數(shù)據(jù)序列。

例如 SIMD 等

（9）結(jié)構(gòu)化數(shù)據(jù)，這些對(duì)象用來(lái)表示和操作結(jié)構(gòu)化的緩沖區(qū)數(shù)據(jù)，或使用 JSON 編碼的數(shù)據(jù)。

例如 JSON 等

（10）控制抽象對(duì)象

例如 Promise、Generator 等

（11）反射

例如 Reflect、Proxy

（12）國(guó)際化，為了支持多語(yǔ)言處理而加入 ECMAScript 的對(duì)象。

例如 Intl、Intl.Collator 等

（13）WebAssembly

（14）其他

例如 arguments

回答：

js 中的內(nèi)置對(duì)象主要指的是在程序執(zhí)行前存在全局作用域里的由 js 定義的一些全局值屬性、函數(shù)和用來(lái)實(shí)例化其他對(duì)象的構(gòu)造函
數(shù)對(duì)象。一般我們經(jīng)常用到的如全局變量值 NaN、undefined，全局函數(shù)如 parseInt()、parseFloat() 用來(lái)實(shí)例化對(duì)象的構(gòu)
造函數(shù)如 Date、Object 等，還有提供數(shù)學(xué)計(jì)算的單體內(nèi)置對(duì)象如 Math 對(duì)象。

詳細(xì)資料可以參考：《標(biāo)準(zhǔn)內(nèi)置對(duì)象的分類(lèi)》《JS 所有內(nèi)置對(duì)象屬性和方法匯總》

6. undefined 與 undeclared 的區(qū)別？

已在作用域中聲明但還沒(méi)有賦值的變量，是 undefined 的。相反，還沒(méi)有在作用域中聲明過(guò)的變量，是 undeclared 的。

對(duì)于 undeclared 變量的引用，瀏覽器會(huì)報(bào)引用錯(cuò)誤，如 ReferenceError: b is not defined 。但是我們可以使用 typ
eof 的安全防范機(jī)制來(lái)避免報(bào)錯(cuò)，因?yàn)閷?duì)于 undeclared（或者 not defined ）變量，typeof 會(huì)返回 "undefined"。

7. null 和 undefined 的區(qū)別？

首先 Undefined 和 Null 都是基本數(shù)據(jù)類(lèi)型，這兩個(gè)基本數(shù)據(jù)類(lèi)型分別都只有一個(gè)值，就是 undefined 和 null。

undefined 代表的含義是未定義，null 代表的含義是空對(duì)象。一般變量聲明了但還沒(méi)有定義的時(shí)候會(huì)返回 undefined，null
主要用于賦值給一些可能會(huì)返回對(duì)象的變量，作為初始化。

undefined 在 js 中不是一個(gè)保留字，這意味著我們可以使用 undefined 來(lái)作為一個(gè)變量名，這樣的做法是非常危險(xiǎn)的，它
會(huì)影響我們對(duì) undefined 值的判斷。但是我們可以通過(guò)一些方法獲得安全的 undefined 值，比如說(shuō) void 0。

當(dāng)我們對(duì)兩種類(lèi)型使用 typeof 進(jìn)行判斷的時(shí)候，Null 類(lèi)型化會(huì)返回 “object”，這是一個(gè)歷史遺留的問(wèn)題。當(dāng)我們使用雙等
號(hào)對(duì)兩種類(lèi)型的值進(jìn)行比較時(shí)會(huì)返回 true，使用三個(gè)等號(hào)時(shí)會(huì)返回 false。

詳細(xì)資料可以參考：《JavaScript 深入理解之 undefined 與 null》

8. 如何獲取安全的 undefined 值？

因?yàn)?undefined 是一個(gè)標(biāo)識(shí)符，所以可以被當(dāng)作變量來(lái)使用和賦值，但是這樣會(huì)影響 undefined 的正常判斷。

表達(dá)式 void ___ 沒(méi)有返回值，因此返回結(jié)果是 undefined。void 并不改變表達(dá)式的結(jié)果，只是讓表達(dá)式不返回值。

按慣例我們用 void 0 來(lái)獲得 undefined。

9. 說(shuō)幾條寫(xiě) JavaScript 的基本規(guī)范？

在平常項(xiàng)目開(kāi)發(fā)中，我們遵守一些這樣的基本規(guī)范，比如說(shuō)：

（1）一個(gè)函數(shù)作用域中所有的變量聲明應(yīng)該盡量提到函數(shù)首部，用一個(gè) var 聲明，不允許出現(xiàn)兩個(gè)連續(xù)的 var 聲明，聲明時(shí)
    如果變量沒(méi)有值，應(yīng)該給該變量賦值對(duì)應(yīng)類(lèi)型的初始值，便于他人閱讀代碼時(shí)，能夠一目了然的知道變量對(duì)應(yīng)的類(lèi)型值。

（2）代碼中出現(xiàn)地址、時(shí)間等字符串時(shí)需要使用常量代替。

（3）在進(jìn)行比較的時(shí)候吧，盡量使用'===', '!=='代替'==', '!='。

（4）不要在內(nèi)置對(duì)象的原型上添加方法，如 Array, Date。

（5）switch 語(yǔ)句必須帶有 default 分支。

（6）for 循環(huán)必須使用大括號(hào)。

（7）if 語(yǔ)句必須使用大括號(hào)。

10. JavaScript 原型，原型鏈？有什么特點(diǎn)？

在 js 中我們是使用構(gòu)造函數(shù)來(lái)新建一個(gè)對(duì)象的，每一個(gè)構(gòu)造函數(shù)的內(nèi)部都有一個(gè) prototype 屬性值，這個(gè)屬性值是一個(gè)對(duì)
象，這個(gè)對(duì)象包含了可以由該構(gòu)造函數(shù)的所有實(shí)例共享的屬性和方法。當(dāng)我們使用構(gòu)造函數(shù)新建一個(gè)對(duì)象后，在這個(gè)對(duì)象的內(nèi)部
將包含一個(gè)指針，這個(gè)指針指向構(gòu)造函數(shù)的 prototype 屬性對(duì)應(yīng)的值，在 ES5 中這個(gè)指針被稱(chēng)為對(duì)象的原型。一般來(lái)說(shuō)我們
是不應(yīng)該能夠獲取到這個(gè)值的，但是現(xiàn)在瀏覽器中都實(shí)現(xiàn)了 __proto__ 屬性來(lái)讓我們?cè)L問(wèn)這個(gè)屬性，但是我們最好不要使用這
個(gè)屬性，因?yàn)樗皇且?guī)范中規(guī)定的。ES5 中新增了一個(gè) Object.getPrototypeOf() 方法，我們可以通過(guò)這個(gè)方法來(lái)獲取對(duì)
象的原型。

當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么它就會(huì)去它的原型對(duì)象里找這個(gè)屬性，這個(gè)原型對(duì)象又
會(huì)有自己的原型，于是就這樣一直找下去，也就是原型鏈的概念。原型鏈的盡頭一般來(lái)說(shuō)都是 Object.prototype 所以這就
是我們新建的對(duì)象為什么能夠使用 toString() 等方法的原因。

特點(diǎn)：

JavaScript 對(duì)象是通過(guò)引用來(lái)傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒(méi)有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)，與
之相關(guān)的對(duì)象也會(huì)繼承這一改變。

詳細(xì)資料可以參考：《JavaScript 深入理解之原型與原型鏈》

11. js 獲取原型的方法？

• p.__proto__
• p.constructor.prototype
• Object.getPrototypeOf(p)

12. 在 js 中不同進(jìn)制數(shù)字的表示方式

• 以 0X、0x 開(kāi)頭的表示為十六進(jìn)制。

• 以 0、0O、0o 開(kāi)頭的表示為八進(jìn)制。

• 以 0B、0b 開(kāi)頭的表示為二進(jìn)制格式。

13. js 中整數(shù)的安全范圍是多少？

安全整數(shù)指的是，在這個(gè)范圍內(nèi)的整數(shù)轉(zhuǎn)化為二進(jìn)制存儲(chǔ)的時(shí)候不會(huì)出現(xiàn)精度丟失，能夠被“安全”呈現(xiàn)的最大整數(shù)是 2^53 - 1，
即9007199254740991，在 ES6 中被定義為 Number.MAX_SAFE_INTEGER。最小整數(shù)是-9007199254740991，在 ES6 中
被定義為 Number.MIN_SAFE_INTEGER。

如果某次計(jì)算的結(jié)果得到了一個(gè)超過(guò) JavaScript 數(shù)值范圍的值，那么這個(gè)值會(huì)被自動(dòng)轉(zhuǎn)換為特殊的 Infinity 值。如果某次
計(jì)算返回了正或負(fù)的 Infinity 值，那么該值將無(wú)法參與下一次的計(jì)算。判斷一個(gè)數(shù)是不是有窮的，可以使用 isFinite 函數(shù)
來(lái)判斷。

14. typeof NaN 的結(jié)果是什么？

NaN 意指“不是一個(gè)數(shù)字”（not a number），NaN 是一個(gè)“警戒值”（sentinel value，有特殊用途的常規(guī)值），用于指出
數(shù)字類(lèi)型中的錯(cuò)誤情況，即“執(zhí)行數(shù)學(xué)運(yùn)算沒(méi)有成功，這是失敗后返回的結(jié)果”。

typeof NaN; // "number"

NaN 是一個(gè)特殊值，它和自身不相等，是唯一一個(gè)非自反（自反，reflexive，即 x === x 不成立）的值。而 NaN != NaN
為 true。

15. isNaN 和 Number.isNaN 函數(shù)的區(qū)別？

函數(shù) isNaN 接收參數(shù)后，會(huì)嘗試將這個(gè)參數(shù)轉(zhuǎn)換為數(shù)值，任何不能被轉(zhuǎn)換為數(shù)值的的值都會(huì)返回 true，因此非數(shù)字值傳入也會(huì)
返回 true ，會(huì)影響 NaN 的判斷。

函數(shù) Number.isNaN 會(huì)首先判斷傳入?yún)?shù)是否為數(shù)字，如果是數(shù)字再繼續(xù)判斷是否為 NaN ，這種方法對(duì)于 NaN 的判斷更為
準(zhǔn)確。

16. Array 構(gòu)造函數(shù)只有一個(gè)參數(shù)值時(shí)的表現(xiàn)？

Array 構(gòu)造函數(shù)只帶一個(gè)數(shù)字參數(shù)的時(shí)候，該參數(shù)會(huì)被作為數(shù)組的預(yù)設(shè)長(zhǎng)度（length），而非只充當(dāng)數(shù)組中的一個(gè)元素。這樣
創(chuàng)建出來(lái)的只是一個(gè)空數(shù)組，只不過(guò)它的 length 屬性被設(shè)置成了指定的值。

構(gòu)造函數(shù) Array(..) 不要求必須帶 new 關(guān)鍵字。不帶時(shí)，它會(huì)被自動(dòng)補(bǔ)上。

17. 其他值到字符串的轉(zhuǎn)換規(guī)則？

規(guī)范的 9.8 節(jié)中定義了抽象操作 ToString ，它負(fù)責(zé)處理非字符串到字符串的強(qiáng)制類(lèi)型轉(zhuǎn)換。

（1）Null 和 Undefined 類(lèi)型 ，null 轉(zhuǎn)換為 "null"，undefined 轉(zhuǎn)換為 "undefined"，

（2）Boolean 類(lèi)型，true 轉(zhuǎn)換為 "true"，false 轉(zhuǎn)換為 "false"。

（3）Number 類(lèi)型的值直接轉(zhuǎn)換，不過(guò)那些極小和極大的數(shù)字會(huì)使用指數(shù)形式。

（4）Symbol 類(lèi)型的值直接轉(zhuǎn)換，但是只允許顯式強(qiáng)制類(lèi)型轉(zhuǎn)換，使用隱式強(qiáng)制類(lèi)型轉(zhuǎn)換會(huì)產(chǎn)生錯(cuò)誤。

（5）對(duì)普通對(duì)象來(lái)說(shuō)，除非自行定義 toString() 方法，否則會(huì)調(diào)用 toString()（Object.prototype.toString()）
    來(lái)返回內(nèi)部屬性 [[Class]] 的值，如"[object Object]"。如果對(duì)象有自己的 toString() 方法，字符串化時(shí)就會(huì)
    調(diào)用該方法并使用其返回值。

18. 其他值到數(shù)字值的轉(zhuǎn)換規(guī)則？

有時(shí)我們需要將非數(shù)字值當(dāng)作數(shù)字來(lái)使用，比如數(shù)學(xué)運(yùn)算。為此 ES5 規(guī)范在 9.3 節(jié)定義了抽象操作 ToNumber。

（1）Undefined 類(lèi)型的值轉(zhuǎn)換為 NaN。

（2）Null 類(lèi)型的值轉(zhuǎn)換為 0。

（3）Boolean 類(lèi)型的值，true 轉(zhuǎn)換為 1，false 轉(zhuǎn)換為 0。

（4）String 類(lèi)型的值轉(zhuǎn)換如同使用 Number() 函數(shù)進(jìn)行轉(zhuǎn)換，如果包含非數(shù)字值則轉(zhuǎn)換為 NaN，空字符串為 0。

（5）Symbol 類(lèi)型的值不能轉(zhuǎn)換為數(shù)字，會(huì)報(bào)錯(cuò)。

（6）對(duì)象（包括數(shù)組）會(huì)首先被轉(zhuǎn)換為相應(yīng)的基本類(lèi)型值，如果返回的是非數(shù)字的基本類(lèi)型值，則再遵循以上規(guī)則將其強(qiáng)制轉(zhuǎn)換為數(shù)字。

為了將值轉(zhuǎn)換為相應(yīng)的基本類(lèi)型值，抽象操作 ToPrimitive 會(huì)首先（通過(guò)內(nèi)部操作 DefaultValue）檢查該值是否有valueOf() 方法。如果有并且返回基本類(lèi)型值，就使用該值進(jìn)行強(qiáng)制類(lèi)型轉(zhuǎn)換。如果沒(méi)有就使用 toString() 的返回值（如果存在）來(lái)進(jìn)行強(qiáng)制類(lèi)型轉(zhuǎn)換。

如果 valueOf() 和 toString() 均不返回基本類(lèi)型值，會(huì)產(chǎn)生 TypeError 錯(cuò)誤。

19. 其他值到布爾類(lèi)型的值的轉(zhuǎn)換規(guī)則？

ES5 規(guī)范 9.2 節(jié)中定義了抽象操作 ToBoolean，列舉了布爾強(qiáng)制類(lèi)型轉(zhuǎn)換所有可能出現(xiàn)的結(jié)果。

以下這些是假值：
? undefined
? null
? false
? +0、-0 和 NaN
? ""

假值的布爾強(qiáng)制類(lèi)型轉(zhuǎn)換結(jié)果為 false。從邏輯上說(shuō)，假值列表以外的都應(yīng)該是真值。

20. {} 和 [] 的 valueOf 和 toString 的結(jié)果是什么？

{} 的 valueOf 結(jié)果為 {} ，toString 的結(jié)果為 "[object Object]"

[] 的 valueOf 結(jié)果為 [] ，toString 的結(jié)果為 ""

21. 什么是假值對(duì)象？

瀏覽器在某些特定情況下，在常規(guī) JavaScript 語(yǔ)法基礎(chǔ)上自己創(chuàng)建了一些外來(lái)值，這些就是“假值對(duì)象”。假值對(duì)象看起來(lái)和
普通對(duì)象并無(wú)二致（都有屬性，等等），但將它們強(qiáng)制類(lèi)型轉(zhuǎn)換為布爾值時(shí)結(jié)果為 false 最常見(jiàn)的例子是 document.all，它
是一個(gè)類(lèi)數(shù)組對(duì)象，包含了頁(yè)面上的所有元素，由 DOM（而不是 JavaScript 引擎）提供給 JavaScript 程序使用。

22. ~ 操作符的作用？

~ 返回 2 的補(bǔ)碼，并且 ~ 會(huì)將數(shù)字轉(zhuǎn)換為 32 位整數(shù)，因此我們可以使用 ~ 來(lái)進(jìn)行取整操作。

~x 大致等同于 -(x+1)。

23. 解析字符串中的數(shù)字和將字符串強(qiáng)制類(lèi)型轉(zhuǎn)換為數(shù)字的返回結(jié)果都是數(shù)字，它們之間的區(qū)別是什么？

解析允許字符串（如 parseInt() ）中含有非數(shù)字字符，解析按從左到右的順序，如果遇到非數(shù)字字符就停止。而轉(zhuǎn)換（如 Nu
mber ()）不允許出現(xiàn)非數(shù)字字符，否則會(huì)失敗并返回 NaN。

24. + 操作符什么時(shí)候用于字符串的拼接？

根據(jù) ES5 規(guī)范 11.6.1 節(jié)，如果某個(gè)操作數(shù)是字符串或者能夠通過(guò)以下步驟轉(zhuǎn)換為字符串的話(huà)，+ 將進(jìn)行拼接操作。如果其
中一個(gè)操作數(shù)是對(duì)象（包括數(shù)組），則首先對(duì)其調(diào)用 ToPrimitive 抽象操作，該抽象操作再調(diào)用 [[DefaultValue]]，以
數(shù)字作為上下文。如果不能轉(zhuǎn)換為字符串，則會(huì)將其轉(zhuǎn)換為數(shù)字類(lèi)型來(lái)進(jìn)行計(jì)算。

簡(jiǎn)單來(lái)說(shuō)就是，如果 + 的其中一個(gè)操作數(shù)是字符串（或者通過(guò)以上步驟最終得到字符串），則執(zhí)行字符串拼接，否則執(zhí)行數(shù)字
加法。

那么對(duì)于除了加法的運(yùn)算符來(lái)說(shuō)，只要其中一方是數(shù)字，那么另一方就會(huì)被轉(zhuǎn)為數(shù)字。

25. 什么情況下會(huì)發(fā)生布爾值的隱式強(qiáng)制類(lèi)型轉(zhuǎn)換？

（1） if (..) 語(yǔ)句中的條件判斷表達(dá)式。
（2） for ( .. ; .. ; .. ) 語(yǔ)句中的條件判斷表達(dá)式（第二個(gè)）。
（3） while (..) 和 do..while(..) 循環(huán)中的條件判斷表達(dá)式。
（4） ? : 中的條件判斷表達(dá)式。
（5） 邏輯運(yùn)算符 ||（邏輯或）和 &&（邏輯與）左邊的操作數(shù)（作為條件判斷表達(dá)式）。

26. || 和 && 操作符的返回值？

|| 和 && 首先會(huì)對(duì)第一個(gè)操作數(shù)執(zhí)行條件判斷，如果其不是布爾值就先進(jìn)行 ToBoolean 強(qiáng)制類(lèi)型轉(zhuǎn)換，然后再執(zhí)行條件
判斷。

對(duì)于 || 來(lái)說(shuō)，如果條件判斷結(jié)果為 true 就返回第一個(gè)操作數(shù)的值，如果為 false 就返回第二個(gè)操作數(shù)的值。

&& 則相反，如果條件判斷結(jié)果為 true 就返回第二個(gè)操作數(shù)的值，如果為 false 就返回第一個(gè)操作數(shù)的值。

|| 和 && 返回它們其中一個(gè)操作數(shù)的值，而非條件判斷的結(jié)果

27. Symbol 值的強(qiáng)制類(lèi)型轉(zhuǎn)換？

ES6 允許從符號(hào)到字符串的顯式強(qiáng)制類(lèi)型轉(zhuǎn)換，然而隱式強(qiáng)制類(lèi)型轉(zhuǎn)換會(huì)產(chǎn)生錯(cuò)誤。

Symbol 值不能夠被強(qiáng)制類(lèi)型轉(zhuǎn)換為數(shù)字（顯式和隱式都會(huì)產(chǎn)生錯(cuò)誤），但可以被強(qiáng)制類(lèi)型轉(zhuǎn)換為布爾值（顯式和隱式結(jié)果
都是 true ）。

28. == 操作符的強(qiáng)制類(lèi)型轉(zhuǎn)換規(guī)則？

（1）字符串和數(shù)字之間的相等比較，將字符串轉(zhuǎn)換為數(shù)字之后再進(jìn)行比較。

（2）其他類(lèi)型和布爾類(lèi)型之間的相等比較，先將布爾值轉(zhuǎn)換為數(shù)字后，再應(yīng)用其他規(guī)則進(jìn)行比較。

（3）null 和 undefined 之間的相等比較，結(jié)果為真。其他值和它們進(jìn)行比較都返回假值。

（4）對(duì)象和非對(duì)象之間的相等比較，對(duì)象先調(diào)用 ToPrimitive 抽象操作后，再進(jìn)行比較。

（5）如果一個(gè)操作值為 NaN ，則相等比較返回 false（ NaN 本身也不等于 NaN ）。

（6）如果兩個(gè)操作值都是對(duì)象，則比較它們是不是指向同一個(gè)對(duì)象。如果兩個(gè)操作數(shù)都指向同一個(gè)對(duì)象，則相等操作符返回 true，否則，返回 false。

詳細(xì)資料可以參考：《JavaScript 字符串間的比較》

29. 如何將字符串轉(zhuǎn)化為數(shù)字，例如 '12.3b'?

（1）使用 Number() 方法，前提是所包含的字符串不包含不合法字符。

（2）使用 parseInt() 方法，parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。還可以設(shè)置要解析的數(shù)字的基數(shù)。當(dāng)基數(shù)的值為 0，或沒(méi)有設(shè)置該參數(shù)時(shí)，parseInt() 會(huì)根據(jù) string 來(lái)判斷數(shù)字的基數(shù)。

（3）使用 parseFloat() 方法，該函數(shù)解析一個(gè)字符串參數(shù)并返回一個(gè)浮點(diǎn)數(shù)。

（4）使用 + 操作符的隱式轉(zhuǎn)換。

詳細(xì)資料可以參考：《詳解 JS 中 Number()、parseInt() 和 parseFloat() 的區(qū)別》

30. 如何將浮點(diǎn)數(shù)點(diǎn)左邊的數(shù)每三位添加一個(gè)逗號(hào)，如 12000000.11 轉(zhuǎn)化為『12,000,000.11』?

// 方法一
function format(number) {
  return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
}
// 方法二
function format1(number) {
  return Intl.NumberFormat().format(number)
}
// 方法三
function format2(number) {
  return number.toLocaleString('en')
}

31. 常用正則表達(dá)式

// （1）匹配 16 進(jìn)制顏色值
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;

// （2）匹配日期，如 yyyy-mm-dd 格式
var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;

// （3）匹配 qq 號(hào)
var regex = /^[1-9][0-9]{4,10}$/g;

// （4）手機(jī)號(hào)碼正則
var regex = /^1[34578]\d{9}$/g;

// （5）用戶(hù)名正則
var regex = /^[a-zA-Z\$][a-zA-Z0-9_\$]{4,16}$/;

詳細(xì)資料可以參考：《前端表單驗(yàn)證常用的 15 個(gè) JS 正則表達(dá)式》《JS 常用正則匯總》

32. 生成隨機(jī)數(shù)的各種方法？

《JS - 生成隨機(jī)數(shù)的方法匯總（不同范圍、類(lèi)型的隨機(jī)數(shù)）》

33. 如何實(shí)現(xiàn)數(shù)組的隨機(jī)排序？

// （1）使用數(shù)組 sort 方法對(duì)數(shù)組元素隨機(jī)排序，讓 Math.random() 出來(lái)的數(shù)與 0.5 比較，如果大于就返回 1 交換位置，如果小于就返回 -1，不交換位置。

function randomSort(a, b) {
  return Math.random() > 0.5 ? -1 : 1;
}

//  缺點(diǎn)：每個(gè)元素被派到新數(shù)組的位置不是隨機(jī)的，原因是 sort() 方法是依次比較的。

// （2）隨機(jī)從原數(shù)組抽取一個(gè)元素，加入到新數(shù)組

function randomSort(arr) {
  var result = [];

  while (arr.length > 0) {
    var randomIndex = Math.floor(Math.random() * arr.length);
    result.push(arr[randomIndex]);
    arr.splice(randomIndex, 1);
  }

  return result;
}

// （3）隨機(jī)交換數(shù)組內(nèi)的元素（洗牌算法類(lèi)似）

function randomSort(arr) {
  var index,
    randomIndex,
    temp,
    len = arr.length;

  for (index = 0; index < len; index++) {
    randomIndex = Math.floor(Math.random() * (len - index)) + index;

    temp = arr[index];
    arr[index] = arr[randomIndex];
    arr[randomIndex] = temp;
  }

  return arr;
}

// es6
function randomSort(array) {
  let length = array.length;

  if (!Array.isArray(array) || length <= 1) return;

  for (let index = 0; index < length - 1; index++) {
    let randomIndex = Math.floor(Math.random() * (length - index)) + index;

    [array[index], array[randomIndex]] = [array[randomIndex], array[index]];
  }

  return array;
}

詳細(xì)資料可以參考：《Fisher and Yates 的原始版》《javascript 實(shí)現(xiàn)數(shù)組隨機(jī)排序?》《JavaScript 學(xué)習(xí)筆記：數(shù)組隨機(jī)排序》

34. javascript 創(chuàng)建對(duì)象的幾種方式？

我們一般使用字面量的形式直接創(chuàng)建對(duì)象，但是這種創(chuàng)建方式對(duì)于創(chuàng)建大量相似對(duì)象的時(shí)候，會(huì)產(chǎn)生大量的重復(fù)代碼。但 js
和一般的面向?qū)ο蟮恼Z(yǔ)言不同，在 ES6 之前它沒(méi)有類(lèi)的概念。但是我們可以使用函數(shù)來(lái)進(jìn)行模擬，從而產(chǎn)生出可復(fù)用的對(duì)象
創(chuàng)建方式，我了解到的方式有這么幾種：

（1）第一種是工廠(chǎng)模式，工廠(chǎng)模式的主要工作原理是用函數(shù)來(lái)封裝創(chuàng)建對(duì)象的細(xì)節(jié)，從而通過(guò)調(diào)用函數(shù)來(lái)達(dá)到復(fù)用的目的。但是它有一個(gè)很大的問(wèn)題就是創(chuàng)建出來(lái)的對(duì)象無(wú)法和某個(gè)類(lèi)型聯(lián)系起來(lái)，它只是簡(jiǎn)單的封裝了復(fù)用代碼，而沒(méi)有建立起對(duì)象和類(lèi)型間的關(guān)系。

（2）第二種是構(gòu)造函數(shù)模式。js 中每一個(gè)函數(shù)都可以作為構(gòu)造函數(shù)，只要一個(gè)函數(shù)是通過(guò) new 來(lái)調(diào)用的，那么我們就可以把它稱(chēng)為構(gòu)造函數(shù)。執(zhí)行構(gòu)造函數(shù)首先會(huì)創(chuàng)建一個(gè)對(duì)象，然后將對(duì)象的原型指向構(gòu)造函數(shù)的 prototype 屬性，然后將執(zhí)行上下文中的 this 指向這個(gè)對(duì)象，最后再執(zhí)行整個(gè)函數(shù)，如果返回值不是對(duì)象，則返回新建的對(duì)象。因?yàn)?this 的值指向了新建的對(duì)象，因此我們可以使用 this 給對(duì)象賦值。構(gòu)造函數(shù)模式相對(duì)于工廠(chǎng)模式的優(yōu)點(diǎn)是，所創(chuàng)建的對(duì)象和構(gòu)造函數(shù)建立起了聯(lián)系，因此我們可以通過(guò)原型來(lái)識(shí)別對(duì)象的類(lèi)型。但是構(gòu)造函數(shù)存在一個(gè)缺點(diǎn)就是，造成了不必要的函數(shù)對(duì)象的創(chuàng)建，因?yàn)樵?js 中函數(shù)也是一個(gè)對(duì)象，因此如果對(duì)象屬性中如果包含函數(shù)的話(huà)，那么每次我們都會(huì)新建一個(gè)函數(shù)對(duì)象，浪費(fèi)了不必要的內(nèi)存空間，因?yàn)楹瘮?shù)是所有的實(shí)例都可以通用的。

（3）第三種模式是原型模式，因?yàn)槊恳粋€(gè)函數(shù)都有一個(gè) prototype 屬性，這個(gè)屬性是一個(gè)對(duì)象，它包含了通過(guò)構(gòu)造函數(shù)創(chuàng)建的所有實(shí)例都能共享的屬性和方法。因此我們可以使用原型對(duì)象來(lái)添加公用屬性和方法，從而實(shí)現(xiàn)代碼的復(fù)用。這種方式相對(duì)于構(gòu)造函數(shù)模式來(lái)說(shuō)，解決了函數(shù)對(duì)象的復(fù)用問(wèn)題。但是這種模式也存在一些問(wèn)題，一個(gè)是沒(méi)有辦法通過(guò)傳入?yún)?shù)來(lái)初始化值，另一個(gè)是如果存在一個(gè)引用類(lèi)型如 Array 這樣的值，那么所有的實(shí)例將共享一個(gè)對(duì)象，一個(gè)實(shí)例對(duì)引用類(lèi)型值的改變會(huì)影響所有的實(shí)例。

（4）第四種模式是組合使用構(gòu)造函數(shù)模式和原型模式，這是創(chuàng)建自定義類(lèi)型的最常見(jiàn)方式。因?yàn)闃?gòu)造函數(shù)模式和原型模式分開(kāi)使用都存在一些問(wèn)題，因此我們可以組合使用這兩種模式，通過(guò)構(gòu)造函數(shù)來(lái)初始化對(duì)象的屬性，通過(guò)原型對(duì)象來(lái)實(shí)現(xiàn)函數(shù)方法的復(fù)用。這種方法很好的解決了兩種模式單獨(dú)使用時(shí)的缺點(diǎn)，但是有一點(diǎn)不足的就是，因?yàn)槭褂昧藘煞N不同的模式，所以對(duì)于代碼的封裝性不夠好。

（5）第五種模式是動(dòng)態(tài)原型模式，這一種模式將原型方法賦值的創(chuàng)建過(guò)程移動(dòng)到了構(gòu)造函數(shù)的內(nèi)部，通過(guò)對(duì)屬性是否存在的判斷，可以實(shí)現(xiàn)僅在第一次調(diào)用函數(shù)時(shí)對(duì)原型對(duì)象賦值一次的效果。這一種方式很好地對(duì)上面的混合模式進(jìn)行了封裝。

（6）第六種模式是寄生構(gòu)造函數(shù)模式，這一種模式和工廠(chǎng)模式的實(shí)現(xiàn)基本相同，我對(duì)這個(gè)模式的理解是，它主要是基于一個(gè)已有的類(lèi)型，在實(shí)例化時(shí)對(duì)實(shí)例化的對(duì)象進(jìn)行擴(kuò)展。這樣既不用修改原來(lái)的構(gòu)造函數(shù)，也達(dá)到了擴(kuò)展對(duì)象的目的。它的一個(gè)缺點(diǎn)和工廠(chǎng)模式一樣，無(wú)法實(shí)現(xiàn)對(duì)象的識(shí)別。

嗯我目前了解到的就是這么幾種方式。

詳細(xì)資料可以參考：《JavaScript 深入理解之對(duì)象創(chuàng)建》

35. JavaScript 繼承的幾種實(shí)現(xiàn)方式？

我了解的 js 中實(shí)現(xiàn)繼承的幾種方式有：

（1）第一種是以原型鏈的方式來(lái)實(shí)現(xiàn)繼承，但是這種實(shí)現(xiàn)方式存在的缺點(diǎn)是，在包含有引用類(lèi)型的數(shù)據(jù)時(shí)，會(huì)被所有的實(shí)例對(duì)象所共享，容易造成修改的混亂。還有就是在創(chuàng)建子類(lèi)型的時(shí)候不能向超類(lèi)型傳遞參數(shù)。

（2）第二種方式是使用借用構(gòu)造函數(shù)的方式，這種方式是通過(guò)在子類(lèi)型的函數(shù)中調(diào)用超類(lèi)型的構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)的，這一種方法解決了不能向超類(lèi)型傳遞參數(shù)的缺點(diǎn)，但是它存在的一個(gè)問(wèn)題就是無(wú)法實(shí)現(xiàn)函數(shù)方法的復(fù)用，并且超類(lèi)型原型定義的方法子類(lèi)型也沒(méi)有辦法訪(fǎng)問(wèn)到。

（3）第三種方式是組合繼承，組合繼承是將原型鏈和借用構(gòu)造函數(shù)組合起來(lái)使用的一種方式。通過(guò)借用構(gòu)造函數(shù)的方式來(lái)實(shí)現(xiàn)類(lèi)型的屬性的繼承，通過(guò)將子類(lèi)型的原型設(shè)置為超類(lèi)型的實(shí)例來(lái)實(shí)現(xiàn)方法的繼承。這種方式解決了上面的兩種模式單獨(dú)使用時(shí)的問(wèn)題，但是由于我們是以超類(lèi)型的實(shí)例來(lái)作為子類(lèi)型的原型，所以調(diào)用了兩次超類(lèi)的構(gòu)造函數(shù)，造成了子類(lèi)型的原型中多了很多不必要的屬性。

（4）第四種方式是原型式繼承，原型式繼承的主要思路就是基于已有的對(duì)象來(lái)創(chuàng)建新的對(duì)象，實(shí)現(xiàn)的原理是，向函數(shù)中傳入一個(gè)對(duì)象，然后返回一個(gè)以這個(gè)對(duì)象為原型的對(duì)象。這種繼承的思路主要不是為了實(shí)現(xiàn)創(chuàng)造一種新的類(lèi)型，只是對(duì)某個(gè)對(duì)象實(shí)現(xiàn)一種簡(jiǎn)單繼承，ES5 中定義的 Object.create() 方法就是原型式繼承的實(shí)現(xiàn)。缺點(diǎn)與原型鏈方式相同。

（5）第五種方式是寄生式繼承，寄生式繼承的思路是創(chuàng)建一個(gè)用于封裝繼承過(guò)程的函數(shù)，通過(guò)傳入一個(gè)對(duì)象，然后復(fù)制一個(gè)對(duì)象的副本，然后對(duì)象進(jìn)行擴(kuò)展，最后返回這個(gè)對(duì)象。這個(gè)擴(kuò)展的過(guò)程就可以理解是一種繼承。這種繼承的優(yōu)點(diǎn)就是對(duì)一個(gè)簡(jiǎn)單對(duì)象實(shí)現(xiàn)繼承，如果這個(gè)對(duì)象不是我們的自定義類(lèi)型時(shí)。缺點(diǎn)是沒(méi)有辦法實(shí)現(xiàn)函數(shù)的復(fù)用。

（6）第六種方式是寄生式組合繼承，組合繼承的缺點(diǎn)就是使用超類(lèi)型的實(shí)例做為子類(lèi)型的原型，導(dǎo)致添加了不必要的原型屬性。寄生式組合繼承的方式是使用超類(lèi)型的原型的副本來(lái)作為子類(lèi)型的原型，這樣就避免了創(chuàng)建不必要的屬性。

詳細(xì)資料可以參考：《JavaScript 深入理解之繼承》

36. 寄生式組合繼承的實(shí)現(xiàn)？

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log("My name is " + this.name + ".");
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayMyGrade = function() {
  console.log("My grade is " + this.grade + ".");
};

37. Javascript 的作用域鏈？

作用域鏈的作用是保證對(duì)執(zhí)行環(huán)境有權(quán)訪(fǎng)問(wèn)的所有變量和函數(shù)的有序訪(fǎng)問(wèn)，通過(guò)作用域鏈，我們可以訪(fǎng)問(wèn)到外層環(huán)境的變量和
函數(shù)。

作用域鏈的本質(zhì)上是一個(gè)指向變量對(duì)象的指針列表。變量對(duì)象是一個(gè)包含了執(zhí)行環(huán)境中所有變量和函數(shù)的對(duì)象。作用域鏈的前
端始終都是當(dāng)前執(zhí)行上下文的變量對(duì)象。全局執(zhí)行上下文的變量對(duì)象（也就是全局對(duì)象）始終是作用域鏈的最后一個(gè)對(duì)象。

當(dāng)我們查找一個(gè)變量時(shí)，如果當(dāng)前執(zhí)行環(huán)境中沒(méi)有找到，我們可以沿著作用域鏈向后查找。

作用域鏈的創(chuàng)建過(guò)程跟執(zhí)行上下文的建立有關(guān)....

詳細(xì)資料可以參考：《JavaScript 深入理解之作用域鏈》

38. 談?wù)?This 對(duì)象的理解。

this 是執(zhí)行上下文中的一個(gè)屬性，它指向最后一次調(diào)用這個(gè)方法的對(duì)象。在實(shí)際開(kāi)發(fā)中，this 的指向可以通過(guò)四種調(diào)用模
式來(lái)判斷。

• 1.第一種是函數(shù)調(diào)用模式，當(dāng)一個(gè)函數(shù)不是一個(gè)對(duì)象的屬性時(shí)，直接作為函數(shù)來(lái)調(diào)用時(shí)，this 指向全局對(duì)象。

• 2.第二種是方法調(diào)用模式，如果一個(gè)函數(shù)作為一個(gè)對(duì)象的方法來(lái)調(diào)用時(shí)，this 指向這個(gè)對(duì)象。

• 3.第三種是構(gòu)造器調(diào)用模式，如果一個(gè)函數(shù)用 new 調(diào)用時(shí)，函數(shù)執(zhí)行前會(huì)新創(chuàng)建一個(gè)對(duì)象，this 指向這個(gè)新創(chuàng)建的對(duì)象。

• 4.第四種是 apply 、 call 和 bind 調(diào)用模式，這三個(gè)方法都可以顯示的指定調(diào)用函數(shù)的 this 指向。其中 apply 方法接收兩個(gè)參數(shù)：一個(gè)是 this 綁定的對(duì)象，一個(gè)是參數(shù)數(shù)組。call 方法接收的參數(shù)，第一個(gè)是 this 綁定的對(duì)象，后面的其余參數(shù)是傳入函數(shù)執(zhí)行的參數(shù)。也就是說(shuō)，在使用 call() 方法時(shí)，傳遞給函數(shù)的參數(shù)必須逐個(gè)列舉出來(lái)。bind 方法通過(guò)傳入一個(gè)對(duì)象，返回一個(gè) this 綁定了傳入對(duì)象的新函數(shù)。這個(gè)函數(shù)的 this 指向除了使用 new 時(shí)會(huì)被改變，其他情況下都不會(huì)改變。

這四種方式，使用構(gòu)造器調(diào)用模式的優(yōu)先級(jí)最高，然后是 apply 、 call 和 bind 調(diào)用模式，然后是方法調(diào)用模式，然后
是函數(shù)調(diào)用模式。

《JavaScript 深入理解之 this 詳解》

39. eval 是做什么的？

它的功能是把對(duì)應(yīng)的字符串解析成 JS 代碼并運(yùn)行。

應(yīng)該避免使用 eval，不安全，非常耗性能（2次，一次解析成 js 語(yǔ)句，一次執(zhí)行）。

詳細(xì)資料可以參考：《eval()》

40. 什么是 DOM 和 BOM？

DOM 指的是文檔對(duì)象模型，它指的是把文檔當(dāng)做一個(gè)對(duì)象來(lái)對(duì)待，這個(gè)對(duì)象主要定義了處理網(wǎng)頁(yè)內(nèi)容的方法和接口。

BOM 指的是瀏覽器對(duì)象模型，它指的是把瀏覽器當(dāng)做一個(gè)對(duì)象來(lái)對(duì)待，這個(gè)對(duì)象主要定義了與瀏覽器進(jìn)行交互的法和接口。BOM
的核心是 window，而 window 對(duì)象具有雙重角色，它既是通過(guò) js 訪(fǎng)問(wèn)瀏覽器窗口的一個(gè)接口，又是一個(gè) Global（全局）
對(duì)象。這意味著在網(wǎng)頁(yè)中定義的任何對(duì)象，變量和函數(shù)，都作為全局對(duì)象的一個(gè)屬性或者方法存在。window 對(duì)象含有 locati
on 對(duì)象、navigator 對(duì)象、screen 對(duì)象等子對(duì)象，并且 DOM 的最根本的對(duì)象 document 對(duì)象也是 BOM 的 window 對(duì)
象的子對(duì)象。

詳細(xì)資料可以參考：《DOM, DOCUMENT, BOM, WINDOW 有什么區(qū)別?》《Window 對(duì)象》《DOM 與 BOM 分別是什么，有何關(guān)聯(lián)？》《JavaScript 學(xué)習(xí)總結(jié)（三）BOM 和 DOM 詳解》

41. 寫(xiě)一個(gè)通用的事件偵聽(tīng)器函數(shù)。

const EventUtils = {
  // 視能力分別使用dom0||dom2||IE方式 來(lái)綁定事件
  // 添加事件
  addEvent: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },

  // 移除事件
  removeEvent: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },

  // 獲取事件目標(biāo)
  getTarget: function(event) {
    return event.target || event.srcElement;
  },

  // 獲取 event 對(duì)象的引用，取到事件的所有信息，確保隨時(shí)能使用 event
  getEvent: function(event) {
    return event || window.event;
  },

  // 阻止事件（主要是事件冒泡，因?yàn)?nbsp;IE 不支持事件捕獲）
  stopPropagation: function(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },

  // 取消事件的默認(rèn)行為
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
};

詳細(xì)資料可以參考：《JS 事件模型》

42. 事件是什么？IE 與火狐的事件機(jī)制有什么區(qū)別？如何阻止冒泡？

• 1.事件是用戶(hù)操作網(wǎng)頁(yè)時(shí)發(fā)生的交互動(dòng)作，比如 click/move， 事件除了用戶(hù)觸發(fā)的動(dòng)作外，還可以是文檔加載，窗口滾動(dòng)和大小調(diào)整。事件被封裝成一個(gè) event 對(duì)象，包含了該事件發(fā)生時(shí)的所有相關(guān)信息（ event 的屬性）以及可以對(duì)事件進(jìn)行的操作（ event 的方法）。

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

• 3.event.stopPropagation() 或者 ie 下的方法 event.cancelBubble = true;

詳細(xì)資料可以參考：《Javascript 事件模型系列（一）事件及事件的三種模型》《Javascript 事件模型：事件捕獲和事件冒泡》

43. 三種事件模型是什么？

事件是用戶(hù)操作網(wǎng)頁(yè)時(shí)發(fā)生的交互動(dòng)作或者網(wǎng)頁(yè)本身的一些操作，現(xiàn)代瀏覽器一共有三種事件模型。

第一種事件模型是最早的 DOM0 級(jí)模型，這種模型不會(huì)傳播，所以沒(méi)有事件流的概念，但是現(xiàn)在有的瀏覽器支持以冒泡的方式實(shí)
現(xiàn)，它可以在網(wǎng)頁(yè)中直接定義監(jiān)聽(tīng)函數(shù)，也可以通過(guò) js 屬性來(lái)指定監(jiān)聽(tīng)函數(shù)。這種方式是所有瀏覽器都兼容的。

第二種事件模型是 IE 事件模型，在該事件模型中，一次事件共有兩個(gè)過(guò)程，事件處理階段，和事件冒泡階段。事件處理階段會(huì)首先執(zhí)行目標(biāo)元素綁定的監(jiān)聽(tīng)事件。然后是事件冒泡階段，冒泡指的是事件從目標(biāo)元素冒泡到 document，依次檢查經(jīng)過(guò)的節(jié)點(diǎn)是否綁定了事件監(jiān)聽(tīng)函數(shù)，如果有則執(zhí)行。這種模型通過(guò) attachEvent 來(lái)添加監(jiān)聽(tīng)函數(shù)，可以添加多個(gè)監(jiān)聽(tīng)函數(shù)，會(huì)按順序依次執(zhí)行。

第三種是 DOM2 級(jí)事件模型，在該事件模型中，一次事件共有三個(gè)過(guò)程，第一個(gè)過(guò)程是事件捕獲階段。捕獲指的是事件從 document 一直向下傳播到目標(biāo)元素，依次檢查經(jīng)過(guò)的節(jié)點(diǎn)是否綁定了事件監(jiān)聽(tīng)函數(shù)，如果有則執(zhí)行。后面兩個(gè)階段和 IE 事件模型的兩個(gè)階段相同。這種事件模型，事件綁定的函數(shù)是 addEventListener，其中第三個(gè)參數(shù)可以指定事件是否在捕獲階段執(zhí)行。

詳細(xì)資料可以參考：《一個(gè) DOM 元素綁定多個(gè)事件時(shí)，先執(zhí)行冒泡還是捕獲》

44. 事件委托是什么？

事件委托本質(zhì)上是利用了瀏覽器事件冒泡的機(jī)制。因?yàn)槭录诿芭葸^(guò)程中會(huì)上傳到父節(jié)點(diǎn)，并且父節(jié)點(diǎn)可以通過(guò)事件對(duì)象獲取到
目標(biāo)節(jié)點(diǎn)，因此可以把子節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)定義在父節(jié)點(diǎn)上，由父節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)統(tǒng)一處理多個(gè)子元素的事件，這種方式稱(chēng)為事件代理。

使用事件代理我們可以不必要為每一個(gè)子元素都綁定一個(gè)監(jiān)聽(tīng)事件，這樣減少了內(nèi)存上的消耗。并且使用事件代理我們還可以實(shí)現(xiàn)事件的動(dòng)態(tài)綁定，比如說(shuō)新增了一個(gè)子節(jié)點(diǎn)，我們并不需要單獨(dú)地為它添加一個(gè)監(jiān)聽(tīng)事件，它所發(fā)生的事件會(huì)交給父元素中的監(jiān)聽(tīng)函數(shù)來(lái)處理。

詳細(xì)資料可以參考：《JavaScript 事件委托詳解》

45. ["1", "2", "3"].map(parseInt) 答案是多少？

parseInt() 函數(shù)能解析一個(gè)字符串，并返回一個(gè)整數(shù)，需要兩個(gè)參數(shù) (val, radix)，其中 radix 表示要解析的數(shù)字的基數(shù)。（該值介于 2 ~ 36 之間，并且字符串中的數(shù)字不能大于 radix 才能正確返回?cái)?shù)字結(jié)果值）。


此處 map 傳了 3 個(gè)參數(shù) (element, index, array)，默認(rèn)第三個(gè)參數(shù)被忽略掉，因此三次傳入的參數(shù)分別為 "1-0", "2-1", "3-2"

因?yàn)樽址闹挡荒艽笥诨鶖?shù)，因此后面兩次調(diào)用均失敗，返回 NaN ，第一次基數(shù)為 0 ，按十進(jìn)制解析返回 1。

詳細(xì)資料可以參考：《為什么 ["1", "2", "3"].map(parseInt) 返回 [1,NaN,NaN]？》

46. 什么是閉包，為什么要用它？

閉包是指有權(quán)訪(fǎng)問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見(jiàn)的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，創(chuàng)建的函數(shù)可以
訪(fǎng)問(wèn)到當(dāng)前函數(shù)的局部變量。

閉包有兩個(gè)常用的用途。

閉包的第一個(gè)用途是使我們?cè)诤瘮?shù)外部能夠訪(fǎng)問(wèn)到函數(shù)內(nèi)部的變量。通過(guò)使用閉包，我們可以通過(guò)在外部調(diào)用閉包函數(shù)，從而在外
部訪(fǎng)問(wèn)到函數(shù)內(nèi)部的變量，可以使用這種方法來(lái)創(chuàng)建私有變量。

函數(shù)的另一個(gè)用途是使已經(jīng)運(yùn)行結(jié)束的函數(shù)上下文中的變量對(duì)象繼續(xù)留在內(nèi)存中，因?yàn)殚]包函數(shù)保留了這個(gè)變量對(duì)象的引用，所以
這個(gè)變量對(duì)象不會(huì)被回收。

其實(shí)閉包的本質(zhì)就是作用域鏈的一個(gè)特殊的應(yīng)用，只要了解了作用域鏈的創(chuàng)建過(guò)程，就能夠理解閉包的實(shí)現(xiàn)原理。

詳細(xì)資料可以參考：《JavaScript 深入理解之閉包》

47. javascript 代碼中的 "use strict"; 是什么意思 ? 使用它區(qū)別是什么？

相關(guān)知識(shí)點(diǎn)：

use strict 是一種 ECMAscript5 添加的（嚴(yán)格）運(yùn)行模式，這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行。

設(shè)立"嚴(yán)格模式"的目的，主要有以下幾個(gè)：

• 消除 Javascript 語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
• 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
• 提高編譯器效率，增加運(yùn)行速度；
• 為未來(lái)新版本的 Javascript 做好鋪墊。

區(qū)別：

• 1.禁止使用 with 語(yǔ)句。
• 2.禁止 this 關(guān)鍵字指向全局對(duì)象。
• 3.對(duì)象不能有重名的屬性。

回答：

use strict 指的是嚴(yán)格運(yùn)行模式，在這種模式對(duì) js 的使用添加了一些限制。比如說(shuō)禁止 this 指向全局對(duì)象，還有禁止使
用 with 語(yǔ)句等。設(shè)立嚴(yán)格模式的目的，主要是為了消除代碼使用中的一些不安全的使用方式，也是為了消除 js 語(yǔ)法本身的一
些不合理的地方，以此來(lái)減少一些運(yùn)行時(shí)的怪異的行為。同時(shí)使用嚴(yán)格運(yùn)行模式也能夠提高編譯的效率，從而提高代碼的運(yùn)行速度。
我認(rèn)為嚴(yán)格模式代表了 js 一種更合理、更安全、更嚴(yán)謹(jǐn)?shù)陌l(fā)展方向。

詳細(xì)資料可以參考：《Javascript 嚴(yán)格模式詳解》

48. 如何判斷一個(gè)對(duì)象是否屬于某個(gè)類(lèi)？

第一種方式是使用 instanceof 運(yùn)算符來(lái)判斷構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置。

第二種方式可以通過(guò)對(duì)象的 constructor 屬性來(lái)判斷，對(duì)象的 constructor 屬性指向該對(duì)象的構(gòu)造函數(shù)，但是這種方式不是很安全，因?yàn)?constructor 屬性可以被改寫(xiě)。

第三種方式，如果需要判斷的是某個(gè)內(nèi)置的引用類(lèi)型的話(huà)，可以使用 Object.prototype.toString() 方法來(lái)打印對(duì)象的
[[Class]] 屬性來(lái)進(jìn)行判斷。

詳細(xì)資料可以參考：《js 判斷一個(gè)對(duì)象是否屬于某一類(lèi)》

49. instanceof 的作用？

// instanceof 運(yùn)算符用于判斷構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置。
// 實(shí)現(xiàn)：

function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left), // 獲取對(duì)象的原型
    prototype = right.prototype; // 獲取構(gòu)造函數(shù)的 prototype 對(duì)象

  // 判斷構(gòu)造函數(shù)的 prototype 對(duì)象是否在對(duì)象的原型鏈上
  while (true) {
    if (!proto) return false;
    if (proto === prototype) return true;

    proto = Object.getPrototypeOf(proto);
  }
}

詳細(xì)資料可以參考：《instanceof》

50. new 操作符具體干了什么呢？如何實(shí)現(xiàn)？

// （1）首先創(chuàng)建了一個(gè)新的空對(duì)象
// （2）設(shè)置原型，將對(duì)象的原型設(shè)置為函數(shù)的 prototype 對(duì)象。
// （3）讓函數(shù)的 this 指向這個(gè)對(duì)象，執(zhí)行構(gòu)造函數(shù)的代碼（為這個(gè)新對(duì)象添加屬性）
// （4）判斷函數(shù)的返回值類(lèi)型，如果是值類(lèi)型，返回創(chuàng)建的對(duì)象。如果是引用類(lèi)型，就返回這個(gè)引用類(lèi)型的對(duì)象。

// 實(shí)現(xiàn):

function objectFactory() {
  let newObject = null,
    constructor = Array.prototype.shift.call(arguments),
    result = null;

  // 參數(shù)判斷
  if (typeof constructor !== "function") {
    console.error("type error");
    return;
  }

  // 新建一個(gè)空對(duì)象，對(duì)象的原型為構(gòu)造函數(shù)的 prototype 對(duì)象
  newObject = Object.create(constructor.prototype);

  // 將 this 指向新建對(duì)象，并執(zhí)行函數(shù)
  result = constructor.apply(newObject, arguments);

  // 判斷返回對(duì)象
  let flag =
    result && (typeof result === "object" || typeof result === "function");

  // 判斷返回結(jié)果
  return flag ? result : newObject;
}

// 使用方法
// objectFactory(構(gòu)造函數(shù), 初始化參數(shù));

詳細(xì)資料可以參考：《new 操作符具體干了什么？》《JavaScript 深入之 new 的模擬實(shí)現(xiàn)》

51. Javascript 中，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是？

hasOwnProperty

所有繼承了 Object 的對(duì)象都會(huì)繼承到 hasOwnProperty 方法。這個(gè)方法可以用來(lái)檢測(cè)一個(gè)對(duì)象是否含有特定的自身屬性，和
in 運(yùn)算符不同，該方法會(huì)忽略掉那些從原型鏈上繼承到的屬性。

詳細(xì)資料可以參考：《Object.prototype.hasOwnProperty()》

52. 對(duì)于 JSON 的了解？

相關(guān)知識(shí)點(diǎn)：

JSON 是一種數(shù)據(jù)交換格式，基于文本，優(yōu)于輕量，用于交換數(shù)據(jù)。

JSON 可以表示數(shù)字、布爾值、字符串、null、數(shù)組（值的有序序列），以及由這些值（或數(shù)組、對(duì)象）所組成的對(duì)象（字符串與
值的映射）。

JSON 使用 JavaScript 語(yǔ)法，但是 JSON 格式僅僅是一個(gè)文本。文本可以被任何編程語(yǔ)言讀取及作為數(shù)據(jù)格式傳遞。

回答：

JSON 是一種基于文本的輕量級(jí)的數(shù)據(jù)交換格式。它可以被任何的編程語(yǔ)言讀取和作為數(shù)據(jù)格式來(lái)傳遞。

在項(xiàng)目開(kāi)發(fā)中，我們使用 JSON 作為前后端數(shù)據(jù)交換的方式。在前端我們通過(guò)將一個(gè)符合 JSON 格式的數(shù)據(jù)結(jié)構(gòu)序列化為 JSON 字符串，然后將它傳遞到后端，后端通過(guò) JSON 格式的字符串解析后生成對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，以此來(lái)實(shí)現(xiàn)前后端數(shù)據(jù)的一個(gè)傳遞。

因?yàn)?JSON 的語(yǔ)法是基于 js 的，因此很容易將 JSON 和 js 中的對(duì)象弄混，但是我們應(yīng)該注意的是 JSON 和 js 中的對(duì)象不是一回事，JSON 中對(duì)象格式更加嚴(yán)格，比如說(shuō)在 JSON 中屬性值不能為函數(shù)，不能出現(xiàn) NaN 這樣的屬性值等，因此大多數(shù)的 js 對(duì)象是不符合 JSON 對(duì)象的格式的。

在 js 中提供了兩個(gè)函數(shù)來(lái)實(shí)現(xiàn) js 數(shù)據(jù)結(jié)構(gòu)和 JSON 格式的轉(zhuǎn)換處理，一個(gè)是 JSON.stringify 函數(shù)，通過(guò)傳入一個(gè)符合 JSON 格式的數(shù)據(jù)結(jié)構(gòu)，將其轉(zhuǎn)換為一個(gè) JSON 字符串。如果傳入的數(shù)據(jù)結(jié)構(gòu)不符合 JSON 格式，那么在序列化的時(shí)候會(huì)對(duì)這些值進(jìn)行對(duì)應(yīng)的特殊處理，使其符合規(guī)范。在前端向后端發(fā)送數(shù)據(jù)時(shí)，我們可以調(diào)用這個(gè)函數(shù)將數(shù)據(jù)對(duì)象轉(zhuǎn)化為 JSON 格式的字符串。

另一個(gè)函數(shù) JSON.parse() 函數(shù)，這個(gè)函數(shù)用來(lái)將 JSON 格式的字符串轉(zhuǎn)換為一個(gè) js 數(shù)據(jù)結(jié)構(gòu)，如果傳入的字符串不是標(biāo)準(zhǔn)的 JSON 格式的字符串的話(huà)，將會(huì)拋出錯(cuò)誤。當(dāng)我們從后端接收到 JSON 格式的字符串時(shí)，我們可以通過(guò)這個(gè)方法來(lái)將其解析為一個(gè) js 數(shù)據(jù)結(jié)構(gòu)，以此來(lái)進(jìn)行數(shù)據(jù)的訪(fǎng)問(wèn)。

詳細(xì)資料可以參考：《深入了解 JavaScript 中的 JSON 》

53. [].forEach.call($$(""),function(a){a.style.outline="1px solid #"+(~~(Math.random()(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？

（1）選取頁(yè)面所有 DOM 元素。在瀏覽器的控制臺(tái)中可以使用$$()方法來(lái)獲取頁(yè)面中相應(yīng)的元素，這是現(xiàn)代瀏覽器提供的一個(gè)命令行 API 相當(dāng)于 document.querySelectorAll 方法。

（2）循環(huán)遍歷 DOM 元素

（3）給元素添加 outline 。由于渲染的 outline 是不在 CSS 盒模型中的，所以為元素添加 outline 并不會(huì)影響元素的大小和頁(yè)面的布局。

（4）生成隨機(jī)顏色函數(shù)。Math.random()*(1<<24) 可以得到 0~2^24 - 1 之間的隨機(jī)數(shù)，因?yàn)榈玫降氖且粋€(gè)浮點(diǎn)數(shù)，但我們只需要整數(shù)部分，使用取反操作符 ~ 連續(xù)兩次取反獲得整數(shù)部分，然后再用 toString(16) 的方式，轉(zhuǎn)換為一個(gè)十六進(jìn)制的字符串。

詳細(xì)資料可以參考：《通過(guò)一行代碼學(xué) JavaScript》

54. js 延遲加載的方式有哪些？

相關(guān)知識(shí)點(diǎn)：

js 延遲加載，也就是等頁(yè)面加載完成之后再加載 JavaScript 文件。js 延遲加載有助于提高頁(yè)面加載速度。

一般有以下幾種方式：

• defer 屬性
• async 屬性
• 動(dòng)態(tài)創(chuàng)建 DOM 方式
• 使用 setTimeout 延遲方法
• 讓 JS 最后加載

回答：

js 的加載、解析和執(zhí)行會(huì)阻塞頁(yè)面的渲染過(guò)程，因此我們希望 js 腳本能夠盡可能的延遲加載，提高頁(yè)面的渲染速度。

我了解到的幾種方式是：

第一種方式是我們一般采用的是將 js 腳本放在文檔的底部，來(lái)使 js 腳本盡可能的在最后來(lái)加載執(zhí)行。

第二種方式是給 js 腳本添加 defer 屬性，這個(gè)屬性會(huì)讓腳本的加載與文檔的解析同步解析，然后在文檔解析完成后再執(zhí)行這個(gè)腳本文件，這樣的話(huà)就能使頁(yè)面的渲染不被阻塞。多個(gè)設(shè)置了 defer 屬性的腳本按規(guī)范來(lái)說(shuō)最后是順序執(zhí)行的，但是在一些瀏覽器中可能不是這樣。

第三種方式是給 js 腳本添加 async 屬性，這個(gè)屬性會(huì)使腳本異步加載，不會(huì)阻塞頁(yè)面的解析過(guò)程，但是當(dāng)腳本加載完成后立即執(zhí)行 js 腳本，這個(gè)時(shí)候如果文檔沒(méi)有解析完成的話(huà)同樣會(huì)阻塞。多個(gè) async 屬性的腳本的執(zhí)行順序是不可預(yù)測(cè)的，一般不會(huì)按照代碼的順序依次執(zhí)行。

第四種方式是動(dòng)態(tài)創(chuàng)建 DOM 標(biāo)簽的方式，我們可以對(duì)文檔的加載事件進(jìn)行監(jiān)聽(tīng)，當(dāng)文檔加載完成后再動(dòng)態(tài)的創(chuàng)建 script 標(biāo)簽來(lái)引入 js 腳本。

詳細(xì)資料可以參考：《JS 延遲加載的幾種方式》《HTML 5 <script> async 屬性》

55. Ajax 是什么? 如何創(chuàng)建一個(gè) Ajax？

相關(guān)知識(shí)點(diǎn)：

2005 年 2 月，AJAX 這個(gè)詞第一次正式提出，它是 Asynchronous JavaScript and XML 的縮寫(xiě)，指的是通過(guò) JavaScript 的 異步通信，從服務(wù)器獲取 XML 文檔從中提取數(shù)據(jù)，再更新當(dāng)前網(wǎng)頁(yè)的對(duì)應(yīng)部分，而不用刷新整個(gè)網(wǎng)頁(yè)。

具體來(lái)說(shuō)，AJAX 包括以下幾個(gè)步驟。

• 1.創(chuàng)建 XMLHttpRequest 對(duì)象，也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
• 2.創(chuàng)建一個(gè)新的 HTTP 請(qǐng)求，并指定該 HTTP 請(qǐng)求的方法、URL 及驗(yàn)證信息
• 3.設(shè)置響應(yīng) HTTP 請(qǐng)求狀態(tài)變化的函數(shù)
• 4.發(fā)送 HTTP 請(qǐng)求
• 5.獲取異步調(diào)用返回的數(shù)據(jù)
• 6.使用 JavaScript 和 DOM 實(shí)現(xiàn)局部刷新

一般實(shí)現(xiàn)：

const SERVER_URL = "/server";

let xhr = new XMLHttpRequest();

// 創(chuàng)建 Http 請(qǐng)求
xhr.open("GET", SERVER_URL, true);

// 設(shè)置狀態(tài)監(jiān)聽(tīng)函數(shù)
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;

  // 當(dāng)請(qǐng)求成功時(shí)
  if (this.status === 200) {
    handle(this.response);
  } else {
    console.error(this.statusText);
  }
};

// 設(shè)置請(qǐng)求失敗時(shí)的監(jiān)聽(tīng)函數(shù)
xhr.onerror = function() {
  console.error(this.statusText);
};

// 設(shè)置請(qǐng)求頭信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");

// 發(fā)送 Http 請(qǐng)求
xhr.send(null);

// promise 封裝實(shí)現(xiàn)：

function getJSON(url) {
  // 創(chuàng)建一個(gè) promise 對(duì)象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();

    // 新建一個(gè) http 請(qǐng)求
    xhr.open("GET", url, true);

    // 設(shè)置狀態(tài)的監(jiān)聽(tīng)函數(shù)
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;

      // 當(dāng)請(qǐng)求成功或失敗時(shí)，改變 promise 的狀態(tài)
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };

    // 設(shè)置錯(cuò)誤監(jiān)聽(tīng)函數(shù)
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };

    // 設(shè)置響應(yīng)的數(shù)據(jù)類(lèi)型
    xhr.responseType = "json";

    // 設(shè)置請(qǐng)求頭信息
    xhr.setRequestHeader("Accept", "application/json");

    // 發(fā)送 http 請(qǐng)求
    xhr.send(null);
  });

  return promise;
}

回答：

我對(duì) ajax 的理解是，它是一種異步通信的方法，通過(guò)直接由 js 腳本向服務(wù)器發(fā)起 http 通信，然后根據(jù)服務(wù)器返回的數(shù)據(jù)，更新網(wǎng)頁(yè)的相應(yīng)部分，而不用刷新整個(gè)頁(yè)面的一種方法。

創(chuàng)建一個(gè) ajax 有這樣幾個(gè)步驟

首先是創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象。

然后在這個(gè)對(duì)象上使用 open 方法創(chuàng)建一個(gè) http 請(qǐng)求，open 方法所需要的參數(shù)是請(qǐng)求的方法、請(qǐng)求的地址、是否異步和用戶(hù)的認(rèn)證信息。

在發(fā)起請(qǐng)求前，我們可以為這個(gè)對(duì)象添加一些信息和監(jiān)聽(tīng)函數(shù)。比如說(shuō)我們可以通過(guò) setRequestHeader 方法來(lái)為請(qǐng)求添加頭信息。我們還可以為這個(gè)對(duì)象添加一個(gè)狀態(tài)監(jiān)聽(tīng)函數(shù)。一個(gè) XMLHttpRequest 對(duì)象一共有 5 個(gè)狀態(tài)，當(dāng)它的狀態(tài)變化時(shí)會(huì)觸發(fā)onreadystatechange 事件，我們可以通過(guò)設(shè)置監(jiān)聽(tīng)函數(shù)，來(lái)處理請(qǐng)求成功后的結(jié)果。當(dāng)對(duì)象的 readyState 變?yōu)?4 的時(shí)候，代表服務(wù)器返回的數(shù)據(jù)接收完成，這個(gè)時(shí)候我們可以通過(guò)判斷請(qǐng)求的狀態(tài)，如果狀態(tài)是 2xx 或者 304 的話(huà)則代表返回正常。這個(gè)時(shí)候我們就可以通過(guò) response 中的數(shù)據(jù)來(lái)對(duì)頁(yè)面進(jìn)行更新了。

當(dāng)對(duì)象的屬性和監(jiān)聽(tīng)函數(shù)設(shè)置完成后，最后我們調(diào)用 sent 方法來(lái)向服務(wù)器發(fā)起請(qǐng)求，可以傳入?yún)?shù)作為發(fā)送的數(shù)據(jù)體。

詳細(xì)資料可以參考：《XMLHttpRequest 對(duì)象》《從 ajax 到 fetch、axios》《Fetch 入門(mén)》《傳統(tǒng) Ajax 已死，F(xiàn)etch 永生》

56. 談一談瀏覽器的緩存機(jī)制？

瀏覽器的緩存機(jī)制指的是通過(guò)在一段時(shí)間內(nèi)保留已接收到的 web 資源的一個(gè)副本，如果在資源的有效時(shí)間內(nèi)，發(fā)起了對(duì)這個(gè)資源的再一次請(qǐng)求，那么瀏覽器會(huì)直接使用緩存的副本，而不是向服務(wù)器發(fā)起請(qǐng)求。使用 web 緩存可以有效地提高頁(yè)面的打開(kāi)速度，減少不必要的網(wǎng)絡(luò)帶寬的消耗。

web 資源的緩存策略一般由服務(wù)器來(lái)指定，可以分為兩種，分別是強(qiáng)緩存策略和協(xié)商緩存策略。

使用強(qiáng)緩存策略時(shí)，如果緩存資源有效，則直接使用緩存資源，不必再向服務(wù)器發(fā)起請(qǐng)求。強(qiáng)緩存策略可以通過(guò)兩種方式來(lái)設(shè)置，分別是 http 頭信息中的 Expires 屬性和 Cache-Control 屬性。

服務(wù)器通過(guò)在響應(yīng)頭中添加 Expires 屬性，來(lái)指定資源的過(guò)期時(shí)間。在過(guò)期時(shí)間以?xún)?nèi)，該資源可以被緩存使用，不必再向服務(wù)器發(fā)送請(qǐng)求。這個(gè)時(shí)間是一個(gè)絕對(duì)時(shí)間，它是服務(wù)器的時(shí)間，因此可能存在這樣的問(wèn)題，就是客戶(hù)端的時(shí)間和服務(wù)器端的時(shí)間不一致，或者用戶(hù)可以對(duì)客戶(hù)端時(shí)間進(jìn)行修改的情況，這樣就可能會(huì)影響緩存命中的結(jié)果。

Expires 是 http1.0 中的方式，因?yàn)樗囊恍┤秉c(diǎn)，在 http 1.1 中提出了一個(gè)新的頭部屬性就是 Cache-Control 屬性，
它提供了對(duì)資源的緩存的更精確的控制。它有很多不同的值，常用的比如我們可以通過(guò)設(shè)置 max-age 來(lái)指定資源能夠被緩存的時(shí)間
的大小，這是一個(gè)相對(duì)的時(shí)間，它會(huì)根據(jù)這個(gè)時(shí)間的大小和資源第一次請(qǐng)求時(shí)的時(shí)間來(lái)計(jì)算出資源過(guò)期的時(shí)間，因此相對(duì)于 Expires
來(lái)說(shuō)，這種方式更加有效一些。常用的還有比如 private ，用來(lái)規(guī)定資源只能被客戶(hù)端緩存，不能夠代理服務(wù)器所緩存。還有如 n
o-store ，用來(lái)指定資源不能夠被緩存，no-cache 代表該資源能夠被緩存，但是立即失效，每次都需要向服務(wù)器發(fā)起請(qǐng)求。

一般來(lái)說(shuō)只需要設(shè)置其中一種方式就可以實(shí)現(xiàn)強(qiáng)緩存策略，當(dāng)兩種方式一起使用時(shí)，Cache-Control 的優(yōu)先級(jí)要高于 Expires 。

使用協(xié)商緩存策略時(shí)，會(huì)先向服務(wù)器發(fā)送一個(gè)請(qǐng)求，如果資源沒(méi)有發(fā)生修改，則返回一個(gè) 304 狀態(tài)，讓瀏覽器使用本地的緩存副本。
如果資源發(fā)生了修改，則返回修改后的資源。協(xié)商緩存也可以通過(guò)兩種方式來(lái)設(shè)置，分別是 http 頭信息中的 Etag 和 Last-Modified 屬性。

服務(wù)器通過(guò)在響應(yīng)頭中添加 Last-Modified 屬性來(lái)指出資源最后一次修改的時(shí)間，當(dāng)瀏覽器下一次發(fā)起請(qǐng)求時(shí)，會(huì)在請(qǐng)求頭中添加一個(gè) If-Modified-Since 的屬性，屬性值為上一次資源返回時(shí)的 Last-Modified 的值。當(dāng)請(qǐng)求發(fā)送到服務(wù)器后服務(wù)器會(huì)通過(guò)這個(gè)屬性來(lái)和資源的最后一次的修改時(shí)間來(lái)進(jìn)行比較，以此來(lái)判斷資源是否做了修改。如果資源沒(méi)有修改，那么返回 304 狀態(tài)，讓客戶(hù)端使用本地的緩存。如果資源已經(jīng)被修改了，則返回修改后的資源。使用這種方法有一個(gè)缺點(diǎn)，就是 Last-Modified 標(biāo)注的最后修改時(shí)間只能精確到秒級(jí)，如果某些文件在1秒鐘以?xún)?nèi)，被修改多次的話(huà)，那么文件已將改變了但是 Last-Modified 卻沒(méi)有改變，
這樣會(huì)造成緩存命中的不準(zhǔn)確。

因?yàn)?Last-Modified 的這種可能發(fā)生的不準(zhǔn)確性，http 中提供了另外一種方式，那就是 Etag 屬性。服務(wù)器在返回資源的時(shí)候，在頭信息中添加了 Etag 屬性，這個(gè)屬性是資源生成的唯一標(biāo)識(shí)符，當(dāng)資源發(fā)生改變的時(shí)候，這個(gè)值也會(huì)發(fā)生改變。在下一次資源請(qǐng)求時(shí)，瀏覽器會(huì)在請(qǐng)求頭中添加一個(gè) If-None-Match 屬性，這個(gè)屬性的值就是上次返回的資源的 Etag 的值。服務(wù)接收到請(qǐng)求后會(huì)根據(jù)這個(gè)值來(lái)和資源當(dāng)前的 Etag 的值來(lái)進(jìn)行比較，以此來(lái)判斷資源是否發(fā)生改變，是否需要返回資源。通過(guò)這種方式，比 Last-Modified 的方式更加精確。

當(dāng) Last-Modified 和 Etag 屬性同時(shí)出現(xiàn)的時(shí)候，Etag 的優(yōu)先級(jí)更高。使用協(xié)商緩存的時(shí)候，服務(wù)器需要考慮負(fù)載平衡的問(wèn)題，因此多個(gè)服務(wù)器上資源的 Last-Modified 應(yīng)該保持一致，因?yàn)槊總€(gè)服務(wù)器上 Etag 的值都不一樣，因此在考慮負(fù)載平衡時(shí)，最好不要設(shè)置 Etag 屬性。

強(qiáng)緩存策略和協(xié)商緩存策略在緩存命中時(shí)都會(huì)直接使用本地的緩存副本，區(qū)別只在于協(xié)商緩存會(huì)向服務(wù)器發(fā)送一次請(qǐng)求。它們緩存不命中時(shí)，都會(huì)向服務(wù)器發(fā)送請(qǐng)求來(lái)獲取資源。在實(shí)際的緩存機(jī)制中，強(qiáng)緩存策略和協(xié)商緩存策略是一起合作使用的。瀏覽器首先會(huì)根據(jù)請(qǐng)求的信息判斷，強(qiáng)緩存是否命中，如果命中則直接使用資源。如果不命中則根據(jù)頭信息向服務(wù)器發(fā)起請(qǐng)求，使用協(xié)商緩存，如果協(xié)商緩存命中的話(huà)，則服務(wù)器不返回資源，瀏覽器直接使用本地資源的副本，如果協(xié)商緩存不命中，則瀏覽器返回最新的資源給瀏覽器。

詳細(xì)資料可以參考：《淺談瀏覽器緩存》《前端優(yōu)化：瀏覽器緩存技術(shù)介紹》《請(qǐng)求頭中的 Cache-Control》《Cache-Control 字段值詳解》

57. Ajax 解決瀏覽器緩存問(wèn)題？

• 1.在 ajax 發(fā)送請(qǐng)求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

• 2.在 ajax 發(fā)送請(qǐng)求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

• 3.在 URL 后面加上一個(gè)隨機(jī)數(shù)："fresh=" + Math.random();。

• 4.在 URL 后面加上時(shí)間戳："nowtime=" + new Date().getTime();。

• 5.如果是使用 jQuery，直接這樣就可以了$.ajaxSetup({cache:false})。這樣頁(yè)面的所有 ajax 都會(huì)執(zhí)行這條語(yǔ)句就是不需要保存緩存記錄。

詳細(xì)資料可以參考：《Ajax 中瀏覽器的緩存問(wèn)題解決方法》《淺談瀏覽器緩存》

58. 同步和異步的區(qū)別？

相關(guān)知識(shí)點(diǎn)：

同步，可以理解為在執(zhí)行完一個(gè)函數(shù)或方法之后，一直等待系統(tǒng)返回值或消息，這時(shí)程序是處于阻塞的，只有接收到返回的值或消息后才往下執(zhí)行其他的命令。  

異步，執(zhí)行完函數(shù)或方法后，不必阻塞性地等待返回值或消息，只需要向系統(tǒng)委托一個(gè)異步過(guò)程，那么當(dāng)系統(tǒng)接收到返回值或消息時(shí)，系統(tǒng)會(huì)自動(dòng)觸發(fā)委托的異步過(guò)程，從而完成一個(gè)完整的流程。 

回答：

同步指的是當(dāng)一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候，如果這個(gè)請(qǐng)求需要等待一段時(shí)間才能返回，那么這個(gè)進(jìn)程會(huì)一直等待下去，直到消息返
回為止再繼續(xù)向下執(zhí)行。

異步指的是當(dāng)一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候，如果這個(gè)請(qǐng)求需要等待一段時(shí)間才能返回，這個(gè)時(shí)候進(jìn)程會(huì)繼續(xù)往下執(zhí)行，不會(huì)阻塞等
待消息的返回，當(dāng)消息返回時(shí)系統(tǒng)再通知進(jìn)程進(jìn)行處理。

詳細(xì)資料可以參考：《同步和異步的區(qū)別》

59. 什么是瀏覽器的同源政策？

我對(duì)瀏覽器的同源政策的理解是，一個(gè)域下的 js 腳本在未經(jīng)允許的情況下，不能夠訪(fǎng)問(wèn)另一個(gè)域的內(nèi)容。這里的同源的指的是兩個(gè)
域的協(xié)議、域名、端口號(hào)必須相同，否則則不屬于同一個(gè)域。

同源政策主要限制了三個(gè)方面

第一個(gè)是當(dāng)前域下的 js 腳本不能夠訪(fǎng)問(wèn)其他域下的 cookie、localStorage 和 indexDB。

第二個(gè)是當(dāng)前域下的 js 腳本不能夠操作訪(fǎng)問(wèn)操作其他域下的 DOM。

第三個(gè)是當(dāng)前域下 ajax 無(wú)法發(fā)送跨域請(qǐng)求。

同源政策的目的主要是為了保證用戶(hù)的信息安全，它只是對(duì) js 腳本的一種限制，并不是對(duì)瀏覽器的限制，對(duì)于一般的 img、或者
script 腳本請(qǐng)求都不會(huì)有跨域的限制，這是因?yàn)檫@些操作都不會(huì)通過(guò)響應(yīng)結(jié)果來(lái)進(jìn)行可能出現(xiàn)安全問(wèn)題的操作。

60. 如何解決跨域問(wèn)題？

相關(guān)知識(shí)點(diǎn)：

• 
  
1. 通過(guò) jsonp 跨域
• 
  
2. document.domain + iframe 跨域
• 
  
3. location.hash + iframe
• 
  
4. window.name + iframe 跨域
• 
  
5. postMessage 跨域
• 
  
6. 跨域資源共享（CORS)
• 
  
7. nginx 代理跨域
• 
  
8. nodejs 中間件代理跨域
• 
  
9. WebSocket 協(xié)議跨域

回答：

解決跨域的方法我們可以根據(jù)我們想要實(shí)現(xiàn)的目的來(lái)劃分。

首先我們?nèi)绻皇窍胍獙?shí)現(xiàn)主域名下的不同子域名的跨域操作，我們可以使用設(shè)置 document.domain 來(lái)解決。

（1）將 document.domain 設(shè)置為主域名，來(lái)實(shí)現(xiàn)相同子域名的跨域操作，這個(gè)時(shí)候主域名下的 cookie 就能夠被子域名所訪(fǎng)問(wèn)。同時(shí)如果文檔中含有主域名相同，子域名不同的 iframe 的話(huà)，我們也可以對(duì)這個(gè) iframe 進(jìn)行操作。

如果是想要解決不同跨域窗口間的通信問(wèn)題，比如說(shuō)一個(gè)頁(yè)面想要和頁(yè)面的中的不同源的 iframe 進(jìn)行通信的問(wèn)題，我們可以使用 location.hash 或者 window.name 或者 postMessage 來(lái)解決。

（2）使用 location.hash 的方法，我們可以在主頁(yè)面動(dòng)態(tài)的修改 iframe 窗口的 hash 值，然后在 iframe 窗口里實(shí)現(xiàn)監(jiān)聽(tīng)函數(shù)來(lái)實(shí)現(xiàn)這樣一個(gè)單向的通信。因?yàn)樵?iframe 是沒(méi)有辦法訪(fǎng)問(wèn)到不同源的父級(jí)窗口的，所以我們不能直接修改父級(jí)窗口的 hash 值來(lái)實(shí)現(xiàn)通信，我們可以在 iframe 中再加入一個(gè) iframe ，這個(gè) iframe 的內(nèi)容是和父級(jí)頁(yè)面同源的，所以我們可以 window.parent.parent 來(lái)修改最頂級(jí)頁(yè)面的 src，以此來(lái)實(shí)現(xiàn)雙向通信。

（3）使用 window.name 的方法，主要是基于同一個(gè)窗口中設(shè)置了 window.name 后不同源的頁(yè)面也可以訪(fǎng)問(wèn)，所以不同源的子頁(yè)面可以首先在 window.name 中寫(xiě)入數(shù)據(jù)，然后跳轉(zhuǎn)到一個(gè)和父級(jí)同源的頁(yè)面。這個(gè)時(shí)候級(jí)頁(yè)面就可以訪(fǎng)問(wèn)同源的子頁(yè)面中 window.name 中的數(shù)據(jù)了，這種方式的好處是可以傳輸?shù)臄?shù)據(jù)量大。

（4）使用 postMessage 來(lái)解決的方法，這是一個(gè) h5 中新增的一個(gè) api。通過(guò)它我們可以實(shí)現(xiàn)多窗口間的信息傳遞，通過(guò)獲取到指定窗口的引用，然后調(diào)用 postMessage 來(lái)發(fā)送信息，在窗口中我們通過(guò)對(duì) message 信息的監(jiān)聽(tīng)來(lái)接收信息，以此來(lái)實(shí)現(xiàn)不同源間的信息交換。

如果是像解決 ajax 無(wú)法提交跨域請(qǐng)求的問(wèn)題，我們可以使用 jsonp、cors、websocket 協(xié)議、服務(wù)器代理來(lái)解決問(wèn)題。

（5）使用 jsonp 來(lái)實(shí)現(xiàn)跨域請(qǐng)求，它的主要原理是通過(guò)動(dòng)態(tài)構(gòu)建 script  標(biāo)簽來(lái)實(shí)現(xiàn)跨域請(qǐng)求，因?yàn)闉g覽器對(duì) script 標(biāo)簽的引入沒(méi)有跨域的訪(fǎng)問(wèn)限制 。通過(guò)在請(qǐng)求的 url 后指定一個(gè)回調(diào)函數(shù)，然后服務(wù)器在返回?cái)?shù)據(jù)的時(shí)候，構(gòu)建一個(gè) json 數(shù)據(jù)的包裝，這個(gè)包裝就是回調(diào)函數(shù)，然后返回給前端，前端接收到數(shù)據(jù)后，因?yàn)檎?qǐng)求的是腳本文件，所以會(huì)直接執(zhí)行，這樣我們先前定義好的回調(diào)函數(shù)就可以被調(diào)用，從而實(shí)現(xiàn)了跨域請(qǐng)求的處理。這種方式只能用于 get 請(qǐng)求。

（6）使用 CORS 的方式，CORS 是一個(gè) W3C 標(biāo)準(zhǔn)，全稱(chēng)是"跨域資源共享"。CORS 需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，因此我們只需要在服務(wù)器端配置就行。瀏覽器將 CORS 請(qǐng)求分成兩類(lèi)：簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器直接發(fā)出 CORS 請(qǐng)求。具體來(lái)說(shuō)，就是會(huì)在頭信息之中，增加一個(gè) Origin 字段。Origin 字段用來(lái)說(shuō)明本次請(qǐng)求來(lái)自哪個(gè)源。服務(wù)器根據(jù)這個(gè)值，決定是否同意這次請(qǐng)求。對(duì)于如果 Origin 指定的源，不在許可范圍內(nèi)，服務(wù)器會(huì)返回一個(gè)正常的 HTTP 回應(yīng)。瀏覽器發(fā)現(xiàn)，這個(gè)回應(yīng)的頭信息沒(méi)有包含 Access-Control-Allow-Origin 字段，就知道出錯(cuò)了，從而拋出一個(gè)錯(cuò)誤，ajax 不會(huì)收到響應(yīng)信息。如果成功的話(huà)會(huì)包含一些以 Access-Control- 開(kāi)頭的字段。

非簡(jiǎn)單請(qǐng)求，瀏覽器會(huì)先發(fā)出一次預(yù)檢請(qǐng)求，來(lái)判斷該域名是否在服務(wù)器的白名單中，如果收到肯定回復(fù)后才會(huì)發(fā)起請(qǐng)求。

（7）使用 websocket 協(xié)議，這個(gè)協(xié)議沒(méi)有同源限制。

（8）使用服務(wù)器來(lái)代理跨域的訪(fǎng)問(wèn)請(qǐng)求，就是有跨域的請(qǐng)求操作時(shí)發(fā)送請(qǐng)求給后端，讓后端代為請(qǐng)求，然后最后將獲取的結(jié)果發(fā)返回。

詳細(xì)資料可以參考：《前端常見(jiàn)跨域解決方案（全）》《瀏覽器同源政策及其規(guī)避方法》《跨域，你需要知道的全在這里》《為什么 form 表單提交沒(méi)有跨域問(wèn)題，但 ajax 提交有跨域問(wèn)題？》

PS：因?yàn)閮?nèi)容比較多，故分成了上中下兩篇，今天發(fā)的為上篇內(nèi)容

面試倉(cāng)庫(kù)推薦：

• https://github.com/febobo/web-interview

• https://github.com/CavsZhouyou/Front-End-Interview-Notebook