不論你是javascript新手還是老鳥(niǎo)蒙袍，不論是面試求職澡罚，還是日常開(kāi)發(fā)工作概页，我們經(jīng)常會(huì)遇到這樣的情況：給定的幾行代碼玩郊，我們需要知道其輸出內(nèi)容和順序肢执。因?yàn)閖avascript是一門單線程語(yǔ)言，所以我們可以得出結(jié)論：

各位小伙伴在進(jìn)階的時(shí)候總會(huì)遇到一些問(wèn)題和瓶頸译红，業(yè)務(wù)代碼寫(xiě)多了沒(méi)有方向感预茄，不知道該從那里入手去提升，對(duì)此我整理了一些資料侦厚，包括但不限于HTML/CSS/javaScript/Vue等多個(gè)知識(shí)點(diǎn)高級(jí)進(jìn)階干貨需要的可以免費(fèi)分享給大家耻陕，有需要者請(qǐng)進(jìn)群點(diǎn)擊進(jìn)入1045267283

一個(gè)前端基礎(chǔ)需要掌握的 28 個(gè) JavaScript 技巧（第一章）

14. 實(shí)現(xiàn)函數(shù) bind 方法

實(shí)現(xiàn)函數(shù)的 bind 方法核心是利用 call 綁定 this 指向，同時(shí)考慮了一些其他情況刨沦，例如

bind 返回的函數(shù)被 new 調(diào)用作為構(gòu)造函數(shù)時(shí)诗宣，綁定的值會(huì)失效并且改為 new 指定的對(duì)象

定義了綁定后函數(shù)的 length 屬性和 name 屬性（不可枚舉屬性）

綁定后函數(shù)的 prototype 需指向原函數(shù)的 prototype（真實(shí)情況中綁定后的函數(shù)是沒(méi)有 prototype 的，取而代之在綁定后的函數(shù)中有個(gè) 內(nèi)部屬性 [[TargetFunction]] 保存原函數(shù)已卷，當(dāng)將綁定后函數(shù)作為構(gòu)造函數(shù)時(shí)梧田，將創(chuàng)建的實(shí)例的 __proto__ 指向 [[TargetFunction]] 的 prototype，這里無(wú)法模擬內(nèi)部屬性侧蘸，所以直接聲明了一個(gè) prototype 屬性）

15. 實(shí)現(xiàn)函數(shù) call 方法

原理就是將函數(shù)作為傳入的上下文參數(shù)（context）的屬性執(zhí)行裁眯，這里為了防止屬性沖突使用了 ES6 的 Symbol 類型

16. 簡(jiǎn)易的 CO 模塊

使用方法：

run 函數(shù)接受一個(gè)生成器函數(shù)，每當(dāng) run 函數(shù)包裹的生成器函數(shù)遇到 yield 關(guān)鍵字就會(huì)停止讳癌，當(dāng) yield 后面的 promise 被解析成功后會(huì)自動(dòng)調(diào)用 next 方法執(zhí)行到下個(gè) yield 關(guān)鍵字處穿稳，最終就會(huì)形成每當(dāng)一個(gè) promise 被解析成功就會(huì)解析下個(gè) promise，當(dāng)全部解析成功后打印所有解析的結(jié)果晌坤，衍變?yōu)楝F(xiàn)在用的最多的 async/await 語(yǔ)法

17. 函數(shù)防抖

leading 為是否在進(jìn)入時(shí)立即執(zhí)行一次逢艘，原理是利用定時(shí)器旦袋，如果在規(guī)定時(shí)間內(nèi)再次觸發(fā)事件會(huì)將上次的定時(shí)器清除，即不會(huì)執(zhí)行函數(shù)并重新設(shè)置一個(gè)新的定時(shí)器它改，直到超過(guò)規(guī)定時(shí)間自動(dòng)觸發(fā)定時(shí)器中的函數(shù)

同時(shí)通過(guò)閉包向外暴露了一個(gè) cancel 函數(shù)疤孕，使得外部能直接清除內(nèi)部的計(jì)數(shù)器

18. 函數(shù)節(jié)流

和函數(shù)防抖類似，區(qū)別在于內(nèi)部額外使用了時(shí)間戳作為判斷央拖，在一段時(shí)間內(nèi)沒(méi)有觸發(fā)事件才允許下次事件觸發(fā)祭阀，同時(shí)新增了 trailing 選項(xiàng)，表示是否在最后額外觸發(fā)一次

19. 圖片懶加載

getBoundClientRect 的實(shí)現(xiàn)方式鲜戒，監(jiān)聽(tīng) scroll 事件（建議給監(jiān)聽(tīng)事件添加節(jié)流）专控，圖片加載完會(huì)從 img 標(biāo)簽組成的 DOM 列表中刪除，最后所有的圖片加載完畢后需要解綁監(jiān)聽(tīng)事件

intersectionObserver 的實(shí)現(xiàn)方式遏餐，實(shí)例化一個(gè) IntersectionObserver 伦腐，并使其觀察所有 img 標(biāo)簽

當(dāng) img 標(biāo)簽進(jìn)入可視區(qū)域時(shí)會(huì)執(zhí)行實(shí)例化時(shí)的回調(diào)，同時(shí)給回調(diào)傳入一個(gè) entries 參數(shù)失都，保存著實(shí)例觀察的所有元素的一些狀態(tài)柏蘑，比如每個(gè)元素的邊界信息，當(dāng)前元素對(duì)應(yīng)的 DOM 節(jié)點(diǎn)嗅剖，當(dāng)前元素進(jìn)入可視區(qū)域的比率辩越，每當(dāng)一個(gè)元素進(jìn)入可視區(qū)域，將真正的圖片賦值給當(dāng)前 img 標(biāo)簽信粮，同時(shí)解除對(duì)其的觀察

20. new 關(guān)鍵字

21. 實(shí)現(xiàn) Object.assign

22. instanceof

原理是遞歸遍歷 right 參數(shù)的原型鏈黔攒，每次和 left 參數(shù)作比較，遍歷到原型鏈終點(diǎn)時(shí)則返回 false强缘，找到則返回 true

23. 私有變量的實(shí)現(xiàn)

使用 Proxy 代理所有含有?_?開(kāi)頭的變量督惰，使其不可被外部訪問(wèn)

通過(guò)閉包的形式保存私有變量，缺點(diǎn)在于類的所有實(shí)例訪問(wèn)的都是同一個(gè)私有變量

另一種閉包的實(shí)現(xiàn)旅掂，解決了上面那種閉包的缺點(diǎn)赏胚，每個(gè)實(shí)例都有各自的私有變量，缺點(diǎn)是舍棄了 class 語(yǔ)法的簡(jiǎn)潔性商虐，將所有的特權(quán)方法（訪問(wèn)私有變量的方法）都保存在構(gòu)造函數(shù)中

通過(guò) WeakMap 和閉包觉阅，在每次實(shí)例化時(shí)保存當(dāng)前實(shí)例和所有私有變量組成的對(duì)象，外部無(wú)法訪問(wèn)閉包中的 WeakMap秘车，使用 WeakMap 好處在于當(dāng)沒(méi)有變量引用到某個(gè)實(shí)例時(shí)典勇，會(huì)自動(dòng)釋放這個(gè)實(shí)例保存的私有變量，減少內(nèi)存溢出的問(wèn)題

24. 洗牌算法

早前的 chrome 對(duì)于元素小于 10 的數(shù)組會(huì)采用插入排序叮趴，這會(huì)導(dǎo)致對(duì)數(shù)組進(jìn)行的亂序并不是真正的亂序割笙，即使最新的版本 chrome 采用了原地算法使得排序變成了一個(gè)穩(wěn)定的算法，對(duì)于亂序的問(wèn)題仍沒(méi)有解決

通過(guò)洗牌算法可以達(dá)到真正的亂序眯亦，洗牌算法分為原地和非原地伤溉，圖一是原地的洗牌算法般码，不需要聲明額外的數(shù)組從而更加節(jié)約內(nèi)存占用率，原理是依次遍歷數(shù)組的元素乱顾，將當(dāng)前元素和之后的所有元素中隨機(jī)選取一個(gè)板祝，進(jìn)行交換

25. 單例模式

通過(guò) ES6 的 Proxy 攔截構(gòu)造函數(shù)的執(zhí)行方法來(lái)實(shí)現(xiàn)的單例模式

26. promisify

使用方法：

promisify 函數(shù)是將回調(diào)函數(shù)變?yōu)?promise 的輔助函數(shù)，適合 error-first 風(fēng)格（nodejs）的回調(diào)函數(shù)糯耍，原理是給 error-first 風(fēng)格的回調(diào)無(wú)論成功或者失敗扔字，在執(zhí)行完畢后都會(huì)執(zhí)行最后一個(gè)回調(diào)函數(shù)，我們需要做的就是讓這個(gè)回調(diào)函數(shù)控制 promise 的狀態(tài)即可

這里還用了 Proxy 代理了整個(gè) fs 模塊温技，攔截 get 方法，使得不需要手動(dòng)給 fs 模塊所有的方法都包裹一層 promisify 函數(shù)扭粱，更加的靈活

27. 優(yōu)雅的處理 async/await

使用方法：

無(wú)需每次使用 async/await 都包裹一層 try/catch 舵鳞，更加的優(yōu)雅，這里提供另外一個(gè)思路琢蛤，如果使用了 webpack 可以編寫(xiě)一個(gè) loader蜓堕，分析 AST 語(yǔ)法樹(shù)，遇到 await 語(yǔ)法博其，自動(dòng)注入 try/catch套才，這樣連輔助函數(shù)都不需要使用

28. 發(fā)布訂閱 EventEmitter

通過(guò) on 方法注冊(cè)事件，trigger 方法觸發(fā)事件慕淡，來(lái)達(dá)到事件之間的松散解耦背伴，并且額外添加了 once 和 off 輔助函數(shù)用于注冊(cè)只觸發(fā)一次的事件以及注銷事件

29. 實(shí)現(xiàn) JSON.stringify（附加）

使用 JSON.stringify 將對(duì)象轉(zhuǎn)為 JSON 字符串時(shí)，一些非法的數(shù)據(jù)類型會(huì)失真峰髓，主要表現(xiàn)如下

如果對(duì)象含有 toJSON 方法會(huì)調(diào)用 toJSON

在數(shù)組中

存在 Undefined/Symbol/Function 數(shù)據(jù)類型時(shí)會(huì)變?yōu)?null

存在 Infinity/NaN 也會(huì)變成 null

在對(duì)象中

屬性值為 Undefined/Symbol/Function 數(shù)據(jù)類型時(shí)傻寂，屬性和值都不會(huì)轉(zhuǎn)為字符串

屬性值為 Infinity/NaN ，屬性值會(huì)變?yōu)?null

日期數(shù)據(jù)類型的值會(huì)調(diào)用 toISOString

非數(shù)組/對(duì)象/函數(shù)/日期的復(fù)雜數(shù)據(jù)類型會(huì)變成一個(gè)空對(duì)象

循環(huán)引用會(huì)拋出錯(cuò)誤

相關(guān)CSS知識(shí)點(diǎn)：這一次讓你徹底弄懂 JavaScript 執(zhí)行機(jī)制

在此小編再次感謝大家對(duì)我的支持携兵，需要更多相關(guān)資料疾掰，視頻請(qǐng)加群點(diǎn)擊進(jìn)入1045267283