轉(zhuǎn)自：進階 JavaScript 必知的 33 個點【進階必備】

進階 JavaScript 必知的 33 個點【進階必備】

Original?前端小菜雞之菜雞互啄?前端開發(fā)愛好者?2022-04-11 08:32

收錄于話題#javaScript進階1個

點擊下方“前端開發(fā)愛好者”，選擇“設(shè)為星標(biāo)”

第一時間關(guān)注技術(shù)干貨！

前端開發(fā)愛好者

分享 web 前端相關(guān)技術(shù)文章、工具資源、精選課程、視頻教程資源、熱點資訊

56篇原創(chuàng)內(nèi)容

Official Account

哈嘍,大家好 我是xy👨🏻?💻。試問有多少人敢在自己的簡歷上寫下?精通JavaScript?的，起碼我是不敢這樣寫的 😂。

簡介

這篇文章主要是為了幫助開發(fā)者掌握?JavaScript?概念而創(chuàng)立的。它不是必備，但在未來學(xué)習(xí)（JavaScript）中，可以作為一篇指南。

本文翻譯自 原作者：@leonardomso??

英文地址：https://github.com/leonardomso/33-js-concepts

目錄

調(diào)用堆棧

原始類型

值類型和引用類型

隱式, 顯式, 名義和鴨子類型

== 與 ===, typeof 與 instanceof

this, call, apply 和 bind

函數(shù)作用域, 塊級作用域和詞法作用域

閉包

map, reduce, filter 等高階函數(shù)

表達式和語句

變量提升

Promise

立即執(zhí)行函數(shù), 模塊化, 命名空間

遞歸

算法

數(shù)據(jù)結(jié)構(gòu)

消息隊列和事件循環(huán)

setTimeout, setInterval 和 requestAnimationFrame

繼承, 多態(tài)和代碼復(fù)用

按位操作符, 類數(shù)組對象和類型化數(shù)組

DOM 樹和渲染過程

new 與構(gòu)造函數(shù), instanceof 與實例

原型繼承與原型鏈

Object.create 和 Object.assign

工廠函數(shù)和類

設(shè)計模式

Memoization

純函數(shù), 函數(shù)副作用和狀態(tài)變化

耗性能操作和時間復(fù)雜度

JavaScript 引擎

二進制, 十進制, 十六進制, 科學(xué)記數(shù)法

偏函數(shù), 柯里化, Compose 和 Pipe

代碼整潔之道

1. 調(diào)用堆棧

文章

• 📖?Call Stack — MDN(https://developer.mozilla.org/zh-CN/docs/Glossary/Call_stack)

• 📖?[譯] JavaScript 如何工作：對引擎、運行時、調(diào)用堆棧的概述 —— 掘金(https://juejin.im/post/5a05b4576fb9a04519690d42)

• 📖?[譯] 理解 JavaScript 中的執(zhí)行上下文和執(zhí)行棧 —— 掘金(https://juejin.im/post/5ba32171f265da0ab719a6d7)

• 📖?這一次，徹底弄懂 JavaScript 執(zhí)行機制 —— 掘金(https://juejin.im/post/59e85eebf265da430d571f89)

• 📖?解讀 JavaScript 之引擎、運行時和堆棧調(diào)用 —— 開源中國(https://www.oschina.net/translate/how-does-javascript-actually-work-part-1)

• 📖?Tasks, microtasks, queues and schedules —— Jake Archibald：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

• 📖?Tasks, microtasks, queues and schedules（譯） —— 掘金(https://juejin.im/entry/55dbd51a60b2f3a92a8f5bff)

視頻

• 📺?What is the event loop anyway? —— 騰訊視頻(英文字幕)(https://v.qq.com/x/page/h0372bld8re.html?ptag=qqbrowser)

• 📺?Understanding The JavaScript Call Stack, Event Queue, Event Table, & Event Loop —— Bilibili(https://www.bilibili.com/video/av33824933/)

• 📺?JS 中的變量提升、堆棧內(nèi)存及閉包詳解 —— Acfun(http://www.acfun.cn/v/ac4495641)

• 📺?事件循環(huán)模型 —— PHP 中文網(wǎng)(http://www.php.cn/code/21194.html)

• 📺?Javascript: the Call Stack explained — Coding Blocks India(https://www.youtube.com/watch?v=w6QGEiQceOM)

• 📺?The JS Call Stack Explained In 9 Minutes — Colt Steele(https://www.youtube.com/watch?v=W8AeMrVtFLY)

• 📺?JavaScript Execution Stack — Codecademy(https://www.youtube.com/watch?v=jT0USJeNFEA)

• 📺?What is the Call Stack? — Eric Traub(https://www.youtube.com/watch?v=w7QWQlkLY_s)

• 📺?The Call Stack — Kevin Drumm(https://www.youtube.com/watch?v=Q2sFmqvpBe0)

• 📺?Understanding JavaScript Execution — Codesmith(https://www.youtube.com/watch?v=Z6a1cLyq7Ac&list=PLWrQZnG8l0E4kd1T_nyuVoxQUaYEWFgcD)

• 📺?Call Stack & Event Loop — movies com(https://www.youtube.com/watch?v=mk0lu9MKBto)

2. 原始類型

文章

• 📖?原始數(shù)據(jù) —— MDN(https://developer.mozilla.org/zh-CN/docs/Glossary/Primitive)

• 📖?[譯]JavaScript 是怎樣編碼數(shù)字的 —— SegmentFault(https://segmentfault.com/a/1190000017090272)

• 📖?每一個 JavaScript 開發(fā)者應(yīng)該了解的浮點知識 —— 顏海鏡(https://yanhaijing.com/javascript/2014/03/14/what-every-javascript-developer-should-know-about-floating-points/)

• 📖?JavaScript 標(biāo)準(zhǔn)參考教程(基本語法之?dāng)?shù)值) —— 阮一峰(https://wangdoc.com/javascript/types/number.html)

• 📖?The Secret Life of JavaScript Primitives —— Angus Croll(https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/)

視頻

• 📺?javascript 六種數(shù)據(jù)類型 —— 慕課網(wǎng)(https://www.imooc.com/video/5674)

• 📺?javascript 視頻教程(數(shù)據(jù)類型) —— PHP 中文網(wǎng)(http://www.php.cn/code/5808.html)

• 📺?JavaScript Reference vs Primitive Types — Academind(https://www.youtube.com/watch?v=9ooYYRLdg_g)

• 📺?JavaScript Primitive Types — Simon Sez IT(https://www.youtube.com/watch?v=HsbWQsSCE5Y)

• 📺?Javascript Primitive and Reference Types — Baljeet Singh(https://www.youtube.com/watch?v=F7YbhKbpFic)

• 📺?Value Types and Reference Types in JavaScript — Programming with Mosh(https://www.youtube.com/watch?v=e-_mDyqm2oU)

• 📺?JavaScript Primitive Data Types — Avelx(https://www.youtube.com/watch?v=qw3j0A3DIzQ)

• 📺?Everything you never wanted to know about JavaScript numbers — Bartek Szopka(https://www.youtube.com/watch?v=MqHDDtVYJRI)

3. 值類型和引用類型

文章

• 📖?ECMAScript 引用類型 —— W3school(http://www.w3school.com.cn/js/pro_js_referencetypes.asp)

• 📖?js 中的值類型和引用類型的區(qū)別 —— 博客園(https://www.cnblogs.com/leiting/p/8081413.html)

• 📖?JavaScript 的值傳遞和引用傳遞 —— FunDebug(https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/)

• 📖?Primitive Types & Reference Types in JavaScript —— Bran van der Meer(https://docstore.mik.ua/orelly/webprog/jscript/ch04_04.htm)

• 📖?JavaScript: Passing by Value or by Reference —— CSDN(https://blog.csdn.net/xiaojia_boke/article/details/54906509)

• 📖?js 值引用和值復(fù)制 —— SegmentFault(https://segmentfault.com/a/1190000015411195)

• 📖?js- 引用和復(fù)制(傳值和傳址) —— CSDN(https://blog.csdn.net/zzzaquarius/article/details/4902235)

視頻

• 📺?Javascript Pass by Value vs Pass by Reference — techsith(https://www.youtube.com/watch?v=E-dAnFdq8k8)

• 📺?JavaScript Value vs Reference Types — Programming with Mosh(https://www.youtube.com/watch?v=fD0t_DKREbE)

4. 隱式, 顯式, 名義和鴨子類型

文章

• 📖?ECMAScript 類型轉(zhuǎn)換 —— W3school(http://www.w3school.com.cn/js/pro_js_typeconversion.asp)

• 📖?JavaScript 的怪癖 1：隱式類型轉(zhuǎn)換 —— justjavac(http://justjavac.com/javascript/2013/04/08/javascript-quirk-1-implicit-conversion-of-values.html)

• 📖?JavaScript 運算符規(guī)則與隱式類型轉(zhuǎn)換詳解 —— 掘金(https://juejin.im/post/59ad2585f265da246a20e026)

• 📖?聊一聊 JS 中的隱式類型轉(zhuǎn)換 —— SegmentFault(https://segmentfault.com/a/1190000004482388)

• 📖?有趣的 JavaScript 隱式類型轉(zhuǎn)換 —— 博客園(https://www.cnblogs.com/yugege/p/5277883.html)

• 📖?JavaScript 顯式類型轉(zhuǎn)換與隱式類型轉(zhuǎn)換 —— CSDN(https://blog.csdn.net/yangjvn/article/details/48284163)

• 📖?你不知道的 JavaScript（中卷）強制類型轉(zhuǎn)換 —— 簡書(https://www.jianshu.com/p/777a89b4ed9a)

• 📖?你懂 JavaScript 嗎？#8 強制轉(zhuǎn)型 —— cythilya(https://ithelp.ithome.com.tw/articles/10201512)

• 📖?動態(tài)類型語言和鴨子類型 —— 曾探(http://book.51cto.com/art/201505/475153.htm)

• 📖?Nominal & Structural Typing —— flow(https://flow.org/en/docs/lang/nominal-structural/)

• 📖?What exactly is Type Coercion in Javascript? —— stackoverflow(https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript)

• 📖?You Don't Know JS: Types & Grammar —— github(https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/ch4.md)

視頻

• 📺?javascript 隱式轉(zhuǎn)換 —— 慕課網(wǎng)(https://www.imooc.com/video/5675)

• 📺?Javascript 基礎(chǔ)加強-類型轉(zhuǎn)換 —— 黑馬程序員(http://www.le.com/ptv/vplay/27767009.html)

5. == vs ===, typeof vs instanceof

文章

• 📖?JavaScript 中的相等性判斷 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness)

• 📖?js 中 == 和 === 的區(qū)別 —— 掘金(https://juejin.im/entry/584918612f301e005716add6)

• 📖?== vs === in Javascript —— CSDN(https://blog.csdn.net/w97531/article/details/82255225)

• 📖?深入理解 javascript 之 typeof 和 instanceof —— CSDN(https://blog.csdn.net/mevicky/article/details/50353881)

• 📖?JavaScript 的 typeof 的用途 —— justjavac(http://justjavac.com/javascript/2012/12/23/what-is-javascripts-typeof-operator-used-for.html)

• 📖?一張圖看懂 Function 和 Object 的關(guān)系及簡述 instanceof 運算符 —— 掘金(https://juejin.im/post/58358606570c35005e4142bd)

• 📖?淺談 instanceof 和 typeof 的實現(xiàn)原理 —— 掘金(https://juejin.im/post/5b0b9b9051882515773ae714)

• 📖?typeof 和 instanceOf 的區(qū)別(https://segmentfault.com/a/1190000000730982)

6. this, call, apply 和 bind

文章

• 📖?Javascript 的 this 用法 —— 阮一峰(http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)

• 📖?學(xué)會 JS 的 this 這一篇就夠了，根本不用記 —— 慕課網(wǎng)(https://www.imooc.com/article/1758)

• 📖?[譯] this（他喵的）到底是什么 — 理解 JavaScript 中的 this、call、apply 和 bind —— 掘金(https://juejin.im/post/5b9f176b6fb9a05d3827d03f)

• 📖?this、apply、call、bind —— 掘金(https://juejin.im/post/59bfe84351882531b730bac2)

• 📖?使用 call、apply 和 bind 解決 js 中煩人的 this，事件綁定時的 this 和傳參問題 —— 博客園(https://www.cnblogs.com/tingyu-blog/p/6212392.html)

• 📖?call、apply 和 bind 的原生實現(xiàn) —— github(https://github.com/Abiel1024/blog/issues/16)

視頻

• 📺?JavaScript 關(guān)于 this 關(guān)鍵字解釋 —— 愛奇藝(https://www.iqiyi.com/w_19rr1augsd.html)

• 📺?JS 關(guān)于作用域閉包和 this 的綜合面試題 —— 百度視頻(http://baidu.iqiyi.com/watch/845335533383874688.html?page=videoMultiNeed)

• 📺?js 面向?qū)ο箝]包數(shù)組 12.函數(shù)中的 this —— 樂視視頻(http://www.le.com/ptv/vplay/27478413.html?ch=baidu_s)

• 📺?1.3.10-this 指向及 this 應(yīng)用 —— 樂視視頻(http://www.le.com/ptv/vplay/24835911.html?ch=baidu_s)

• 📺?珠峰培訓(xùn) JavaScript 開發(fā)課程：關(guān)于 this 關(guān)鍵字、閉包作用域 —— 網(wǎng)易云課堂(https://study.163.com/course/introduction/590005.htm)

7. 函數(shù)作用域, 塊級作用域和詞法作用域

文章

• 📖?變量作用域與解構(gòu)賦值 —— 廖雪峰(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344993159773a464f34e1724700a6d5dd9e235ceb7c000)

• 📖?學(xué)習(xí) Javascript 閉包（Closure） —— 阮一峰(http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html)

• 📖?JavaScript 中詞法作用域、閉包與跳出閉包 —— SegmentFault(https://segmentfault.com/a/1190000006671020)

• 📖?JavaScript 深入之詞法作用域和動態(tài)作用域 —— 掘金(https://juejin.im/entry/58e70077b123db15eb88dc7e)

• 📖?深入理解閉包之前置知識 → 作用域與詞法作用域 —— 掘金(https://juejin.im/post/5afb0ae56fb9a07aa2138425)

• 📖?What is lexical scope? —— stackoverflow(https://stackoverflow.com/questions/1047454/what-is-lexical-scope)

• 📖?You Don't Know JS: Scope & Closures —— Kyle Simpson(https://github.com/fishenal/You-Dont-Know-JS/blob/master/scope%20&%20closures/ch2.md)

8. 閉包

文章

• 📖?閉包 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures)

• 📖?ECMAScript 閉包（closure）—— w3school(http://www.w3school.com.cn/js/pro_js_functions_closures.asp)

• 📖?學(xué)習(xí) Javascript 閉包（Closure） —— 阮一峰(http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html)

• 📖?閉包 —— 廖雪峰(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000)

• 📖?一次性搞懂 JavaScript 閉包 —— 簡書(https://www.jianshu.com/p/796e903754f1)

• 📖?JavaScript 閉包 —— SegmentFault(https://segmentfault.com/a/1190000006875662)

• 📖?js 匿名自執(zhí)行函數(shù)中閉包的高級使用 —— 掘金(https://juejin.im/entry/5800eb7da22b9d005b36156e)

• 📖?高效使用 JavaScript 閉包 —— 掘金(https://juejin.im/entry/59df405251882551bf7e58c6)

• 📖?深入理解 JavaScript 原型與閉包 —— 王福朋(https://www.cnblogs.com/wangfupeng1988/p/3977924.html)

視頻

• 📺?JavaScript 閉包和閉包面試題 —— 愛奇藝(http://www.iqiyi.com/w_19rr1amael.html)

• 📺?js 面向?qū)ο箝]包數(shù)組 11.閉包 —— 樂視(http://www.le.com/ptv/vplay/27478410.html)

• 📺?白賀翔\_函數(shù)(閉包) —— 樂視(http://www.le.com/ptv/vplay/30505852.html)

9. map, reduce, filter 等高階函數(shù)

文章

• 📖?高階函數(shù) —— 廖雪峰(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499355829ead974e550644e2ebd9fd8bb1b0dd721000)

• 📖?ES5 中新增的 Array 方法詳細說明 —— 張鑫旭(https://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6%b3%95/)

• 📖?一張圖看懂 JavaScript 中數(shù)組的迭代方法：forEach、map、filter、reduce、every、some —— 掘金(https://juejin.im/post/5835808067f3560065ed4ab2)

• 📖?Transducing（上）－《JavaScript 輕量級函數(shù)式編程》 —— SegmentFault(https://segmentfault.com/a/1190000012127329)

• 📖?JavaScript 函數(shù)式編程（三） —— @BuptStEve(https://github.com/BuptStEve/blog/issues/15)

10. 表達式和語句

文章

• 📖?js 表達式與語句 —— 博客園(https://www.cnblogs.com/xianshenglu/p/8386918.html)

• 📖?JS 表達式和語句的區(qū)別 —— SegmentFault(https://segmentfault.com/q/1010000004102804)

• 📖?JavaScript 中的表達式（expression）和語句/聲明（statement） —— CSDN(https://blog.csdn.net/mett_smith/article/details/78761247)

• 📖?重讀 Axel 的 Javascript 中的 Expression vs Statement 一文 —— SegmentFault(https://segmentfault.com/a/1190000004565693)

• 📖?Expressions versus statements in JavaScript —— Dr. Axel(http://2ality.com/2012/09/expressions-vs-statements.html)

11. 變量提升

文章

• 📖?JavaScript 變量提升 —— 菜鳥教程(http://www.runoob.com/js/js-hoisting.html)

• 📖?ES6 變量作用域與提升：變量的生命周期詳解 —— 掘金(https://juejin.im/post/59905bea6fb9a03c34192c51)

• 📖 ``翻譯?JavaScript Scoping and Hoisting —— SegmentFault(https://segmentfault.com/a/1190000004345355#articleHeader5)

• 📖?JavaScript Scoping and Hoisting —— Ben Cherry(http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)

12. Promise

文章

• 📖?使用 promises —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)

• 📖?Promise —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)

• 📖?Promise — 廖雪峰(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000)

• 📖?JavaScript Promise：去而復(fù)返 —— 司徒正美(https://www.cnblogs.com/rubylouvre/p/3495286.html)

• 📖?(上面的原文)JavaScript Promise：簡介 —— Web Fundamentals(https://developers.google.com/web/fundamentals/primers/promises#_1)

• 📖?1 分鐘讀完《10 分鐘學(xué)會 JavaScript 的 Async/Await》 —— justjavac(https://segmentfault.com/a/1190000011813934)

• 📖?JavaScript Promise 迷你書（中文版）(https://juejin.im/entry/56499ae160b2d1404c4f8834)

• 📖?JavaScript 進階之路——認識和使用 Promise，重構(gòu)你的 Js 代碼 —— 博客園(https://www.cnblogs.com/yunfeifei/p/4453690.html)

視頻

• 📺?Promise 入門 —— 慕課網(wǎng)(https://www.imooc.com/learn/949)

13. 立即執(zhí)行函數(shù), 模塊化, 命名空間

文章

• 📖?Javascript 模塊化編程（一）：模塊的寫法 —— 阮一峰(http://www.ruanyifeng.com/blog/2012/10/javascript_module.html)

• 📖?javascript 模塊化編程-詳解立即執(zhí)行函數(shù)表達式 —— 簡書(https://www.jianshu.com/p/4dbf4a4c8ebb)

• 📖?Javascript 的匿名函數(shù)與自執(zhí)行 —— 掘金(https://juejin.im/entry/57fee360a22b9d005b1d9ae3)

• 📖?前端模塊化——技術(shù)選型 —— SegmentFault(https://segmentfault.com/a/1190000006966358)

• 📖?談?wù)?Js 前端模塊化規(guī)范 —— SegmentFault(https://segmentfault.com/a/1190000015991869#articleHeader8)

• 📖?函數(shù)聲明與函數(shù)表達式的區(qū)別 —— 伯樂在線(http://web.jobbole.com/87534/)

14. 遞歸

文章

• 📖?求解釋 js 遞歸 —— SegmentFault(https://segmentfault.com/q/1010000003942347)

• 📖?JavaScript 中的遞歸 —— 掘金(https://juejin.im/post/5948c0d8fe88c2006a939e2a)

• 📖?遞歸（上）－《JavaScript 輕量級函數(shù)式編程》 —— 掘金(https://juejin.im/post/59c1d91d6fb9a00a53275f79)

• 📖?遞歸（下）－《JavaScript 輕量級函數(shù)式編程》 —— 掘金(https://juejin.im/post/59c87fb46fb9a00a437b1a2e)

• 📖?尾調(diào)用和尾遞歸 —— 掘金(https://juejin.im/post/5acdd7486fb9a028ca53547c)

• 📖?幾個經(jīng)典遞歸問題用 js 實現(xiàn) —— CSDN(https://blog.csdn.net/qianqianstd/article/details/75807462)

• 📖?遞歸函數(shù)的幾個例子 —— CSDN(https://blog.csdn.net/x_i_xw/article/details/72026868)

15. 算法

文章

• 📖?十大經(jīng)典排序算法總結(jié)（JavaScript 描述） —— 掘金(https://juejin.im/post/57dcd394a22b9d00610c5ec8)

• 📖?在 JavaScript 中學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法 —— 掘金(https://juejin.im/post/594dfe795188250d725a220a#comment)

• 📖?JS 中可能用得到的全部的排序算法 —— 掘金(https://juejin.im/post/58c9d5fb1b69e6006b686bce)

• 📖?JS 家的排序算法 —— 簡書(https://www.jianshu.com/p/1b4068ccd505)

• 📖?前端常見算法的 JS 實現(xiàn) —— SegmentFault(https://segmentfault.com/a/1190000008593715)

• 📖?前端面試中的常見的算法問題 ——蒲小花的博客(https://www.jackpu.com/qian-duan-mian-shi-zhong-de-chang-jian-de-suan-fa-wen-ti/)

視頻

• 📺?Javascript 實現(xiàn)二叉樹算法 —— 慕課網(wǎng)(https://www.imooc.com/learn/888)

16. 數(shù)據(jù)結(jié)構(gòu)

文章

• 📖?來我們淺談一下 js 的數(shù)據(jù)結(jié)構(gòu) —— 簡書(https://www.jianshu.com/p/5e0e8d183102)

• 📖?JavaScript 中的算法與數(shù)據(jù)結(jié)構(gòu) —— 簡書(https://www.jianshu.com/nb/16835496)

• 📖?學(xué) JS 必看-JavaScript 數(shù)據(jù)結(jié)構(gòu)深度剖析 —— 大道至簡的博客(http://blog.sina.com.cn/s/blog_7b9c5e4101017mjt.html)

• 📖?js 中基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)數(shù)組去重問題 —— 掘金(https://juejin.im/entry/586effe0da2f600053d85a9a)

視頻

• 📺?JavaScript 數(shù)據(jù)結(jié)構(gòu)-運算符 —— 樂視(http://www.le.com/ptv/vplay/27606964.html)

17. 消息隊列和事件循環(huán)

文章

• 📖?并發(fā)模型與事件循環(huán) —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop)

• 📖?JavaScript 運行機制詳解：再談 Event Loop —— 阮一峰(http://www.ruanyifeng.com/blog/2014/10/event-loop.html)

• 📖?深入理解 JavaScript 事件循環(huán) —— 博客園(https://www.cnblogs.com/dong-xu/p/7000163.html)

• 📖?深入淺出 Javascript 事件循環(huán)機制 —— 知乎(https://zhuanlan.zhihu.com/p/26229293)

• 📖?JS 事件循環(huán)機制（event loop）之宏任務(wù)、微任務(wù) —— SegmentFault(https://segmentfault.com/a/1190000014940904#articleHeader7)

• 📖?JavaScript：徹底理解同步、異步和事件循環(huán) —— SegmentFault(https://segmentfault.com/a/1190000004322358)

• 📖?從瀏覽器多進程到 JS 單線程，JS 運行機制最全面的一次梳理 —— 掘金(https://juejin.im/post/5a6547d0f265da3e283a1df7)

18. setTimeout, setInterval 和 requestAnimationFrame

文章

• 📖?Window setTimeout() 方法 —— 菜鳥教程(http://www.runoob.com/jsref/met-win-settimeout.html)

• 📖?Window setInterval() 方法 —— 菜鳥教程(http://www.runoob.com/jsref/met-win-setinterval.html)

• 📖?關(guān)于 setTimeout —— 掘金(https://juejin.im/post/5aa4c47af265da239866e236)

• 📖?你不知道的 Javascript：有趣的 setTimeout —— 掘金(https://juejin.im/post/5a77f8ce5188257a6d635d76)

• 📖?原來你是這樣的 setTimeout —— 掘金(https://juejin.im/entry/5861ebf01b69e6006ce61d38)

• 📖?setTimeout() 和 setInterval() 本質(zhì)區(qū)別在哪里？—— SegmentFault(https://segmentfault.com/q/1010000005989491)

• book:?window.requestAnimationFrame —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame)

• 📖?requestAnimationFrame 知多少？—— 博客園(http://www.cnblogs.com/onepixel/p/7078617.html)

• 📖?CSS3 動畫那么強，requestAnimationFrame 還有毛線用？—— 張鑫旭(https://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%e5%8a%a8%e7%94%bb%e7%ae%97%e6%b3%95/)

• 📖?「JavaScript 定時器」setInterval、setTimeout 和 requestAnimationFrame 淺析 —— SegmentFault(https://segmentfault.com/a/1190000014661035)

• 📖?翻譯：setInterval 與 requestAnimationFrame 的時間間隔測試 —— SegmentFault(https://segmentfault.com/a/1190000000386368)

• 📖?阿里前端面試題：requestAnimationFrame 實現(xiàn)類似 setInterval 的計時器 —— SegmentFault(https://segmentfault.com/q/1010000013909430)

視頻

• 📺?setTimeout 和 setInterval —— 優(yōu)酷(http://v.youku.com/v_show/id_XNTA4OTQ0NzA0.html)

19. 繼承, 多態(tài)和代碼復(fù)用

文章

• 📖?JS 面向?qū)ο缶幊讨?#xff1a;封裝、繼承、多態(tài) —— 博客園(https://www.cnblogs.com/Leo_wl/p/5734794.html)

• 📖?Javascript 的繼承與多態(tài) —— 簡書(https://www.jianshu.com/p/5cb692658704)

• 📖?js:面向?qū)ο缶幊?#xff0c;帶你認識封裝、繼承和多態(tài) —— 掘金(https://juejin.im/post/59396c96fe88c2006afc2707)

• 📖?JavaScript 中的“多繼承” —— 掘金(https://zhuanlan.zhihu.com/p/34693209)

• 📖?代碼復(fù)用模式 —— github(https://github.com/TooBug/javascript.patterns/blob/master/chapter6.markdown)

• 📖?深入理解 JavaScript：代碼復(fù)用模式(推薦篇) —— 湯姆大叔(http://www.cnblogs.com/TomXu/archive/2012/04/24/2438050.html)

• 📖?深入理解 JavaScript：代碼復(fù)用模式(避免篇) —— 湯姆大叔(https://www.cnblogs.com/TomXu/archive/2012/04/23/2438005.html)

20. 按位操作符, 類數(shù)組對象和類型化數(shù)組

文章

• 📖?按位操作符 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators)

• 📖?類數(shù)組對象 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays)

• 📖?類型化數(shù)組 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)

• 📖?JavaScript ArrayBuffer 淺析 —— 博客園(https://www.cnblogs.com/gradolabs/p/4762134.html)

21. DOM 樹和渲染過程

文章

• 📖?如何創(chuàng)建一個 DOM 樹 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree)

• 📖?HTML DOM 節(jié)點 —— W3school(http://www.w3school.com.cn/htmldom/dom_nodes.asp)

• 📖?DOM 概述 —— 阮一峰(http://javascript.ruanyifeng.com/dom/node.html)

• 📖?《JavaScript 闖關(guān)記》之 DOM（上）—— 掘金(https://juejin.im/post/583cbbfa61ff4b006ccc41fe)

• 📖?《JavaScript 闖關(guān)記》之 DOM（下）—— 掘金(https://juejin.im/post/583cbc4961ff4b006ccc44fb)

• 📖?掌握 DOM 操作 —— 掘金(https://juejin.im/entry/58314efd8ac2470061bb30fd)

• 📖?操作 DOM —— 廖雪峰(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500494451273e6b3dec9d411d9ba841dee8caec45000)

• 📖?原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的 —— 掘金(https://juejin.im/post/59c60691518825396f4f71a1)

視頻

• 📺?DOM 探索之基礎(chǔ)詳解篇 —— 慕課網(wǎng)(https://www.imooc.com/learn/488)

• 📺?DOM 事件探秘 —— 慕課網(wǎng)(https://www.imooc.com/learn/138)

• 📺?jQuery 基礎(chǔ)(二)DOM 篇 —— 慕課網(wǎng)(https://www.imooc.com/learn/530)

• 📺?JS 操作 DOM 對象屬性和方法 —— 愛奇藝(http://www.iqiyi.com/w_19rr19s08l.html)

22. new 與構(gòu)造函數(shù), instanceof 與實例

文章

• 📖?構(gòu)造函數(shù)與 new 命令 —— 阮一峰(http://javascript.ruanyifeng.com/oop/basic.html)

• 📖?Javascript 面向?qū)ο缶幊?#xff08;二）：構(gòu)造函數(shù)的繼承 —— 阮一峰(http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html)

• 📖?完整原型鏈詳細圖解(構(gòu)造函數(shù)、原型、實例化對象) —— CSDN(https://blog.csdn.net/SpicyBoiledFish/article/details/71123162)

• 📖?JavaScript 中構(gòu)造函數(shù)與 new 操作符的實例詳解 —— PHP 中文網(wǎng)(http://www.php.cn/js-tutorial-376246.html)

• 📖?構(gòu)造函數(shù)、實例、原型、原型鏈之間的關(guān)系 —— CSDN(https://blog.csdn.net/yin_991/article/details/80954453)

• 📖?深入理解 JS—instanceof 和原型鏈 —— CSDN(https://blog.csdn.net/cecilia620/article/details/71158048)

• 📖?前端基礎(chǔ)進階（九）：詳解面向?qū)ο蟆?gòu)造函數(shù)、原型與原型鏈 —— 簡書(https://www.jianshu.com/p/15ac7393bc1f)

• 📖?js 用 new 實例化對象與直接調(diào)用的 this 的區(qū)別 —— 簡書(https://www.jianshu.com/p/60ffc4831bff)

• 📖?JavaScript 并非所有的東西都是對象 —— justjavac(http://justjavac.com/javascript/2012/12/22/javascript-values-not-everything-is-an-object.html)

• 📖?JavaScript instanceof 運算符深入剖析 —— IBM(https://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/)

視頻

• 📺?改良版的構(gòu)造函數(shù) —— 樂視(http://www.le.com/ptv/vplay/27766889.html)

23. 原型繼承與原型鏈

文章

• 📖?繼承與原型鏈 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

• 📖?構(gòu)造函數(shù)、原型與原型鏈 —— github(https://github.com/bigdots/blog/issues/1)

• 📖?原型及原型鏈 —— github(1269 Star)(https://github.com/stone0090/javascript-lessons/tree/master/2.5-Prototype)

• 📖?理清 javascript 中的面向?qū)ο?一) 原型繼承 —— SegmentFault(https://segmentfault.com/a/1190000004282206)

• 📖?JavaScript：繼承和原型鏈(譯) —— justjavac(http://justjavac.com/2015/12/09/inheritance-and-the-prototype-chain.html)

• 📖?三張圖搞懂 JavaScript 的原型對象與原型鏈 —— 博客園(http://www.cnblogs.com/shuiyi/p/5305435.html)

• 📖?一張圖讓你搞懂 JavaScript 的繼承與原型鏈 —— CSDN(https://blog.csdn.net/the__apollo/article/details/76774698)

• 📖?JS 高級--原型鏈(一看就懂，但 18 歲以下請繞道) —— CSDN(https://blog.csdn.net/xiaotao_css/article/details/72782416)

• 📖?原型繼承 —— 廖雪峰(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000)

• 📖?JS 原型鏈與繼承別再被問倒了 —— 掘金(https://juejin.im/post/58f94c9bb123db411953691b)

• 📖?征服 JavaScript 面試系列：類繼承和原型繼承的區(qū)別 —— 掘金(https://juejin.im/entry/5885db221b69e600592253e7)

• 📖?JavaScript 深入之從原型到原型鏈 —— 冴羽(https://github.com/mqyqingfeng/Blog/issues/2)

• 📖?深入理解 JavaScript 原型與閉包 —— 王福朋(https://www.cnblogs.com/wangfupeng1988/p/3977924.html)

視頻

• 📺?JS 高級-07-原型鏈繼承 —— 樂視(http://www.le.com/ptv/vplay/27552753.html)

• 📺?JS 原型對象和原型鏈簡介 —— 騰訊視頻(https://v.qq.com/x/page/b0511nwa7d3.html)

24. Object.create 和 Object.assign

文章

• 📖?Object.create —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create)

• 📖?Object.assign —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

• 📖?Object.create vs Object.assign —— 慕課網(wǎng)手記(https://www.imooc.com/article/17591)

• 📖?JS 中的 Object.assign()、Object.create()、Object.defineProperty() —— CSDN(https://blog.csdn.net/DeepLies/article/details/52915143)

• 📖?es6 中 object.create()和 object.assign() —— 風(fēng)信子博客(http://www.onlyfordream.cn/2018/03/19/es6%E4%B8%ADobject-create%E5%92%8Cobject-assign/)

• 📖?Object-Assign-Deep —— github(https://github.com/saikojosh/Object-Assign-Deep)

25. 工廠函數(shù)和類

文章

• 📖?類 —— MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)

• 📖?類和實例 —— 廖雪峰(https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138682004077376d2d7f8cc8a4e2c9982f92788588322000)

• 📖?Javascript 定義類（class）的三種方法 —— 阮一峰(http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html)

• 📖?【譯】ES6 的工廠函數(shù) —— 掘金(https://juejin.im/post/59c8c8756fb9a00a681ae5bd)

• 📖?JavaScript 創(chuàng)建對象之單例、工廠、構(gòu)造函數(shù)模式 —— 掘金(https://juejin.im/entry/587992c961ff4b0065edf1ff)

26. 設(shè)計模式

文章

• 📖?JavaScript 設(shè)計模式 —— 掘金(https://juejin.im/post/59df4f74f265da430f311909)

• 📖?學(xué)用 JavaScript 設(shè)計模式 —— 極客學(xué)院(http://wiki.jikexueyuan.com/project/javascript-design-patterns/)

• 📖 ``面試專題JS 設(shè)計模式 —— SegmentFault(https://segmentfault.com/a/1190000010914032)

• 📖?JavaScript Patterns 中譯本 —— github(https://github.com/lxj/javascript.patterns)

視頻

• 📺?HTML5 課程大綱 2-11JS 設(shè)計模式(https://tv.sohu.com/v/dXMvMjQwNzYwNzQ4Lzg5NzM2MDA3LnNodG1s.html)

27. Memoization

文章

• 📖?JavaScript Memoization —— 司徒正美(https://www.cnblogs.com/rubylouvre/archive/2009/08/06/1540678.html)

• 📖?memoization 提升遞歸效率 —— 博客園(https://www.cnblogs.com/yingshuizy/p/4517102.html)

• 📖?如何提升 JavaScript 的遞歸效率 —— 51CTO(http://developer.51cto.com/art/201010/231513.htm)

• 📖?JavaScript 高級技巧 Memoization —— SegmentFaut(https://segmentfault.com/a/1190000016703106)

28. 純函數(shù), 函數(shù)副作用和狀態(tài)變化

文章

• 📖?純函數(shù)(Pure Function) —— React.js 小書(http://huziketang.mangojuice.top/books/react/lesson32)

• 📖?JavaScript Functional Programming：純函數(shù) —— 寧皓網(wǎng)(https://ninghao.net/blog/4634)

• 📖?js 函數(shù)的副作用分析 —— 腳本之家(https://www.jb51.net/article/28079.htm)

• 📖?如何使用純函數(shù)式 JavaScript 處理臟副作用 —— 掘金(https://juejin.im/post/5b82bdb351882542e241ed32?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com)

• 📖?原生 JavaScript 實現(xiàn) state 狀態(tài)管理系統(tǒng) —— 博客園(http://www.cnblogs.com/zhangycun/p/9403335.html)

• 📖?JavaScript 函數(shù)式編程 —— @BuptStEve(https://github.com/BuptStEve/blog/issues/10)

29. 耗性能操作和時間復(fù)雜度

文章

• 📖?時間復(fù)雜度 O(log n) 意味著什么？—— 掘金(https://juejin.im/entry/593f56528d6d810058a355f4)

• 📖?算法的時間復(fù)雜度和空間復(fù)雜度 —— 掘金(https://juejin.im/entry/5a49f7d36fb9a0450a67b269)

• 📖?算法（一）時間復(fù)雜度 —— 掘金(https://juejin.im/post/58d15f1044d90400691834d4)

• 📖?Big O Search Algorithms in JavaScript —— Bradley Braithwaite(http://www.bradoncode.com/blog/2012/04/big-o-algorithm-examples-in-javascript.html)

• 📖?Time Complexity Analysis in JavaScript — Jennifer Bland(https://www.jenniferbland.com/time-complexity-analysis-in-javascript/)

30. JavaScript 引擎

文章

• 📖?javascript 引擎 —— 百度百科(https://baike.baidu.com/item/javascript引擎/5356108)

• 📖?V8(JavaScript 引擎) —— 百度百科(https://baike.baidu.com/item/V8/6178125)

• 📖?圖解搞懂 JavaScript 引擎 Event Loop —— 掘金(https://juejin.im/post/5a6309f76fb9a01cab2858b1)3

• 📖?V8 JavaScript 引擎：高性能的 ES2015+ —— justjavac(https://segmentfault.com/a/1190000010819020)

• 📖?10 分鐘理解 JS 引擎的執(zhí)行機制 —— SegmentFaut(https://segmentfault.com/a/1190000012806637)

• 📖?V8 javascript 引擎 —— 博客園(https://www.cnblogs.com/weirdoQi/p/6609811.html)

31. 二進制, 十六進制, 十進制, 科學(xué)記數(shù)法

文章

• 📖?二、八、十、十六進制轉(zhuǎn)換(圖解篇) —— 博客園(http://www.cnblogs.com/gaizai/p/4233780.html)

• 📖?JavaScript 讀寫二進制數(shù)據(jù) —— 掘金(https://juejin.im/post/5b93dadaf265da0a857a58a3)

視頻

• 📺?二進制、十進制、十六進制互相轉(zhuǎn)化很難嗎？—— 百度視頻(http://baishi.baidu.com/watch/7873060963471478456.html)

32. 偏函數(shù), 柯里化, Compose 和 Pipe

文章

• 📖?Javascript 函數(shù)式編程之偏函數(shù) —— CSDN(https://blog.csdn.net/qq_42129063/article/details/81874314)

• 📖?JavaScript 專題之偏函數(shù) —— SegmentFault(https://segmentfault.com/a/1190000010686144)

• 📖?柯里化和偏函數(shù)有什么區(qū)別？—— SegmentFault(https://segmentfault.com/q/1010000008626058)

• 📖?Javascript 偏函數(shù)與柯里化 —— CSDN(https://blog.csdn.net/neweastsun/article/details/75947785)

• 📖?柯里化(curry) —— JS 函數(shù)式編程指南(https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch4.html)

• 📖?代碼組合(compose) —— JS 函數(shù)式編程指南(https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch5.html)

• 📖?關(guān)于 javascript 函數(shù)式編程中 compose 的實現(xiàn) —— SegmentFault(https://segmentfault.com/a/1190000008394749)

• 📖?實現(xiàn) compose 的五種思路 —— SegmentFault(https://segmentfault.com/a/1190000011447164)

• 📖?JavaScript 函數(shù)式編程之函數(shù)組合函數(shù) compose 和 pipe 的實現(xiàn) —— SegmentFault(https://segmentfault.com/a/1190000015102804)

• 📖?JavaScript 輕量級函數(shù)式編程-第 4 章:組合函數(shù) ——掘金(https://juejin.im/post/59a62f3d6fb9a0248363fd9d#comment)

• 📖?JavaScript 函數(shù)式編程（二） —— @BuptStEve(https://github.com/BuptStEve/blog/issues/11)

33. 代碼整潔之道

文章

• 📖?[譯] JavaScript 代碼整潔之道 —— 邊城(https://www.zcfy.cc/article/clean-code-javascript-readme-md-at-master-ryanmcdermott-clean-code-javascript-github-2273.html)

• 📖?Javascript 編程風(fēng)格 —— 阮一峰(http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html)

• 📖?重構(gòu) - 代碼整潔之道 —— 掘金(https://juejin.im/post/5a5b2a5c6fb9a01cbc6e59f9)

• 📖?讓你的代碼更簡短，更整潔，更易讀的 ES6 小技巧 —— 掘金(https://juejin.im/post/5a7d71836fb9a063435ecf51)

• 📖?Web 前端：11 個讓你代碼整潔的原則 —— 伯樂在線(http://blog.jobbole.com/23617/)

• 📖?Clean Code concepts adapted for JavaScript —— ryanmcdermott(https://github.com/ryanmcdermott/clean-code-javascript)

寫在最后

公眾號：前端開發(fā)愛好者?專注分享?web?前端相關(guān)技術(shù)文章、視頻教程資源、熱點資訊等，如果喜歡我的分享，給 🐟🐟 點一個贊?👍 或者 ?關(guān)注?都是對我最大的支持。

歡迎長按圖片加好友，我會第一時間和你分享前端行業(yè)趨勢，面試資源，學(xué)習(xí)途徑等等。

添加好友備注【進階學(xué)習(xí)】拉你進技術(shù)交流群

關(guān)注公眾號后，在首頁：

• 回復(fù)面試題，獲取最新大廠面試資料。

• 回復(fù)簡歷，獲取 3200 套 簡歷模板。

• 回復(fù)React實戰(zhàn)，獲取 React 最新實戰(zhàn)教程。

• 回復(fù)Vue實戰(zhàn)，獲取 Vue 最新實戰(zhàn)教程。

• 回復(fù)ts，獲取 TypeScript 精講課程。

• 回復(fù)vite，獲取 精講課程。

• 回復(fù)uniapp，獲取 uniapp 精講課程。

• 回復(fù)js書籍，獲取 js 進階 必看書籍。

• 回復(fù)Node，獲取 Nodejs+koa2 實戰(zhàn)教程。

• 回復(fù)數(shù)據(jù)結(jié)構(gòu)算法，獲取 數(shù)據(jù)結(jié)構(gòu)算法 教程。

• 回復(fù)架構(gòu)師，獲取 架構(gòu)師學(xué)習(xí)資源教程。

• 更多教程資源應(yīng)有盡有，歡迎關(guān)注獲取

前端小菜雞之菜雞互啄

Like the Author

總結(jié)

以上是生活随笔為你收集整理的【转】进阶 JavaScript 必知的 33 个点【进阶必备】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。