摘要

馬上就要畢業(yè)啦，沒有參加2023年的秋招，準備在最近開始找全職或者實習工作，然后也馬上過年了，總結(jié)和理一下自己的知識要點，參加2024年的春招。

1. JS的執(zhí)行流程

1. 瀏覽器的V8引擎收到到執(zhí)行的JS代碼
2. V8結(jié)構(gòu)化這段代碼，生成AST（抽象語法樹），同時生成相關(guān)作用域
3. 生成字節(jié)碼（介于AST和機器碼之間）
4. 解釋器，按照順序執(zhí)行字節(jié)碼，并輸出執(zhí)行結(jié)果

JS代碼流程：先編譯后執(zhí)行

2. 基本數(shù)據(jù)類型

• undefined
• null
• Boolean
• String
• Number
• Symbol
• BigInt
• Object：只有他存在堆里面

3. 判斷數(shù)據(jù)類型的方式（TTIC）

1. typeof：判斷基本數(shù)據(jù)類型，判斷null時，會返回object
2. Object.prototype.toString.call(xx)：返回一個[object 數(shù)據(jù)類型]
3. instanceof：A instanceof B ：判斷A和B是否有血緣關(guān)系，不僅僅根據(jù)父子關(guān)系。
4. constructor

4. ES6的新特性

1. const和let
2. 解構(gòu)賦值
3. 模板字符串
4. 函數(shù)的擴展：默認值、rest參數(shù)、函頭函數(shù)
5. 數(shù)組的拓展：Array.from()將類數(shù)組轉(zhuǎn)換為數(shù)組、find()、findIndex()、entries()、keys()、values()，includes()
6. 對象擴展：屬性名可以用表達式、Object.assign()、Object.keys()、Object.values()、Object.entries()
7. Symbol
8. Set、Map
9. Promise
10. Iterator和for…of
11. Generator 和 async await

箭頭函數(shù)和普通函數(shù)

1. 語法更加簡潔清晰
2. 箭頭函數(shù)沒有 prototype、所以箭頭函數(shù)沒有this
3. 箭頭函數(shù)不會創(chuàng)建自己的this，會自動繼承最外層的this
4. call | apply | bind 無法改變箭頭指向
5. 箭頭函數(shù)不能作為構(gòu)造函數(shù)
6. 箭頭函數(shù)不綁定arguments，用rest(…)取代，來訪問箭頭函數(shù)列表
7. 箭頭函數(shù)不用用作Generator，不能使用yield關(guān)鍵字

5. Promise 和 async/await

Promise

Promise對象為了解決回調(diào)地獄而提出，不是新的語法功能，而是一種新的寫法，允許將回調(diào)函數(shù)嵌套，改成鏈式調(diào)用

流程：

1. Promise 接受一個executor()，在new的時候立刻執(zhí)行
2. executor()內(nèi)部的異步任務(wù)被放入宏\微任務(wù)，等待執(zhí)行
3. then，收集\失敗回調(diào)
4. executor的異步任務(wù)被執(zhí)行，觸發(fā)resolve\reject，從失敗和成功隊列中取出依次執(zhí)行。

其實是設(shè)計模式中的一種觀察者模式：

1. 收集依賴 （then收集）
2. 觸發(fā)通知 （觸發(fā)resolve）
3. 取出依賴執(zhí)行 （ resolve執(zhí)行）

async await

是對Generator（生成器）的封裝，是個語法糖

*/yield和async/await的區(qū)別：

1. async/await自帶執(zhí)行器，不需要next()就能下一步
2. async 返回的是Promise對象，而Generator返回的是生成器對象
3. await能夠返回Promise的 reject/resolve的值

注意：無論await后面跟的什么，后面的代碼都會被阻塞

和Promise區(qū)別

Promise解決了回調(diào)地獄，但是他的語法問題縱向發(fā)展形成了一個回調(diào)鏈，遇到復(fù)雜的業(yè)務(wù)場景，這樣的語法顯然是不美觀的。
async await看起來簡潔一些，看起來像同步代碼，其實它出現(xiàn)的意義就是提供異步的效果
兩者其實都是非阻塞的

6. Generator

核心： 保存上下文，函數(shù)在真正意義中沒有被掛起，每一次yield，其實都執(zhí)行了一邊生成器函數(shù)、在這個過程中用了一個context存儲上下文，每次執(zhí)行生成器函數(shù)的時候，都可以從上一個執(zhí)行結(jié)果開始執(zhí)行。

用babel編譯后生成regeneratorRuntime

1. mark()方法為生成器函數(shù)綁定了一系列原型
2. wrap() 相當于給Generator增加一個_invoke 方法

7. 迭代器

模式： 可以把有些結(jié)構(gòu)稱為可迭代對象，它們正式實現(xiàn)了Iterable接口，可以通過迭代器消費，是按需創(chuàng)建的一次性對象，每個迭代器都會關(guān)聯(lián)一個可迭代對象

協(xié)議： 可迭代協(xié)議需要具備兩種能力

1. 支持迭代的自我識別能力
2. 創(chuàng)建實現(xiàn)Iterator接口的對象的能力

是一次性使用對象，用于迭代與其關(guān)聯(lián)的可迭代對象

迭代器api提供一個next()方法，這個方法會返回兩個屬性：

1. done：是否還能取得下個值
2. value：可迭代對象下一個值

默認實現(xiàn)了Iterable的類型

1. String
2. Array
3. Map
4. Set
5. arguments
6. NodeList等Dom集合類型

接受可迭代對象的原生語言特性包括

1. for of
2. 數(shù)組結(jié)構(gòu)
3. 擴展操作符
4. Array.from()
5. Set
6. Map
7. Promise.all()
8. Promise.race()
9. yield

8. 設(shè)計模式

三類：（C5S7B11）

1. 創(chuàng)建型模式：五種： 工廠方法、抽象工廠、單例、建造則、原型
2. **結(jié)構(gòu)型模式：七種：**適配器、裝飾器、代理、外觀、橋接、組合、享元
3. **行為型模式：十一種：**策略、模板方法、觀察者(發(fā)布訂閱)、迭代子、責任鏈、命令、備忘錄、狀態(tài)、訪問者、中介者、模板方法、解釋器

9. WebGL

Canvas 是畫布一般可以獲取2D上下文和3D上下文，3D上下文一般就是WebGL，當然WebGL也能用于2D繪制，并且WebGL提供硬件渲染加速，性能更好。但是支持性不是特別好，在不支持的情況下最好還是用Canvas，可以用一些兜底的庫，如threehs、PIXI等

10. CommonJS和ES6 Module

首先，CommonJS是同步加載，ES6是異步加載，前者主要用于Node.js服務(wù)端編程，模塊文件一般已經(jīng)存在于本地硬盤，所以記載比較快。而后者是異步加載所以適用于瀏覽器，不會造成堵塞。

其次，CommonJS模塊輸出的是一個值的拷貝，也就是說一旦輸出一個值，模塊內(nèi)部變化就影響不到這個值，ES6模塊輸出的是值的引用，V8引擎在對JS進行靜態(tài)分析的時候，遇到import命令，會等到腳本真正執(zhí)行時，才回到被加載模塊中取值。

最后，前者是運行時加載，后者是編譯時輸出接口

注意：CommonJS不適用于瀏覽器

11. 聲明變量的方式

ES5

• var
• function

ES6

• let
• const
• import
• class

12. 函數(shù)聲明

• function fn(…args) {}
• var fn = function(…args){}
• new Function(‘x’,‘y’,‘return x+y’)

13. Object/Map/WeakMap區(qū)別

Map是ES6提供的一種新特性，是一種鍵不局限于字符串的一種鍵值對集合，對于Object來說他的鍵只能使用字符串。

WeakMap結(jié)構(gòu)和Map有點類似，但是有兩點區(qū)別：

1. 他只接受對象為鍵（null除外）
2. 鍵名所指向的對象，不計入垃圾回收機制

總之，WeakMap專用場合就是，它的鍵所對應(yīng)的對象，可能會在將來消失，WeakMap結(jié)構(gòu)有助于防止內(nèi)存泄露。

14. JS深淺復(fù)制

淺復(fù)制

1. 擴展運算符
2. Object.assign()
3. Object,getOwnPropertyDescriptors()+Object.defineProperties()

深復(fù)制

1. 通過嵌套擴展運算符
2. 使用JSON
3. 手動實現(xiàn)（FHT）
   1. 利用for-in對對象的屬性進行遍歷（自身屬性+繼承屬性)
   2. source.hasOwnProperty(i)判斷是否非繼承和可枚舉類型
   3. typoeof source[i]==='object判斷值的類型，如果是對象，遞歸處理

15. 閉包

閉包就是在JS種，根據(jù)語法作用域規(guī)則，內(nèi)部函數(shù)總是可以訪問到其外部函數(shù)中聲明的變量，當通過調(diào)用一個外部函數(shù)返回一個內(nèi)部函數(shù)后，即使該外部函數(shù)已經(jīng)執(zhí)行結(jié)束了。但是內(nèi)部函數(shù)引用外部函數(shù)的變量依然保存在內(nèi)存中，就把這些變量的集合成為閉包。

16. Event Loop

也就是事件循環(huán)，會不聽從微/宏任務(wù)隊列中取出對應(yīng)任務(wù)的循環(huán)函數(shù)。在某種情況中，你可以把它稱為一個永動機。這些它取出的任務(wù)并將其推送到調(diào)用棧種執(zhí)行，主要有四個主要步驟：

1. 執(zhí)行Scirpt：用同步的方式執(zhí)行script，直到調(diào)用?？?/code>才停下來。（還會執(zhí)行預(yù)編譯操作。如：變量提升）
2. 執(zhí)行一個宏任務(wù)：挑選最老的到調(diào)用棧中執(zhí)行，直到調(diào)用棧為空
3. 執(zhí)行所有微任務(wù)：挑選最老的到調(diào)用棧中執(zhí)行，直到調(diào)用棧為空。（但是，繼續(xù)從微任務(wù)隊列種獲取最老的執(zhí)行。重復(fù)）
4. UI渲染：然后跳到第二步，挑選宏任務(wù)執(zhí)行。

let bar = {myName : " mango ",test1 : 1
}
function foo(){this.myName = " test "
}
foo.call(bar)
console.log(bar) // mango
console.log(myName)  // not defined