關于javascript你要知道的 · 前端筆記

## 關于javascript你要知道的 - javascript是一個基于原型實現的面向對象語言 - 作用域鏈 - 原型鏈 - 靜態作用域 - 閉包是匿名函數和靜態作用域的綜合體 - 一切皆為對象，所有對象都是Object的派生（準確的說第一代原型是Object.prototype） - node.js是javascript在服務端的運行環境，并且還加入了一些新的系統級的API - javascript語言是一種規范，基于這種規范，可以采用任何語言去實現它 - javascript是一種單線程語言，單線程使得它在某些方面使用起來要比其他面向對象語言簡單，比如java，沒有多線程就會少很多麻煩，但是請注意，在瀏覽器端，js有一個事件循環的機制，用于異步事件的處理。 * * * * * ### 其它 ``` Object.getOwnPropertyNames(Promise.prototype) ``` 可以獲取一個對象的屬性列表 * * * * * `__proto__` 屬性指向一個對象，這個對象就是所謂的原型。 `prototype` 屬性也是一個對象，掛在構造函數上成為別人（new出的對象）的原型對象。一個是指向原型，一個是別人的原型。 * * * * * ### 參考 [Webpack 的異步加載原理及分包策略](https://mp.weixin.qq.com/s/ZGcPPXp_Xczsbb5iZuj7Nw) [看完這篇要是還不懂“瀏覽器渲染原理”，那就……](https://mp.weixin.qq.com/s/wcDklFVspWVZbcwG2txFYg) [“秒開”瀏覽器實現起來有多難？](https://mp.weixin.qq.com/s/3sYrI9kxgAYLiNT-xavRLw) [你真的懂 Promise 嗎？](https://mp.weixin.qq.com/s/zcZwMRg9nymQrp4n6FEldA) [誰說前端不需要懂二進制](https://mp.weixin.qq.com/s/_FU8gBmq2XFIhwRpHNpPww) [你不知道的 Blob](https://mp.weixin.qq.com/s/MPTTMUXLRK0boeMDYzmaLA) [談一談使用字體庫加密數據-仿58同城](https://mp.weixin.qq.com/s/mqWKKh7-U15hm3zNEECl2w) [Chrome 運行時性能瓶頸分析](https://mp.weixin.qq.com/s/0JPASL4Y2hTj-onroZ1R_g) [為什么你的網頁需要 CSP?](https://mp.weixin.qq.com/s/UtTyTlpa-lI84a3ALkJTZw) [JavaScript 為什么能活到現在？](https://mp.weixin.qq.com/s/u4f8o_CZ69kj__mlyp8xGw) [瀏覽器數據庫 IndexedDB 入門教程](https://mp.weixin.qq.com/s/cogka1gWqpde29XEWoxhqw) [GMTC大會專訪：Node.js 2018年大前端潮流解析](https://mp.weixin.qq.com/s/J79c-gPD_7e3MZuRYCp2bA) > Node為解決后端并發而生，但卻無心插柳，成為大前端的基石。伴隨大前端的發展，Node也發展的越來越好，越來越重要，其應用場景從腳手架、輔助前端開發（比如SSR、PWA等）的快速開發實踐，到API中間層、代理層，到專業的后端開發都有非常成熟的經驗。另外，前端越來越復雜，后端服務化，今日的前端要面臨更多的挑戰，Node全棧給大家更多可能。我個人對此堅定不移。 [網站性能優化實戰——從12.67s到1.06s的故事](https://juejin.im/post/5b0b7d74518825158e173a0c) [低門檻徹底理解JavaScript中的深拷貝和淺拷貝](https://mp.weixin.qq.com/s/FoNX_Vn1Xy0pElr3GyTgbw) [利用 javascript 實現富文本編輯器](https://mp.weixin.qq.com/s/kjzzIyqEdflf2b7MIaEPsQ) [讓我們一起來學習別人學不動的deno](https://segmentfault.com/a/1190000015151287) [不要再問我跨域的問題了](https://mp.weixin.qq.com/s/RKrWLL690cTLtM9mdDnBbg) [Web Worker 使用教程](https://mp.weixin.qq.com/s/OX58lz05jHdalL7PVR0Jiw) [JS Linter 進化史](https://zhuanlan.zhihu.com/p/34656263?utm_source=wechat_session&utm_medium=social&from=singlemessage) > 沒有好的協作的方式和一致性規范就不會有更大的發展，過多耦合最終會成為巨大麻煩。 [深入理解 ESLint](https://mp.weixin.qq.com/s/BD827cLWrPNtMgDvGgi0qg) [Node 之父：Node 失誤太多無力回天，Deno 前景明朗](https://mp.weixin.qq.com/s/7M9PG4EJhNcxFLcG9oM45g) [Node Bug 太多慘遭創始人拋棄，前端開發要變天？](http://toutiao.com/group/6563849781486027277/?iid=33124962994&app=news_article_lite&timestamp=1528275566&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share) [Chrome 調試技巧](https://mp.weixin.qq.com/s/0yBiqcszF_2-avFc6HwZNg) [一篇文章徹底說清 JS 的深拷貝/淺拷貝](https://mp.weixin.qq.com/s/SvtRJXtquh7dJxATCIwNgw) [AST抽象語法樹：最基礎的 Javascript 重點知識](https://mp.weixin.qq.com/s/We_vEDfKKLXKfhT0sKvkFw) [前端的一些坑，一些記錄，一些冷知識](https://mp.weixin.qq.com/s/4WeDADzctVQ2OlTLaEhFHQ) [一篇文章理解 JS 繼承](https://mp.weixin.qq.com/s/Hjzt0DUd6aXIH84vrf0poQ) http://debugx5.qq.com/?from=groupmessage [JS 中的 number 為何很怪異？](https://mp.weixin.qq.com/s/C0rOG1l411XL0O7hujPOOA) [Promise 探討](https://mp.weixin.qq.com/s/M4zddxwUB6qDGDMOPbYkYg) [你真的了解回流和重繪嗎？](https://mp.weixin.qq.com/s/0jmzBlFZsiHXfu9mpjoW5w) [圖解WebGL和Three.js工作原理](https://mp.weixin.qq.com/s/_GNQSXQtLEre5ePa4kZnDw) [騰訊祭出大招VasSonic，讓你的H5頁面首屏秒開！](https://mp.weixin.qq.com/s/zOygJ0mqQ0oyXQgtc2lf3A) [原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的](https://mp.weixin.qq.com/s/xUUxYs_iFyKg6z4RrtcjVg) [前端開發進化史，你經歷過哪幾個時期？](https://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg==&mid=2247487023&idx=1&sn=064eb8ea4f5390b23088829b7f6eecfd&source=41#wechat_redirect) [DOM 操作成本到底高在哪兒？](https://mp.weixin.qq.com/s/pa9mmQah-DNb9fNAYe2AvA) [想寫好前端，先練好內功](https://mp.weixin.qq.com/s/Z_KfyyoR74CKHZ0pyIFuHQ) [十分鐘學會防抖和節流](https://mp.weixin.qq.com/s/crXTrI1hJSlbWtAco-jHFw) [如何在瀏覽器不崩潰的情況下過濾 200 萬行數據？](https://mp.weixin.qq.com/s/9Dgb53y_Wwx3YpT_vnV0Ng) [Resumable File Upload Demo - https://tus.io/demo.html](https://tus.io/demo.html) [大前端摧毀了原生開發者的一切，但是我們應該開心](https://mp.weixin.qq.com/s/yZIlcfFI9Fysdq5UadaXfA) [移動開發的羅曼蒂克消亡史](https://mp.weixin.qq.com/s/2xBnlmESZjq7UTtcfzqhcA) [九種跨域方式實現原理](https://mp.weixin.qq.com/s/LV7qziMyrMt0_EJWo05qkA) [關于直播視頻格式和瀏覽器兼容性歷史的來龍去脈](https://mp.weixin.qq.com/s/w-4uaDP4d-DAQ_JKcqQfYA) [回到最初：開發不需要“編譯” 的 WebApp](https://juejin.im/post/5bdfaed0e51d4505086fa4cd) [關于移動端適配，你必須要知道的](https://mp.weixin.qq.com/s/J3sAnIsiZ1-2jwZcg9VVVw) [重度代碼潔癖患者該如何用vscode開發Vue應用？](https://mp.weixin.qq.com/s/ssgFGGfCfRB-zFPVX0HHMQ) [JS 函數的 6 個基本術語](https://mp.weixin.qq.com/s/9FtdLr3u4w4n_qiiKkVfUA) [頁面可視化搭建工具技術要點](https://mp.weixin.qq.com/s/aerX2wru1MZZ4S7dihjW0g) [可能這些是你想要的 H5 軟鍵盤兼容方案](https://mp.weixin.qq.com/s/u1KIkWm-1VFu4r8VzvB5Dg) [深入分析虛擬DOM的渲染過程和特性](https://mp.weixin.qq.com/s/VlDl9r0w2CIg0KWiQXChxQ) [十分鐘學會防抖和節流](https://mp.weixin.qq.com/s/crXTrI1hJSlbWtAco-jHFw) [前端開發 20 年變遷史](https://mp.weixin.qq.com/s/cDsYO1AsYXOjZVpSwBq2HA) [異常處理，"try..catch"](https://mp.weixin.qq.com/s/sZSNDTl_VwIr41n-NYmsKw) [深入理解 ESLint](https://mp.weixin.qq.com/s/BD827cLWrPNtMgDvGgi0qg) [JavaScript 究竟是如何工作的？（第一部分）](https://mp.weixin.qq.com/s/7n4cP9g8G5hGOuCExXydIg) [技術輪回，靜態Web再度成為新趨勢？](https://mp.weixin.qq.com/s/JrsJiO_B8wJDjLqKN7awkQ) [為什么2019年了我還在用jQuery](https://mp.weixin.qq.com/s/zxp8jw9kqycVPfZznVTC1A) > AT＆T 的網站帳戶頁面僅提供靜態 HTML。但它們是由 js 渲染的，我必須等待每次點擊后查看加載情況。這是為什么？為什么這么多靜態網站和博客都在其所有網頁上使用 SPA 技術？人們瘋了嗎？如何花費 10 倍的錢和努力以獲得更糟糕的結果？ —— 返璞歸真 [Lodash 嚴重安全漏洞背后：你不得不知道的 JavaScript 知識](https://mp.weixin.qq.com/s/9GxyNmLFWFDDFERkrGOwSw) [Web 視頻播放前前后后那些事](https://mp.weixin.qq.com/s/6c4DOckNqNNH9uptVsKbKA) [一篇文章徹底搞定富文本原理 + 實戰](https://mp.weixin.qq.com/s/tx8y00WXa0OWFEnmSj5caw) [NPM 如何管理依賴包版本](https://mp.weixin.qq.com/s/dg3aUlZE1qplMBiFU377zA) [npm install 原理分析](https://mp.weixin.qq.com/s/d4v4c6MM7sWepDO0PbiNLQ) [從 React 歷史的長河里聊虛擬 DOM 及其價值](https://mp.weixin.qq.com/s/9q77WluVxmONDnlfeSWsvA) [渲染樹怎么形成的你真的很懂嗎？](https://mp.weixin.qq.com/s/ZT047JL4kEqYha10U4NMMQ) [Javascript誕生記 - 阮一峰的網絡日志](http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html) [Javascript：一個屌絲的逆襲](https://mp.weixin.qq.com/s/JpwVhpXc67H6ahcMEvUAvA) [javascript王國的一次旅行，一個沒有類的世界怎么玩轉面向對象？](http://mp.weixin.qq.com/s/l3feZ7NaV1pIJ52K5JCQEw) [javascript王國之函數教主](http://mp.weixin.qq.com/s/qqPg0JujBIUNQPQMxjjlZQ) [Object.prototype - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) [Object.prototype.isPrototypeOf() - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/IsPrototypeOf) [JavaScript:Object.prototype.toString方法的原理 - 紫云飛 - 博客園](http://www.cnblogs.com/ziyunfei/archive/2012/11/05/2754156.html) [深入理解JavaScript定時機制](http://www.laruence.com/2009/09/23/1089.html) [\__proto\__與prototype - 追夢子 - 博客園](http://www.cnblogs.com/pssp/p/5222075.html) [簡單粗暴地理解 JS 原型鏈](http://mp.weixin.qq.com/s/JzgalzgnhVjg0119xEf4BQ) [call方法和new對象的關系 - 追夢子 - 博客園](http://www.cnblogs.com/pssp/p/5221891.html) [徹底理解js中this的指向，不必硬背。 - 追夢子 - 博客園](http://www.cnblogs.com/pssp/p/5216085.html) [JavaScript中call,apply,bind方法的總結。 - 追夢子 - 博客園](http://www.cnblogs.com/pssp/p/5215621.html) [Nodejs中的this](http://www.cnblogs.com/pssp/p/5321506.html) [那些年我們一起過的JS閉包，作用域，this，讓我們一起劃上完美的句號。](http://www.cnblogs.com/pssp/p/5781090.html) [閉包，是真的美](http://mp.weixin.qq.com/s/w6vtbt8D3dQza3KVwmjm-A) [關于在for循環中綁定事件打印變量i是最后一次。](http://www.cnblogs.com/pssp/p/5215417.html#) [setTimeout 的黑魔法 - 李三思 - 博客園](http://www.cnblogs.com/fly-snow/p/5427865.html) > js引擎與GUI引擎是互斥的怎么證明，瀏覽器的js線程和GUI渲染線程是互斥的呢？這個問題不是幾句話能說清楚的，已經獨立成章，見：[js引擎與GUI引擎是互斥的](http://www.hmoore.net/xiak/quanduan/375582)。 [js 深拷貝 vs 淺拷貝 - 掘金](https://juejin.im/post/59ac1c4ef265da248e75892b) [傻傻分不清的 __proto__ 與 prototype](http://mp.weixin.qq.com/s/C6s5g6dkXSpAZpFA4MVyCQ) [幾張圖告訴你事件循環和Job Queue究竟是什么](http://mp.weixin.qq.com/s/8RK1st8pTNz_-htX9sY8Ng) [剖析 Promise 內部結，實現一個 Promise 類](http://mp.weixin.qq.com/s/DjRb2q_myluEceA7kOJPXQ) [性感的Promise，擁抱ta然后扒光ta](http://mp.weixin.qq.com/s/rLwO1D7Rsc0pMxfLAMkNYA) [寫給小白看的 JavaScript 異步](http://mp.weixin.qq.com/s/tzPuVfGo68yE3FteMuSQaw) [這一次，徹底弄懂 JavaScript 執行機制](https://mp.weixin.qq.com/s/4fJN2Tfh-ByCZ3EXH1AVGw) [作為一名前端開發人員，你不可不知的JavaScript高級特性](https://www.toutiao.com/a6507826734019117572/?tt_from=weixin&utm_campaign=client_share&timestamp=1515645304&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) > 變量申明、函數定義提前機制，很多語言都是這樣的，php也是這個特性。（代碼本身并不重要，實現才重要，這是為了讓編程語言適應人們的編程習慣） > **JS是按塊執行的。** [在 Node 的幫助下，橫跨多平臺的 JavaScript 已經贏了](http://36kr.com/coop/toutiao/5111638.html?ktm_source=toutiao&tt_from=weixin&tt_group_id=6509609322857628174) [理解 JavaScript 作用域](http://mp.weixin.qq.com/s/CJrrwqwJDyYxUS8tlDC-HQ) > 最小訪問原則，作用域為你的代碼提供了一個安全層級。計算機安全中，有個常規的原則是：用戶只能訪問他們當前需要的東西。 > > 代碼寫的很形象，尤其是利用閉包實現js版的php私有修飾關鍵字，很贊！ [10 分鐘理解 JS 引擎的執行機制](http://mp.weixin.qq.com/s/WJHD3IFefoVm2MHBgf6oDw) [很全很全的 JavaScript 模塊講解](http://mp.weixin.qq.com/s/Qs-C2q3jfSzdYeOYSbm11g) [從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理](http://mp.weixin.qq.com/s/GFUivceIlbjVDfcJibnVOg) [如何繼承 Date 對象？由一道題徹底弄懂 JS 繼承](http://mp.weixin.qq.com/s/p3-zs8R5k4f8rN3iEkq8oA) [給初學者：JavaScript 的常見注意點](https://mp.weixin.qq.com/s/lBJXZ9E8xlEzWhDvy3wv7w) [wangfupeng1988/js-async-tutorial: 深入理解 JavaScript 異步](https://github.com/wangfupeng1988/js-async-tutorial) [為什么瀏覽器的用戶代理字符串以 Mozilla 開頭?](http://mp.weixin.qq.com/s/x2lPV7ev8mvedi-uGFboGg) [讓我們一起學習JavaScript閉包吧](http://mp.weixin.qq.com/s/nxxOBD-UtC87goS3Y-GXuw) [關于 Google 發布的 JS 代碼規范，你需要了解什么？](https://mp.weixin.qq.com/s/itTcxdyEYi0anUPBIRhYsw) [走近 WebAssembly 之調試大法](https://mp.weixin.qq.com/s/K3FcgoHnw0pAMHCoMer_Ow) [深入理解 ES Modules (手繪示例)](https://mp.weixin.qq.com/s/hNbBH8uTLRWlMjgZRwKycg) [如何處理 JavaScript 內存泄露](https://mp.weixin.qq.com/s/Cup4F6TMyyw4jB87yrtkRQ) [JavaScript 的 this 原理](https://mp.weixin.qq.com/s/cNWXVisYTxNMM7-FdwtzyQ) [函數防抖與函數節流 - 司徒正美](https://mp.weixin.qq.com/s/xMCna_VtoOev0K5uK1J0aQ) > 函數防抖與節流是很相似的概念，但它們的應用場景不太一樣。 [ES6 系列之我們來聊聊 Promise](https://mp.weixin.qq.com/s/ihS5aCQxTb9Ny6X5ebscIA) [事件循環機制的那些事](https://mp.weixin.qq.com/s/9_hZX_xWSr3Gd1X_2_WOsA) [JavaScript如何優雅實現繼承？](https://mp.weixin.qq.com/s/V2xidEGQmiW-nwPwjrReEg) > 第三個結果錯了，結果應該是： > Hi! john. > Hi! joe. > joe [前端碼農之蛻變 — AST（抽象語法樹）](https://mp.weixin.qq.com/s/T6eJ9YEDpopZTz2rh1Y5Xw) [從 0 到 1 再到 100：搭建、編寫、構建一個前端項目](https://mp.weixin.qq.com/s/PdMpneV52gKw305g1DfdWg) [深入了解瀏覽器存儲](https://mp.weixin.qq.com/s/A1v_qCGAvDkYhMhSU3OuTg) [答疑：瀏覽器為什么不優化 DOM 操作的性能](https://mp.weixin.qq.com/s/mXkZ5S121Slc0RjNnrhnoQ) [IntersectionObserver介紹 - 簡書](https://www.jianshu.com/p/7c06669ed98e) * * * * * last update：2018-1-11 16:28:24