最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

最近一直在找工作，今年是真的難啊，但再難茍且的生活還要繼續(xù)，飯碗還是要繼續(xù)找的。在最近的面試中我一直在總結(jié)，每次面試回來也都會復(fù)盤，面了有七八家，也有那么幾個offer，但終究不是很滿意，總想再試試大一點的平臺。下面是我這幾天遇到的面試知識點。但今天主題是標(biāo)題所寫的66條JavaScript知識點，由淺入深，整理了一周，每（zhěng）天（lǐ）整（bù）理（ yì）10條（ qiú）左（diǎn）右（zàn）,   希望對正在找工作的小伙伴有點幫助，文中如有表述不對，還請指出。

創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元慶陽做網(wǎng)站,已為上家服務(wù),為慶陽各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

HTML&CSS：

•  瀏覽器內(nèi)核
•  盒模型、flex布局、兩/三欄布局、水平/垂直居中；
•  BFC、清除浮動；
•  css3動畫、H5新特性。

JavaScript：

•  繼承、原型鏈、this指向、設(shè)計模式、call, apply, bind,；
•  new實現(xiàn)、防抖節(jié)流、let, var, const 區(qū)別、暫時性死區(qū)、event、loop；
•  promise使用及實現(xiàn)、promise并行執(zhí)行和順序執(zhí)行；
•  async/await的優(yōu)缺點；
•  閉包、垃圾回收和內(nèi)存泄漏、數(shù)組方法、數(shù)組亂序, 數(shù)組扁平化、事件委托、事件監(jiān)聽、事件模型

Vue:

•  vue數(shù)據(jù)雙向綁定原理；
•  vue computed原理、computed和watch的區(qū)別；
•  vue編譯器結(jié)構(gòu)圖、生命周期、vue組件通信；
•  mvvm模式、mvc模式理解；
•  vue dom diff、vuex、vue-router

網(wǎng)絡(luò)：

•  HTTP1, HTTP2, HTTPS、常見的http狀態(tài)碼；
•  瀏覽從輸入網(wǎng)址到回車發(fā)生了什么；
•  前端安全（CSRF、XSS）
•  前端跨域、瀏覽器緩存、cookie, session, token, localstorage, sessionstorage；
•  TCP連接(三次握手, 四次揮手)

性能相關(guān)

•  圖片優(yōu)化的方式
•  500 張圖片，如何實現(xiàn)預(yù)加載優(yōu)化
•  懶加載具體實現(xiàn)
•  減少http請求的方式

另外更全面的面試題集我也在整理中，先給個預(yù)告圖：

下面進(jìn)入正題：

• 1. 介紹一下 js 的數(shù)據(jù)類型有哪些,值是如何存儲的
• 2. && 、 ||和!! 運算符分別能做什么
• 3. js的數(shù)據(jù)類型的轉(zhuǎn)換
• 4. JS中數(shù)據(jù)類型的判斷（ typeof，instanceof，constructor，Object.prototype.toString.call()
• 5. 介紹 js 有哪些內(nèi)置對象？
• 6. undefined 與 undeclared 的區(qū)別？
• 7. null 和 undefined 的區(qū)別？
• 8. {} 和 [] 的 valueOf 和 toString 的結(jié)果是什么？
• 9. Javascript 的作用域和作用域鏈？
• 10. javascript 創(chuàng)建對象的幾種方式？
• 11. JavaScript 繼承的幾種實現(xiàn)方式？
• 12. 寄生式組合繼承的實現(xiàn)？
• 13. 談?wù)勀銓his、call、apply和bind的理解
• 14. JavaScript 原型，原型鏈？有什么特點？
• 15. js 獲取原型的方法？
• 16. 什么是閉包，為什么要用它？
• 17. 什么是 DOM 和 BOM？
• 18. 三種事件模型是什么？
• 19. 事件委托是什么？
• 20. 什么是事件傳播?
• 21. 什么是事件捕獲？
• 22. 什么是事件冒泡？
• 23. DOM 操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點？
• 24. js數(shù)組和對象有哪些原生方法,列舉一下
• 25. 常用的正則表達(dá)式
• 26. Ajax 是什么? 如何創(chuàng)建一個 Ajax？
• 27. js 延遲加載的方式有哪些？
• 28. 談?wù)勀銓δK化開發(fā)的理解？
• 29. js 的幾種模塊規(guī)范？
• 30. AMD和CMD 規(guī)范的區(qū)別？
• 31. ES6 模塊與 CommonJS 模塊、AMD、CMD 的差異。
• 32.   requireJS的核心原理是什么？
• 33. 談?wù)凧S的運行機制
• 34. arguments 的對象是什么？
• 35. 為什么在調(diào)用這個函數(shù)時，代碼中的`b`會變成一個全局變量?
• 36.簡單介紹一下V8引擎的垃圾回收機制
• 37. 哪些操作會造成內(nèi)存泄漏？
• 38. ECMAScript 是什么？
• 39. ECMAScript 2015（ES6）有哪些新特性？
• 40. `var`,`let`和`const`的區(qū)別是什么？
• 41. 什么是箭頭函數(shù)？
• 42. 什么是類？
• 43. 什么是模板字符串？
• 44. 什么是對象解構(gòu)？
• 45 什么是`Set`對象，它是如何工作的？
• 46. 什么是Proxy？

————

高能預(yù)警分割線—————

• 47. 寫一個通用的事件偵聽器函數(shù)，為什么要用它？
• 48. 什么是函數(shù)式編程? JavaScript的哪些特性使其成為函數(shù)式語言的候選語言？
• 49. 什么是高階函數(shù)？
• 50. 為什么函數(shù)被稱為一等公民？
• 51. 手動實現(xiàn)`Array.prototype.map 方法`
• 52. 手動實現(xiàn)`Array.prototype.filter`方法
• 53. 手動實現(xiàn)`Array.prototype.reduce`方法
• 54. js的深淺拷貝
• 55. 手寫call、apply及bind函數(shù)
• 56. 函數(shù)柯里化的實現(xiàn)
• 57. js模擬new操作符的實現(xiàn)
• 58. 什么是回調(diào)函數(shù)？回調(diào)函數(shù)有什么缺點
• 59. Promise是什么，可以手寫實現(xiàn)一下嗎？
• 60. `Iterator`是什么，有什么作用？
• 61. `Generator`函數(shù)是什么，有什么作用？
• 62. 什么是 `async/await`及其如何工作,有什么優(yōu)缺點？
• 63. instanceof的原理是什么，如何實現(xiàn)
• 64. js的節(jié)流與防抖
• 65. 什么是設(shè)計模式？
• 66. 9種前端常見的設(shè)計模式

1. 介紹一下 js 的數(shù)據(jù)類型有哪些,值是如何存儲的

具體可看我之前的文章：「前端料包」可能是最透徹的JavaScript數(shù)據(jù)類型詳解

JavaScript一共有8種數(shù)據(jù)類型，其中有7種基本數(shù)據(jù)類型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示獨一無二的值）和BigInt（es10新增）；

1種引用數(shù)據(jù)類型——Object（Object本質(zhì)上是由一組無序的名值對組成的）。里面包含 function、Array、Date等。JavaScript不支持任何創(chuàng)建自定義類型的機制，而所有值最終都將是上述 8 種數(shù)據(jù)類型之一。

原始數(shù)據(jù)類型：直接存儲在棧（stack）中，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲。

引用數(shù)據(jù)類型：同時存儲在棧（stack）和堆（heap）中，占據(jù)空間大、大小不固定。引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當(dāng)解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體。

2. && 、 ||和!! 運算符分別能做什么

•  && 叫邏輯與，在其操作數(shù)中找到第一個虛值表達(dá)式并返回它，如果沒有找到任何虛值表達(dá)式，則返回最后一個真值表達(dá)式。它采用短路來防止不必要的工作。
•  || 叫邏輯或，在其操作數(shù)中找到第一個真值表達(dá)式并返回它。這也使用了短路來防止不必要的工作。在支持 ES6 默認(rèn)函數(shù)參數(shù)之前，它用于初始化函數(shù)中的默認(rèn)參數(shù)值。
•  !! 運算符可以將右側(cè)的值強制轉(zhuǎn)換為布爾值，這也是將值轉(zhuǎn)換為布爾值的一種簡單方法。

3. js的數(shù)據(jù)類型的轉(zhuǎn)換

在 JS 中類型轉(zhuǎn)換只有三種情況，分別是：

•  轉(zhuǎn)換為布爾值（調(diào)用Boolean()方法）
•  轉(zhuǎn)換為數(shù)字（調(diào)用Number()、parseInt()和parseFloat()方法）
•  轉(zhuǎn)換為字符串（調(diào)用.toString()或者String()方法）

 
 
 
 

  
  
  
  
null和underfined沒有.toString方法
 
 
 
 

此外還有一些操作符會存在隱式轉(zhuǎn)換，此處不做展開，可自行百度00

4. JS中數(shù)據(jù)類型的判斷（ typeof，instanceof，constructor，Object.prototype.toString.call()

（1）typeof

typeof 對于原始類型來說，除了 null 都可以顯示正確的類型

 
 
 
 

  
  
  
  
console.log(typeof 2);               // number 
  
  
  
  
console.log(typeof true);            // boolean 
  
  
  
  
console.log(typeof 'str');           // string 
  
  
  
  
console.log(typeof []);              // object     []數(shù)組的數(shù)據(jù)類型在 typeof 中被解釋為 object 
  
  
  
  
console.log(typeof function(){});    // function 
  
  
  
  
console.log(typeof {});              // object 
  
  
  
  
console.log(typeof undefined);       // undefined 
  
  
  
  
console.log(typeof null);            // object     null 的數(shù)據(jù)類型被 typeof 解釋為 object
 
 
 
 

typeof 對于對象來說，除了函數(shù)都會顯示 object，所以說 typeof 并不能準(zhǔn)確判斷變量到底是什么類型,所以想判斷一個對象的正確類型，這時候可以考慮使用 instanceof

（2）instanceof

instanceof 可以正確的判斷對象的類型，因為內(nèi)部機制是通過判斷對象的原型鏈中是不是能找到類型的 prototype。

 
 
 
 

  
  
  
  
console.log(2 instanceof Number);                    // false 
  
  
  
  
console.log(true instanceof Boolean);                // false  
  
  
  
  
console.log('str' instanceof String);                // false  
  
  
  
  
console.log([] instanceof Array);                    // true 
  
  
  
  
console.log(function(){} instanceof Function);       // true 
  
  
  
  
console.log({} instanceof Object);                   // true    
  
  
  
  
// console.log(undefined instanceof Undefined); 
  
  
  
  
// console.log(null instanceof Null);
 
 
 
 

可以看出直接的字面量值判斷數(shù)據(jù)類型，instanceof可以精準(zhǔn)判斷引用數(shù)據(jù)類型（Array，F(xiàn)unction，Object），而基本數(shù)據(jù)類型不能被instanceof精準(zhǔn)判斷。

我們來看一下 instanceof 在MDN中的解釋：instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構(gòu)造函數(shù)的 prototype 屬性。其意思就是判斷對象是否是某一數(shù)據(jù)類型（如Array）的實例，請重點關(guān)注一下是判斷一個對象是否是數(shù)據(jù)類型的實例。在這里字面量值，2， true ，'str'不是實例，所以判斷值為false。

（3）constructor

 
 
 
 

  
  
  
  
console.log((2).constructor === Number); // true 
  
  
  
  
console.log((true).constructor === Boolean); // true 
  
  
  
  
console.log(('str').constructor === String); // true 
  
  
  
  
console.log(([]).constructor === Array); // true 
  
  
  
  
console.log((function() {}).constructor === Function); // true 
  
  
  
  
console.log(({}).constructor === Object); // true
  
  
  
  
這里有一個坑，如果我創(chuàng)建一個對象，更改它的原型，constructor就會變得不可靠了 
  
  
  
  
function Fn(){}; 
  
  
  
  
Fn.prototype=new Array(); 
  
  
  
  
var f=new Fn(); 
  
  
  
  
console.log(f.constructor===Fn);    // false 
  
  
  
  
console.log(f.constructor===Array); // true 
 
 
 
 

（4）Object.prototype.toString.call()

使用 Object 對象的原型方法 toString ，使用 call 進(jìn)行貍貓換太子，借用Object的 toString  方法

 
 
 
 

  
  
  
  
var a = Object.prototype.toString; 
  
  
  
  
console.log(a.call(2)); 
  
  
  
  
console.log(a.call(true)); 
  
  
  
  
console.log(a.call('str')); 
  
  
  
  
console.log(a.call([])); 
  
  
  
  
console.log(a.call(function(){})); 
  
  
  
  
console.log(a.call({})); 
  
  
  
  
console.log(a.call(undefined)); 
  
  
  
  
console.log(a.call(null));
 
 
 
 

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

涉及知識點：

 
 
 
 

  
  
  
  
全局的對象（ global objects ）或稱標(biāo)準(zhǔn)內(nèi)置對象，不要和 "全局對象（global object）" 混淆。這里說的全局的對象是說在 
  
  
  
  
全局作用域里的對象。全局作用域中的其他對象可以由用戶的腳本創(chuàng)建或由宿主程序提供。 
  
  
  
  
標(biāo)準(zhǔn)內(nèi)置對象的分類
  
  
  
  
（1）值屬性，這些全局屬性返回一個簡單值，這些值沒有自己的屬性和方法。 
  
  
  
  
例如 Infinity、NaN、undefined、null 字面量 
  
  
  
  
（2）函數(shù)屬性，全局函數(shù)可以直接調(diào)用，不需要在調(diào)用時指定所屬對象，執(zhí)行結(jié)束后會將結(jié)果直接返回給調(diào)用者。 
  
  
  
  
例如 eval()、parseFloat()、parseInt() 等
  
  
  
  
（3）基本對象，基本對象是定義或使用其他對象的基礎(chǔ)?；緦ο蟀ㄒ话銓ο?、函數(shù)對象和錯誤對象。 
  
  
  
  
例如 Object、Function、Boolean、Symbol、Error 等 
  
  
  
  
（4）數(shù)字和日期對象，用來表示數(shù)字、日期和執(zhí)行數(shù)學(xué)計算的對象。
  
  
  
  
例如 Number、Math、Date
  
  
  
  
（5）字符串，用來表示和操作字符串的對象。 
  
  
  
  
例如 String、RegExp 
  
  
  
  
（6）可索引的集合對象，這些對象表示按照索引值來排序的數(shù)據(jù)集合，包括數(shù)組和類型數(shù)組，以及類數(shù)組結(jié)構(gòu)的對象。例如 Array 
  
  
  
  
（7）使用鍵的集合對象，這些集合對象在存儲數(shù)據(jù)時會使用到鍵，支持按照插入順序來迭代元素。 
  
  
  
  
例如 Map、Set、WeakMap、WeakSet 
  
  
  
  
（8）矢量集合，SIMD 矢量集合中的數(shù)據(jù)會被組織為一個數(shù)據(jù)序列。 
  
  
  
  
例如 SIMD 等 
  
  
  
  
（9）結(jié)構(gòu)化數(shù)據(jù)，這些對象用來表示和操作結(jié)構(gòu)化的緩沖區(qū)數(shù)據(jù)，或使用 JSON 編碼的數(shù)據(jù)。 
  
  
  
  
例如 JSON 等 
  
  
  
  
（10）控制抽象對象 
  
  
  
  
例如 Promise、Generator 等 
  
  
  
  
（11）反射 
  
  
  
  
例如 Reflect、Proxy 
  
  
  
  
（12）國際化，為了支持多語言處理而加入 ECMAScript 的對象。 
  
  
  
  
例如 Intl、Intl.Collator 等 
  
  
  
  
（13）WebAssembly 
  
  
  
  
（14）其他 
  
  
  
  
例如 arguments
 
 
 
 

js 中的內(nèi)置對象主要指的是在程序執(zhí)行前存在全局作用域里的由 js

定義的一些全局值屬性、函數(shù)和用來實例化其他對象的構(gòu)造函

數(shù)對象。一般我們經(jīng)常用到的如全局變量值 NaN、undefined，全局函數(shù)如 parseInt()、parseFloat() 用來實例化對象的構(gòu)

造函數(shù)如 Date、Object 等，還有提供數(shù)學(xué)計算的單體內(nèi)置對象如 Math 對象。

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

《標(biāo)準(zhǔn)內(nèi)置對象的分類》

《JS 所有內(nèi)置對象屬性和方法匯總》

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

已在作用域中聲明但還沒有賦值的變量，是 undefined 的。相反，還沒有在作用域中聲明過的變量，是 undeclared 的。

對于 undeclared 變量的引用，瀏覽器會報引用錯誤，如 ReferenceError: b is not defined 。但是我們可以使用 typ

eof 的安全防范機制來避免報錯，因為對于 undeclared（或者 not defined ）變量，typeof 會返回 "undefined"。

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

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

undefined 代表的含義是未定義，

null 代表的含義是空對象。一般變量聲明了但還沒有定義的時候會返回 undefined，null

主要用于賦值給一些可能會返回對象的變量，作為初始化。

undefined 在 js 中不是一個保留字，這意味著我們可以使用 undefined 來作為一個變量名，這樣的做法是非常危險的，它

會影響我們對 undefined 值的判斷。但是我們可以通過一些方法獲得安全的 undefined 值，比如說 void 0。

當(dāng)我們對兩種類型使用 typeof 進(jìn)行判斷的時候，Null 類型化會返回 “object”，這是一個歷史遺留的問題。當(dāng)我們使用雙等

號對兩種類型的值進(jìn)行比較時會返回 true，使用三個等號時會返回 false。

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

《JavaScript 深入理解之 undefined 與 null》

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

 
 
 
 

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

9. Javascript 的作用域和作用域鏈

作用域： 作用域是定義變量的區(qū)域，它有一套訪問變量的規(guī)則，這套規(guī)則來管理瀏覽器引擎如何在當(dāng)前作用域以及嵌套的作用域中根據(jù)變量（標(biāo)識符）進(jìn)行變量查找。

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

函數(shù)。

作用域鏈的本質(zhì)上是一個指向變量對象的指針列表。變量對象是一個包含了執(zhí)行環(huán)境中所有變量和函數(shù)的對象。作用域鏈的前

端始終都是當(dāng)前執(zhí)行上下文的變量對象。全局執(zhí)行上下文的變量對象（也就是全局對象）始終是作用域鏈的最后一個對象。

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

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

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

《JavaScript 深入理解之作用域鏈》

也可以看看我的文章：「前端料包」深究JavaScript作用域（鏈）知識點和閉包

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

 
 
 
 

  
  
  
  
我們一般使用字面量的形式直接創(chuàng)建對象，但是這種創(chuàng)建方式對于創(chuàng)建大量相似對象的時候，會產(chǎn)生大量的重復(fù)代碼。但 js 
  
  
  
  
和一般的面向?qū)ο蟮恼Z言不同，在 ES6 之前它沒有類的概念。但是我們可以使用函數(shù)來進(jìn)行模擬，從而產(chǎn)生出可復(fù)用的對象 
  
  
  
  
創(chuàng)建方式，我了解到的方式有這么幾種： 
  
  
  
  
（1）第一種是工廠模式，工廠模式的主要工作原理是用函數(shù)來封裝創(chuàng)建對象的細(xì)節(jié)，從而通過調(diào)用函數(shù)來達(dá)到復(fù)用的目的。但是它有一個很大的問題就是創(chuàng)建出來的對象無法和某個類型聯(lián)系起來，它只是簡單的封裝了復(fù)用代碼，而沒有建立起對象和類型間的關(guān)系。
  
  
  
  
（2）第二種是構(gòu)造函數(shù)模式。js 中每一個函數(shù)都可以作為構(gòu)造函數(shù)，只要一個函數(shù)是通過 new 來調(diào)用的，那么我們就可以把它稱為構(gòu)造函數(shù)。執(zhí)行構(gòu)造函數(shù)首先會創(chuàng)建一個對象，然后將對象的原型指向構(gòu)造函數(shù)的 prototype 屬性，然后將執(zhí)行上下文中的 this 指向這個對象，最后再執(zhí)行整個函數(shù)，如果返回值不是對象，則返回新建的對象。因為 this 的值指向了新建的對象，因此我們可以使用 this 給對象賦值。構(gòu)造函數(shù)模式相對于工廠模式的優(yōu)點是，所創(chuàng)建的對象和構(gòu)造函數(shù)建立起了聯(lián)系，因此我們可以通過原型來識別對象的類型。但是構(gòu)造函數(shù)存在一個缺點就是，造成了不必要的函數(shù)對象的創(chuàng)建，因為在 js 中函數(shù)也是一個對象，因此如果對象屬性中如果包含函數(shù)的話，那么每次我們都會新建一個函數(shù)對象，浪費了不必要的內(nèi)存空間，因為函數(shù)是所有的實例都可以通用的。
  
  
  
  
（3）第三種模式是原型模式，因為每一個函數(shù)都有一個 prototype 屬性，這個屬性是一個對象，它包含了通過構(gòu)造函數(shù)創(chuàng)建的所有實例都能共享的屬性和方法。因此我們可以使用原型對象來添加公用屬性和方法，從而實現(xiàn)代碼的復(fù)用。這種方式相對于構(gòu)造函數(shù)模式來說，解決了函數(shù)對象的復(fù)用問題。但是這種模式也存在一些問題，一個是沒有辦法通過傳入?yún)?shù)來初始化值，另一個是如果存在一個引用類型如 Array 這樣的值，那么所有的實例將共享一個對象，一個實例對引用類型值的改變會影響所有的實例。
  
  
  
  
（4）第四種模式是組合使用構(gòu)造函數(shù)模式和原型模式，這是創(chuàng)建自定義類型的最常見方式。因為構(gòu)造函數(shù)模式和原型模式分開使用都存在一些問題，因此我們可以組合使用這兩種模式，通過構(gòu)造函數(shù)來初始化對象的屬性，通過原型對象來實現(xiàn)函數(shù)方法的復(fù)用。這種方法很好的解決了兩種模式單獨使用時的缺點，但是有一點不足的就是，因為使用了兩種不同的模式，所以對于代碼的封裝性不夠好。
  
  
  
  
（5）第五種模式是動態(tài)原型模式，這一種模式將原型方法賦值的創(chuàng)建過程移動到了構(gòu)造函數(shù)的內(nèi)部，通過對屬性是否存在的判斷，可以實現(xiàn)僅在第一次調(diào)用函數(shù)時對原型對象賦值一次的效果。這一種方式很好地對上面的混合模式進(jìn)行了封裝。
  
  
  
  
（6）第六種模式是寄生構(gòu)造函數(shù)模式，這一種模式和工廠模式的實現(xiàn)基本相同，我對這個模式的理解是，它主要是基于一個已有的類型，在實例化時對實例化的對象進(jìn)行擴展。這樣既不用修改原來的構(gòu)造函數(shù)，也達(dá)到了擴展對象的目的。它的一個缺點和工廠模式一樣，無法實現(xiàn)對象的識別。
  
  
  
  
嗯我目前了解到的就是這么幾種方式。
 
 
 
 

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

《JavaScript 深入理解之對象創(chuàng)建》

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

 
 
 
 

  
  
  
  
我了解的 js 中實現(xiàn)繼承的幾種方式有： 
  
  
  
  
（1）第一種是以原型鏈的方式來實現(xiàn)繼承，但是這種實現(xiàn)方式存在的缺點是，在包含有引用類型的數(shù)據(jù)時，會被所有的實例對象所共享，容易造成修改的混亂。還有就是在創(chuàng)建子類型的時候不能向超類型傳遞參數(shù)。
  
  
  
  
（2）第二種方式是使用借用構(gòu)造函數(shù)的方式，這種方式是通過在子類型的函數(shù)中調(diào)用超類型的構(gòu)造函數(shù)來實現(xiàn)的，這一種方法解決了不能向超類型傳遞參數(shù)的缺點，但是它存在的一個問題就是無法實現(xiàn)函數(shù)方法的復(fù)用，并且超類型原型定義的方法子類型也沒有辦法訪問到。
  
  
  
  
（3）第三種方式是組合繼承，組合繼承是將原型鏈和借用構(gòu)造函數(shù)組合起來使用的一種方式。通過借用構(gòu)造函數(shù)的方式來實現(xiàn)類型的屬性的繼承，通過將子類型的原型設(shè)置為超類型的實例來實現(xiàn)方法的繼承。這種方式解決了上面的兩種模式單獨使用時的問題，但是由于我們是以超類型的實例來作為子類型的原型，所以調(diào)用了兩次超類的構(gòu)造函數(shù)，造成了子類型的原型中多了很多不必要的屬性。
  
  
  
  
（4）第四種方式是原型式繼承，原型式繼承的主要思路就是基于已有的對象來創(chuàng)建新的對象，實現(xiàn)的原理是，向函數(shù)中傳入一個對象，然后返回一個以這個對象為原型的對象。這種繼承的思路主要不是為了實現(xiàn)創(chuàng)造一種新的類型，只是對某個對象實現(xiàn)一種簡單繼承，ES5 中定義的 Object.create() 方法就是原型式繼承的實現(xiàn)。缺點與原型鏈方式相同。
  
  
  
  
（5）第五種方式是寄生式繼承，寄生式繼承的思路是創(chuàng)建一個用于封裝繼承過程的函數(shù)，通過傳入一個對象，然后復(fù)制一個對象的副本，然后對象進(jìn)行擴展，最后返回這個對象。這個擴展的過程就可以理解是一種繼承。這種繼承的優(yōu)點就是對一個簡單對象實現(xiàn)繼承，如果這個對象不是我們的自定義類型時。缺點是沒有辦法實現(xiàn)函數(shù)的復(fù)用。
  
  
  
  
（6）第六種方式是寄生式組合繼承，組合繼承的缺點就是使用超類型的實例做為子類型的原型，導(dǎo)致添加了不必要的原型屬性。寄生式組合繼承的方式是使用超類型的原型的副本來作為子類型的原型，這樣就避免了創(chuàng)建不必要的屬性。
 
 
 
 

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

《JavaScript 深入理解之繼承》

12. 寄生式組合繼承的實現(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); 
  
  
  
  
StudentStudent.prototype.constructor = Student; 
  
  
  
  
Student.prototype.sayMyGrade = function() { 
  
  
  
  
  console.log("My grade is " + this.grade + "."); 
  
  
  
  
};
 
 
 
 

13. 談?wù)勀銓his、call、apply和bind的理解

詳情可看我之前的文章：「前端料包」一文徹底搞懂JavaScript中的this、call、apply和bind

1.  在瀏覽器里，在全局范圍內(nèi)this 指向window對象；
2.  在函數(shù)中，this永遠(yuǎn)指向最后調(diào)用他的那個對象；
3.  構(gòu)造函數(shù)中，this指向new出來的那個新的對象；
4.  call、apply、bind中的this被強綁定在指定的那個對象上；
5.  箭頭函數(shù)中this比較特殊,箭頭函數(shù)this為父作用域的this，不是調(diào)用時的this.要知道前四種方式,都是調(diào)用時確定,也就是動態(tài)的,而箭頭函數(shù)的this指向是靜態(tài)的,聲明的時候就確定了下來；
6.  apply、call、bind都是js給函數(shù)內(nèi)置的一些API，調(diào)用他們可以為函數(shù)指定this的執(zhí)行,同時也可以傳參。

14. JavaScript 原型，原型鏈？有什么特點？

在 js 中我們是使用構(gòu)造函數(shù)來新建一個對象的，每一個構(gòu)造函數(shù)的內(nèi)部都有一個 prototype 屬性值，這個屬性值是一個對

象，這個對象包含了可以由該構(gòu)造函數(shù)的所有實例共享的屬性和方法。當(dāng)我們使用構(gòu)造函數(shù)新建一個對象后，在這個對象的內(nèi)部

將包含一個指針，這個指針指向構(gòu)造函數(shù)的 prototype 屬性對應(yīng)的值，在 ES5 中這個指針被稱為對象的原型。一般來說我們

是不應(yīng)該能夠獲取到這個值的，但是現(xiàn)在瀏覽器中都實現(xiàn)了 proto 屬性來讓我們訪問這個屬性，但是我們最好不要使用這

個屬性，因為它不是規(guī)范中規(guī)定的。ES5 中新增了一個 Object.getPrototypeOf() 方法，我們可以通過這個方法來獲取對

象的原型。

當(dāng)我們訪問一個對象的屬性時，如果這個對象內(nèi)部不存在這個屬性，那么它就會去它的原型對象里找這個屬性，這個原型對象又

會有自己的原型，于是就這樣一直找下去，也就是原型鏈的概念。原型鏈的盡頭一般來說都是 Object.prototype 所以這就

是我們新建的對象為什么能夠使用 toString() 等方法的原因。

特點：

JavaScript 對象是通過引用來傳遞的，我們創(chuàng)建的每個新對象實體中并沒有一份屬于自己的原型副本。當(dāng)我們修改原型時，與

之相關(guān)的對象也會繼承這一改變。

參考文章：

《JavaScript 深入理解之原型與原型鏈》

也可以看看我寫的：「前端料包」深入理解JavaScript原型和原型鏈

15. js 獲取原型的方法？

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

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

閉包是指有權(quán)訪問另一個函數(shù)作用域內(nèi)變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)，創(chuàng)建的函數(shù)可以

訪問到當(dāng)前函數(shù)的局部變量。

閉包有兩個常用的用途。

•  閉包的第一個用途是使我們在函數(shù)外部能夠訪問到函數(shù)內(nèi)部的變量。通過使用閉包，我們可以通過在外部調(diào)用閉包函數(shù)，從而在外部訪問到函數(shù)內(nèi)部的變量，可以使用這種方法來創(chuàng)建私有變量。
•  函數(shù)的另一個用途是使已經(jīng)運行結(jié)束的函數(shù)上下文中的變量對象繼續(xù)留在內(nèi)存中，因為閉包函數(shù)保留了這個變量對象的引用，所以這個變量對象不會被回收。

 
 
 
 

  
  
  
  
function a(){ 
  
  
  
  
    var n = 0; 
  
  
  
  
    function add(){ 
  
  
  
  
       n++; 
  
  
  
  
       console.log(n); 
  
  
  
  
    } 
  
  
  
  
    return add; 
  
  
  
  
} 
  
  
  
  
var aa1 = a(); //注意，函數(shù)名只是一個標(biāo)識（指向函數(shù)的指針），而（）才是執(zhí)行函數(shù)； 
  
  
  
  
a1();    //1 
  
  
  
  
a1();    //2  第二次調(diào)用n變量還在內(nèi)存中
 
 
 
 

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

17. 什么是 DOM 和 BOM？

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

BOM  指的是瀏覽器對象模型，它指的是把瀏覽器當(dāng)做一個對象來對待，這個對象主要定義了與瀏覽器進(jìn)行交互的法和接口。BOM

的核心是 window，而 window 對象具有雙重角色，它既是通過 js 訪問瀏覽器窗口的一個接口，又是一個 Global（全局）

對象。這意味著在網(wǎng)頁中定義的任何對象，變量和函數(shù)，都作為全局對象的一個屬性或者方法存在。window 對象含有 locati

on 對象、navigator 對象、screen 對象等子對象，并且 DOM 的最根本的對象 document 對象也是 BOM 的 window 對

象的子對象。

相關(guān)資料：

《DOM, DOCUMENT, BOM, WINDOW 有什么區(qū)別?》

《Window 對象》

《DOM 與 BOM 分別是什么，有何關(guān)聯(lián)？》

《JavaScript 學(xué)習(xí)總結(jié)（三）BOM 和 DOM 詳解》

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

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

1.  DOM0級模型： ，這種模型不會傳播，所以沒有事件流的概念，但是現(xiàn)在有的瀏覽器支持以冒泡的方式實現(xiàn)，它可以在網(wǎng)頁中直接定義監(jiān)聽函數(shù)，也可以通過 js屬性來指定監(jiān)聽函數(shù)。這種方式是所有瀏覽器都兼容的。

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

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

相關(guān)資料：

《一個 DOM 元素綁定多個事件時，先執(zhí)行冒泡還是捕獲》

19. 事件委托是什么？

事件委托 本質(zhì)上是利用了瀏覽器事件冒泡的機制。因為事件在冒泡過程中會上傳到父節(jié)點，并且父節(jié)點可以通過事件對象獲取到

目標(biāo)節(jié)點，因此可以把子節(jié)點的監(jiān)聽函數(shù)定義在父節(jié)點上，由父節(jié)點的監(jiān)聽函數(shù)統(tǒng)一處理多個子元素的事件，這種方式稱為事件代理。

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

相關(guān)資料：

《JavaScript 事件委托詳解》

20. 什么是事件傳播?

當(dāng)事件發(fā)生在DOM元素上時，該事件并不完全發(fā)生在那個元素上。在“當(dāng)事件發(fā)生在DOM元素上時，該事件并不完全發(fā)生在那個元素上。在“冒泡階段”中，事件冒泡或向上傳播至父級，祖父母，祖父母或父級，直到到達(dá)window為止；而在“捕獲階段”中，事件從window開始向下觸發(fā)元素 事件或event.target。

事件傳播有三個階段：”中，事件冒泡或向上傳播至父級，祖父母，祖父母或父級，直到到達(dá)window為止；而在“捕獲階段”中，事件從window開始向下觸發(fā)元素 事件或event.target。

事件傳播有三個階段：

1.  捕獲階段–事件從 window 開始，然后向下到每個元素，直到到達(dá)目標(biāo)元素。
2.  目標(biāo)階段–事件已達(dá)到目標(biāo)元素。
3.  冒泡階段–事件從目標(biāo)元素冒泡，然后上升到每個元素，直到到達(dá) window。

21. 什么是事件捕獲？

當(dāng)事件發(fā)生在 DOM 元素上時，該事件并不完全發(fā)生在那個元素上。在捕獲階段，事件從window開始，一直到觸發(fā)事件的元素。window----> document----> html----> body ---->目標(biāo)元素

假設(shè)有如下的 HTML 結(jié)構(gòu)：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    1