前言

上篇博客，我們了解了javascript函數(shù)執(zhí)行過程，本篇章主要講述函數(shù)，如參數(shù)、回調(diào)、同/異步、箭頭函數(shù)等，并闡述了對ES6中class類的認(rèn)識以及繼承。

面試回答

1.ES6新特性：新增了一種值類型Symbol以及Set和Map的數(shù)據(jù)結(jié)構(gòu)。增加了塊級作用域，比如let，const。增加了變量的解構(gòu)賦值。新增了擴(kuò)展運(yùn)算符。提供了類的語法糖class。新增了箭頭函數(shù)。函數(shù)參數(shù)允許設(shè)置默認(rèn)值，引入了rest參數(shù)，新增了一些API，比如isArray、keys()。

2.異步編程史：異步編程有四個階段，分別是回調(diào)函數(shù)、Promise、Generator、async/await，回調(diào)函數(shù)的缺點(diǎn)在于容易出現(xiàn)回調(diào)地獄，不能用try/catch捕獲錯誤，不能return。Promise構(gòu)造函數(shù)內(nèi)的代碼是同步執(zhí)行，then方法中的代碼是異步執(zhí)行的，可以通過構(gòu)造函數(shù)的參數(shù)reslove進(jìn)入then回調(diào)中，不過缺點(diǎn)是無法取消，錯誤需要回調(diào)來捕獲。Generator可以用來控制函數(shù)，比如暫停、恢復(fù)執(zhí)行。async/await是Promise的語法糖，它是為優(yōu)化then鏈而開發(fā)出來的，解決了then鏈過長的問題，await的功能基本等同于then，它能實(shí)現(xiàn)的效果都能用then來實(shí)現(xiàn)，只不過then方法是微任務(wù)，屬于異步任務(wù)，而await后的方法等同于Promise的構(gòu)造函數(shù)，這個方法之后的代碼等同于then回調(diào)。

3.箭頭函數(shù)：箭頭函數(shù)沒有原型，所以不能作為構(gòu)造函數(shù)。它的this指向?yàn)楫?dāng)前所在環(huán)境的this，且箭頭函數(shù)不支持重命名參數(shù)，也沒有arguments對象。

4.閉包：閉包能夠使內(nèi)部函數(shù)讀取外部函數(shù)的變量，讓變量長期駐扎在內(nèi)存當(dāng)中，從而讓該變量不被垃圾回收機(jī)制回收，當(dāng)不再需要閉包時，把內(nèi)部函數(shù)賦值為null即可。好處是能夠避免因?yàn)樽饔糜騿栴}而把變量定義在全局作用域里面，造成全局變量的污染。閉包的原理是利用了函數(shù)作用域鏈的特性，內(nèi)部函數(shù)會將外部函數(shù)的活動對象添加到作用域鏈里，當(dāng)外部函數(shù)執(zhí)行完畢，作用域鏈會被銷毀，但活動對象由于仍被內(nèi)部函數(shù)的作用域鏈引用，所以不會被銷毀?，F(xiàn)在閉包很少用到，以前的話會用閉包解決封裝模塊以及循環(huán)中作用域的問題。

5.手寫Promise：Promise有狀態(tài)、構(gòu)造函數(shù)、then方法、catch方法、finally方法、all等方法，首先定義三個狀態(tài)，pending、resolved、rejected以及一些變量，比如status、data、reason、callback用來儲存狀態(tài)、resolve返回、reject返回和then方法的回調(diào)。然后實(shí)現(xiàn)構(gòu)造函數(shù)以及reject、resolved兩個方法，構(gòu)造函數(shù)一般用try/catch方法直接接收或拋出，reject、resolved這兩個方法是創(chuàng)建實(shí)例的時候作為構(gòu)造函數(shù)的參數(shù)傳入，且兩個方法都包含對狀態(tài)的判斷以及修改，并且處理回調(diào)。接著實(shí)現(xiàn)then方法，由于then方法是微任務(wù)且最后會返回一個Promise，所以我們要new一個新實(shí)例然后判斷狀態(tài)，再執(zhí)行queueMicrotask方法，最后就是一些catch方法、finally等方法的處理，這兩個都可以通過直接返回之前實(shí)現(xiàn)的then方法實(shí)現(xiàn)，只不過finally不接收參數(shù)。Promise的all方法，同樣最后會返回一個Promise，不同的是Promise.all方法接收的參數(shù)是數(shù)組，可能包含多個請求，需要用let...of...對參數(shù)進(jìn)行遍歷，遍歷后判斷它是否為Promise對象，如果是則直接調(diào)用then方法，如果不是則將參數(shù)保存到結(jié)果變量中，最后一起返回這個結(jié)果變量。

6.閉包：閉包能夠使內(nèi)部函數(shù)讀取外部函數(shù)的變量，讓變量長期駐扎在內(nèi)存當(dāng)中，從而讓該變量不被垃圾回收機(jī)制回收，當(dāng)不再需要閉包時，把內(nèi)部函數(shù)賦值為null即可。好處是能夠避免因?yàn)樽饔糜騿栴}而把變量定義在全局作用域里面，造成全局變量的污染。閉包的原理是利用了函數(shù)作用域鏈的特性，內(nèi)部函數(shù)會將外部函數(shù)的活動對象添加到作用域鏈里，當(dāng)外部函數(shù)執(zhí)行完畢，作用域鏈會被銷毀，但活動對象由于仍被內(nèi)部函數(shù)的作用域鏈引用，所以不會被銷毀?，F(xiàn)在閉包很少用到，比較典型的就是vue中的data數(shù)據(jù)，以前的話會用閉包解決封裝模塊以及循環(huán)中作用域的問題。

知識點(diǎn)

1.參數(shù)

JavaScript 函數(shù)有個內(nèi)置的對象，arguments對象，argument對象包含了函數(shù)調(diào)用時的由所有參數(shù)組成的數(shù)組，arguments對象可以應(yīng)用于函數(shù)調(diào)用時參數(shù)太多（超過聲明）的情景。

2.Generator函數(shù)

yield是JS為了解決異步調(diào)用的命令。表示程序執(zhí)行到這里會交出執(zhí)行權(quán)，等待結(jié)果返回。它需要在Generator函數(shù)中運(yùn)行，與普通function的區(qū)別就是函數(shù)名前面多了一個星號*，這里只做最簡單的用法，有興趣的同學(xué)可以繼續(xù)研究~

3.箭頭函數(shù)

箭頭函數(shù)沒有原型，本身沒有this，在箭頭函數(shù)中使用this，它的指向?yàn)楫?dāng)前所在環(huán)境的this，所以不可以當(dāng)作構(gòu)造函數(shù)，new一個箭頭函數(shù)也會拋出一個錯誤。箭頭函數(shù)不支持重命名函數(shù)參數(shù)，關(guān)于箭頭函數(shù)的this指向問題已經(jīng)在上一篇博客中理解過了，這邊就不著重描述了，我們分為局部函數(shù)環(huán)境、全局環(huán)境來看。

全局環(huán)境

全局環(huán)境下，箭頭函數(shù)的this都會指向window，使用aguments會報錯，舉例：

局部函數(shù)環(huán)境

根據(jù)上一篇this指向的理解，在局部函數(shù)環(huán)境，箭頭函數(shù)的this指向它的外層普通函數(shù)時，它的arguments指向外層普通函數(shù)的arguments，取而代之用rest參數(shù)...。箭頭函數(shù)本身的this指向不能改變，也不能使用call、apply去改變，但改變它所在的上下文（也就是外層函數(shù)）的this指向，舉例：

4.class類

先來看一下ES5的類，

再看一下ES6完整的例子，記得有疑問的地方要標(biāo)記一下哦：

A.1.基礎(chǔ)概念

成員：成員分為私有成員、公有成員以及靜態(tài)成員，無論屬性還是函數(shù)只要加上關(guān)鍵字都可以成為對應(yīng)的成員。

私有成員：關(guān)鍵字#，私有成員有以下幾個特點(diǎn)，

• class內(nèi)部不同方法間可以使用，因此this要指向?qū)嵗瘜ο螅?/span>

• 不能被外部訪問，因此實(shí)例化對象既不能獲得值，也不能設(shè)定值；

• 不能被繼承，因此extends后子類不具備該屬性

靜態(tài)成員：是指在方法名或?qū)傩悦懊婕由?code>static關(guān)鍵字，和普通方法不一樣的是，靜態(tài)方法不能在實(shí)例中訪問，只能在類中訪問；靜態(tài)成員也可以通過派生類訪問，但不能通過派生類的實(shí)例訪問，如果靜態(tài)方法包含this關(guān)鍵字，這個this指的是類，而不是實(shí)例。

公有成員：除去私有成員，靜態(tài)成員，其他成員屬于公有成員。

派生類：通過extends關(guān)鍵字來實(shí)現(xiàn)繼承的功能，如Animal是Cat的基類，Cat是Animal 的派生類，Cat繼承了Animal的基本能力，在派生類中定義重名函數(shù)會覆蓋掉基類中的原始函數(shù)。

原型鏈：之前已經(jīng)對原型鏈的概念進(jìn)行理解，Class類同時有prototype屬性和__proto__屬性，因此同時存在兩條繼承鏈。 大致理解如下：

1.子類實(shí)例（cat）的__proto__屬性，總是指向cat原型，而cat原型的__proto__屬性總是指向父類（Animal）的原型，父類實(shí)例（animal）的__proto__屬性則也是指向他自身的原型。也就是說，cat.__proto__.__proto__===animal.__proto__。子類實(shí)例的原型的原型，是父類實(shí)例的原型。

2.子類（Cat）prototype屬性指向的是他自身的原型，然后子類（Cat）原型的原型又是指向父類的原型，也就是說，Cat.prototype.__proto__=== Animal.prototype，即總是指向父類（Animal）的prototype屬性。

如若還有疑問，可以參考博客文章四。

A.2.構(gòu)造函數(shù)

Cat類中可以看到有一個constructor方法，這個就是構(gòu)造函數(shù)。constructor方法是類的默認(rèn)方法，通過new命令生成對象實(shí)例時，自動調(diào)用該方法。一個類必須有constructor方法，如果沒有定義，constructor方法會被默認(rèn)添加。

在派生類中，如果使用了構(gòu)造方法，且用到了this，就必須使用super()，且super()也只能在派生類中使用，在構(gòu)造函數(shù)中訪問之前一定要調(diào)用super()，它此時代表父類的構(gòu)造函數(shù)，負(fù)責(zé)this的初始化。super作為對象時，在普通方法中，指向父類的原型對象；在靜態(tài)方法中，指向父類。

A.3.函數(shù)

訪問器屬性：類支持在原型上定義訪問器屬性。盡管應(yīng)該在類的構(gòu)造函數(shù)中創(chuàng)建自己的屬性，但是類也支持直接在原型上定義訪問器屬性。創(chuàng)建getter時，需要在關(guān)鍵字get后緊跟一個空格和響應(yīng)的標(biāo)識符；創(chuàng)建setter時，只需把關(guān)鍵字get替換為set即可。

計算屬性名稱：類和對象字面量有很多相似之處，類方法和訪問器屬性也支持使用可計算名稱，用方括號包裹一個表達(dá)式，即使用計算名稱。

A.4.繼承

extends關(guān)鍵字后只要是一個有prototype屬性的函數(shù)，就能被繼承，至于原型鏈相關(guān)的知識點(diǎn)這里就不贅述了，不清楚的同學(xué)可以參考博客四，這里順便聊一下JS中常見的繼承方式。

原型鏈繼承：父類的實(shí)例作為子類的原型，優(yōu)點(diǎn)是簡單易于實(shí)現(xiàn)，父類的新增的實(shí)例與屬性子類都能訪問；缺點(diǎn)是可以在子類中增加實(shí)例屬性，如果要新增加原型屬性和方法需要在new父類構(gòu)造函數(shù)的后面，無法實(shí)現(xiàn)多繼承，創(chuàng)建子類實(shí)例時，不能向父類構(gòu)造函數(shù)中傳參數(shù)。

構(gòu)造繼承：復(fù)制父類的實(shí)例屬性給子類，優(yōu)點(diǎn)是解決了子類構(gòu)造函數(shù)向父類構(gòu)造函數(shù)中傳遞參數(shù)，可以實(shí)現(xiàn)多繼承（call或者apply多個父類）；缺點(diǎn)是方法都在構(gòu)造函數(shù)中定義，無法復(fù)用，不能繼承原型屬性/方法，只能繼承父類的實(shí)例屬性和方法。

組合繼承（原型鏈+構(gòu)造函數(shù)）：調(diào)用父類構(gòu)造函數(shù)，繼承父類的屬性，通過將父類實(shí)例作為子類原型，實(shí)現(xiàn)函數(shù)復(fù)用。優(yōu)點(diǎn)是函數(shù)可以復(fù)用，不存在引用屬性問題，可以繼承屬性和方法，并且可以繼承原型的屬性和方法；缺點(diǎn)是由于調(diào)用了兩次父類，所以產(chǎn)生了兩份實(shí)例。

寄生組合繼承：通過寄生的方式來修復(fù)組合式繼承的不足，完美的實(shí)現(xiàn)繼承

實(shí)例繼承：優(yōu)點(diǎn)是不限制調(diào)用方式，簡單，易實(shí)現(xiàn)；缺點(diǎn)是不能多次繼承 。

ES6繼承方式：最優(yōu)

5.Promise

Promise構(gòu)造函數(shù)內(nèi)是同步任務(wù)，then方法中屬于異步任務(wù)的微任務(wù)。Promise的狀態(tài)有三個值：pending、resolve、rejected，且Promise的狀態(tài)只會發(fā)生一次改變。接下來，我們先看一下Promise的基礎(chǔ)用法：

Promise.all():用于多次請求，不過如果出現(xiàn)一個接口請求異常，整個Promise.all就會被認(rèn)定為失敗，進(jìn)入catch回調(diào)。

Promise.race():與Promise.all()返回全部數(shù)據(jù)不同，Promise.race()上面代碼中，只要有一個實(shí)例率先改變狀態(tài)，狀態(tài)就跟著改變，返回的為率先改變的Promise實(shí)例的返回值。

1.Promise執(zhí)行順序

先看一下常見的Promise所對應(yīng)的面試題來了解執(zhí)行順序：

2.手寫promise

手寫Promise是高頻面試題，特別是在筆試題中，同時通過手寫Promise也有助于我們進(jìn)一步理解認(rèn)識Promise，參考資料：https://juejin.cn/post/7175516630972104760#heading-6

6.async/await

async/await其實(shí)是Promise的語法糖，它是為優(yōu)化then鏈而開發(fā)出來的。它能實(shí)現(xiàn)的效果都能用then來實(shí)現(xiàn)， 可以視await后面的方法為Promise的構(gòu)造函數(shù)，之后的代碼等同于then回調(diào)。

async的用法，它作為一個關(guān)鍵字放到函數(shù)前面，表示函數(shù)是一個異步函數(shù)，async函數(shù)返回的是一個promise對象，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

await?后面應(yīng)該寫一個Promise對象，如果不是Promise對象，那么會被轉(zhuǎn)成一個立即resolve的Promise（Promise.resolve()）。 await 命令后面的Promise對象，運(yùn)行結(jié)果可能是rejected，所以最好把a(bǔ)wait命令放在 try...catch 代碼塊中。

樣例：

主要應(yīng)用場景：

樣例1：需要等待接口一步步執(zhí)行

樣例2：只需要單個接口等待，其他接口可以異步

7.閉包

在JavaScript高級程序設(shè)計（第3版）中是這樣描述閉包：閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。

閉包作用：閉包既可以長久的保存變量又不會造成全局污染。

閉包缺點(diǎn)：占用更多內(nèi)存；不容易被釋放，不會隨著函數(shù)的結(jié)束而自動銷毀。

閉包用法：

1、定義外層函數(shù)，封裝被保護(hù)的局部變量。

2、定義內(nèi)層函數(shù)，執(zhí)行對外部函數(shù)變量的操作。

3、外層函數(shù)返回內(nèi)層函數(shù)的對象，并且外層函數(shù)被調(diào)用，結(jié)果保存在一個全局的變量中。

8.遞歸

簡單來說，所謂的遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用n次本函數(shù)，直到達(dá)到某個條件從而停止。

遞歸應(yīng)用的場景需要具備以下三種要素：

1、存在遞歸終止條件：遞歸出口

2、一個問題可以分解為更小的問題用同樣的方法解決：遞歸表達(dá)式(規(guī)律)

3、分解后的子問題求解方式一樣，不同的是數(shù)據(jù)規(guī)模變小

9.高階函數(shù)

高階函數(shù)是指至少滿足下列條件之一的函數(shù)：

1、函數(shù)可以作為參數(shù)被傳遞

2、函數(shù)可以作為返回值輸出。

所以一個函數(shù)就可以接收另一個函數(shù)作為參數(shù)，這種函數(shù)就稱之為高階函數(shù)。

最常用的高階函數(shù)，即我們?nèi)粘＝涌谒玫幕卣{(diào)或者是對數(shù)據(jù)的使用，比如map、reduce、filter、sort 或如下：

最后

走過路過，不要錯過，點(diǎn)贊、收藏、評論三連~