## js事件循環中的上下文和作用域的經典問題 你是否遇到過，for 中 setTimeout 變量總是最后一個的問題，以及在 for 中綁定事件 出問題的情況？ https://blog.csdn.net/weixin_34194317/article/details/88860643 js有兩個執行棧：主棧 和 EventLoop Stack（事件循環棧） ```javascript // 主棧從上往下執行 var a = 1; // 定義一個函數，注意它接受一個參數，返回值是一個函數 var f = function(a) { // 返回一個函數，或者說生成一個函數，并返回 return function () { console.log('___ ', a); // 根據作用域原型鏈規則，這里的 變量a 將指向 參數a } } // 和下面的唯一區別是，第一個參數是一個表達式，而不是一個函數體定義 // 這是一個函數立即執行表達式，且傳遞了一個參數a，此時變量a的值為 1 // 表達式的返回值是一個函數，這正是 setTimeout 所需要的 // 這里能“保住上下文變量a”的關鍵是，a:1 被 固化到生成的函數中去了 setTimeout(f(a), 200); // 主執行棧，創建一個 定時器事件 // 定時器到期時會將 事件 push 到 事件循環隊列上去 setTimeout(function(){ console.log('__', a); // 根據作用域原型鏈規則，這里的 變量a 將指向 上面定義的全局變量a }, 100); a = 2; console.log('_', a); // 主棧執行完畢，開始進入 事件循環棧 ``` ~~~ // 輸出： _ 2 __ 2 ___ 1 ~~~ 如果你理解上面的演示程序和輸出結果，那么你就明白了這個經典問題。 ---- [理解 JavaScript 的 async/await_邊城客棧 - SegmentFault 思否](https://segmentfault.com/a/1190000007535316) [大前端進擊之路(二)：JavaScript異步編程](https://mp.weixin.qq.com/s/JO9c0_emIXj_PlFEO4DX7Q) [js async/await - 碼農1213 - 博客園](https://www.cnblogs.com/bear-blogs/p/10423759.html) [js中的宏任務與微任務_個人文章 - SegmentFault 思否](https://segmentfault.com/a/1190000020225668) > 所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染。也就是說，在某一個macrotask執行完后，就會將在它執行期間產生的所有microtask都執行完畢（在渲染前）。 > > （微任務可以看作是一個列表，每次每次執行棧task執行后都會全部執行完，清空，并不是隊列只取一個來進行執行），所以可以把微任務看作是緊急任務列表，每個任務執行后，都要馬上處理它們。 > 同步任務直接進入執行棧，每次執行后都會處理執行全部微任務，執行棧空后才會進入事件循環獲取一個任務放入執行棧執行。 > > 三個要點：執行棧（棧上的每個任務都是宏任務），微任務列表，任務隊列 ---- [let 和 const 命令 - ECMAScript 6入門 - 阮一峰](https://es6.ruanyifeng.com/#docs/let#基本用法) ```javascript var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 var a = []; for (var i = 0; i < 10; i++) { var f = function (i) { // 返回 匿名函數 // 匿名函數中的 i 會指向 此實參數 i ，但是返回 匿名函數后， i 就會 和 上面的 i 脫鉤 return function () { // i 被傳入 匿名函數 暫存 console.log(i); } }; // 執行函數，將 i 傳入 a[i] = f(i); } a[6](); // 6 var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 ``` ---- last update: 2020-11-02 12:20:11