文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本文是《千古前端图文教程》中「作用域和闭包」专题的深度展开围绕 07-JavaScript进阶/作用域.md 的核心脉络系统讲解 JavaScript 中变量提升、this 指向、作用域、作用域链与闭包这五块环环相扣的核心知识。这些内容不仅是面试中的高频考点变量提升、this 的多种使用场景、闭包应用等更是理解原型链、异步编程、Vue/React 源码的必备基础。读完本文你将能独立解释「创建 10 个a标签点击弹出对应序号」的经典问题并能在实际开发中正确使用闭包封装模块、规避内存泄漏。本文主体严格基于该文档展开并补充了仓库内 04-JavaScript基础/23-作用域、变量提升、函数提升.md、04-JavaScript基础/25-this指向.md、04-JavaScript基础/26-闭包.md、04-JavaScript基础/24-预编译.md 等关联文档的详细讲解形成完整闭环。一、开篇关于作用域的经典面试题在正式开始之前先列出「作用域和闭包」这一主题下最常见的面试问题带着问题去阅读理解会更深说一下对变量提升的理解说明 this 的几种不同的使用场景创建 10 个a标签点击的时候弹出来对应的序号如何理解作用域实际开发中闭包的应用上述问题涉及到的知识点包括执行上下文、this、作用域、作用域链、闭包。接下来逐一展开。二、执行上下文代码执行前的「环境准备」1. 执行上下文的两种类型执行上下文Execution Context主要有两种情况全局代码一段script标签里有一个全局的执行上下文。它所做的事情是变量定义、函数声明。函数代码每个函数里有一个上下文。它所做的事情是变量定义、函数声明、this、arguments。PS注意「函数声明」和「函数表达式」的区别两者在预编译阶段的处理方式完全不同详见下文「函数的声明提前」。2. 全局执行上下文在执行全局代码前浏览器将 window 确定为全局执行上下文并完成对全局数据的预处理此时只是准备并没有赋值var定义的全局变量 undefined添加为 window 的属性function声明的全局函数 赋值函数本体添加为 window 的方法this 赋值window。完成预处理之后才开始执行全局代码。3. 函数执行上下文在调用函数、准备执行函数体之前会创建对应的函数执行上下文对象虚拟的存在于栈中。对局部数据进行预处理形参变量 赋值实参 添加为执行上下文的属性arguments 赋值实参列表添加为执行上下文的属性var定义的局部变量 undefined添加为执行上下文的属性function声明的函数 赋值函数本体添加为执行上下文的方法this 赋值调用函数的对象。完成预处理之后才开始执行函数体代码。4. 执行上下文栈压栈与出栈JS 引擎通过一个执行上下文栈Execution Context Stack也叫调用栈来管理所有执行上下文对象其运行规则如下在全局代码执行前JS 引擎就会创建一个栈来存储管理所有的执行上下文对象在全局执行上下文window确定后将其添加到栈中压栈在函数执行上下文创建后将其添加到栈中压栈在当前函数执行完后将栈顶的对象移除出栈当所有的代码执行完后栈中只剩下 window。可以这样理解全局上下文永远在栈底函数执行时压栈函数执行完毕后出栈销毁后进先出LIFO。这也是递归调用不设边界条件时会出现「栈溢出Maximum call stack size exceeded」的根本原因——不断压栈却不出栈。三、this指向调用函数的那个对象1. this 的本质this 指的是调用函数的那个对象this 永远指向函数运行时所在的对象。解析器在调用函数时每次都会向函数内部传递进一个隐含的参数这个隐含的参数就是 this。需要特别提醒的是this 的指向在函数定义时无法确认只有函数执行时才能确定。同一个函数被不同的对象以不同方式调用this 的指向就会不同。2. 四种调用方式与 this 的指向【重要】根据函数的调用方式的不同this 会指向不同的对象以函数的形式调用时this 永远都是 window。比如fun();相当于window.fun();以方法的形式调用时this 是调用方法的那个对象以构造函数的形式调用时this 是新创建的那个对象使用 call 和 apply 调用时this 是指定的那个对象。补充说明结合 04-JavaScript基础/25-this指向.md 的六种调用形式细分以函数的形式包括普通函数、定时器函数、立即执行函数调用时this 的指向永远都是 window以方法的形式调用时this 指向调用方法的那个对象以构造函数的形式调用时this 指向实例对象以事件绑定函数的形式调用时this 指向绑定事件的对象使用 call 和 apply 调用时this 指向指定的那个对象ES6 的箭头函数不遵循上述准则而是继承外层函数调用的 this 绑定无论 this 绑定到什么。3. this 的四种常见场景与代码演示场景 1作为构造函数执行function Foo(name) { //this {}; this.name name; //return this; } var foo new Foo();构造函数内部的 this 指向新建的实例对象所以this.name name给实例对象添加了 name 属性。场景 2作为对象的属性执行以方法的形式调用var obj { name: A, printName: function () { console.log(this.name); } } obj.printName();这里obj.printName()是以方法的形式调用this 指向调用方法的对象 obj打印结果为A。场景 3作为普通函数执行function fn() { console.log(this); //this window } fn();以函数形式直接调用this 指向 window。场景 4使用 call / apply / bind 指定 thisvar obj1 { nickName: qianguyihao, age: 28 }; function fn1(a, b) { console.log(this); console.log(this.nickName); console.log(a b); } fn1.call(obj1, 2, 4); // 先将 this 指向 obj1然后执行 fn1() 函数 // 打印结果obj1、qianguyihao、6call()可以调用一个函数并改变其内部的 this 指向apply()与 call 作用相同区别是实参必须以数组或伪数组形式传入例如fn1.apply(obj1, [hello])bind()不会立即调用函数而是返回一个由指定 this 和指定实参构成的原函数拷贝适合「不立即调用、但想改变 this 指向」的场景。实际开发中 bind 使用得最为频繁。顺带一提call/apply 还有一个经典应用利用Math.max.apply(Math, arr)求数组元素的最大值这是因为 apply 恰好接收数组。4. this 与闭包的经典问题创建 10 个a标签回顾开篇面试题「创建 10 个a标签点击的时候弹出来对应的序号」直接使用 var 的常见写法会出现「点击任意一个都弹出 5」的现象// 问题写法ES5点击任意 a 标签打印的都是 5 for (var i 0; i myDiv.length; i) { myDiv[i].onclick function () { console.log(i); // 打印结果为 5 } }原因在于for 循环执行完毕后i 已经等于 5而事件回调函数中的i通过作用域链向上查找时找到的是同一个全局变量 i因此所有回调打印的都是同一个值 5。此时若想打印每个元素的序号应使用this事件绑定函数的形式调用时this 指向绑定事件的对象myDiv[i].onclick function () { console.log(this.id); }而使用闭包或 ES6 的let i则可以给每次循环「保存一份独立的 i」这正是闭包在实战中最典型的应用场景之一。四、作用域变量的作用范围1. 什么是作用域作用域指一个变量的作用范围。它是静态的相对于上下文对象在编写代码时就确定了而不是在调用时确定的。作用域的作用隔离变量不同作用域下同名变量不会有冲突。作用域的分类ES5 语境全局作用域函数作用域没有块级作用域ES6 有了例如下面这段代码在 ES5 中并不会报错因为 name 虽然是在块{}里面定义的但 var 声明的 name 是全局变量if (true) { var name smyhvae; } console.log(name);作为对比04-JavaScript基础/23-作用域、变量提升、函数提升.md 中给出了更完整的说明在 Java、C# 等其他语言中存在由{}包裹的块级作用域而 ES5 没有引入let/const后ES6 才真正拥有块级作用域且let/const还存在「暂时性死区TDZ」——在声明语句之前使用该变量会报错。2. 全局作用域直接编写在 script 标签中的 JS 代码都在全局作用域。在全局作用域中有一个全局对象 window它代表的是一个浏览器的窗口由浏览器创建我们可以直接使用创建的变量都会作为 window 对象的属性保存创建的函数都会作为 window 对象的方法保存。全局作用域中的变量都是全局变量在页面的任意部分都可以访问到。3. 变量提升变量的声明提前使用 var 关键字声明的变量比如var a 1会在所有的代码执行之前被声明但是不会赋值但是如果声明变量时不是用 var 关键字比如直接写a 1则变量不会被声明提前。举例 1var 声明被提升打印 undefined 而非报错console.log(a); var a 123;打印结果undefined。说明变量 a 被提前声明了只是尚未被赋值。举例 2未用 var 声明直接报错console.log(a); a 123; //此时a相当于window.a程序会报错Uncaught ReferenceError: a is not defined。补充来自 04-JavaScript基础/24-预编译.md 的规律任何变量如果未经声明就赋值此变量属于 window 的属性而且不会做变量提升一切在全局作用域内声明的变量全是 window 的属性。因此 window 可以理解为「代表」了全局作用域。4. 函数提升函数的声明提前使用函数声明的形式创建的函数function foo(){}会被声明提前。也就是说它会在所有的代码执行之前就被创建所以我们可以在函数声明之前调用函数。使用函数表达式创建的函数var foo function(){}不会被声明提前所以不能在声明前调用。很好理解因为此时 foo 被声明了且值为 undefined并没有给其赋值function(){}。所以说下面的例子会报错函数表达式形式foo(); // 报错foo 此时是 undefined无法作为函数调用 var foo function () { console.log(我是 foo 函数); };函数提升优先于变量提升在 JS 的规则中函数提升优先于变量提升。这是一道经典面试题fun(); // 打印 B // 变量提升 var fun function () { console.log(A); }; // 函数提升 function fun() { console.log(B); } fun(); // 打印 A打印结果依次为B、A。当声明被提前后上方代码的实际执行顺序可以理解为// 伪代码函数提升优先 function fun() { console.log(B); } var fun undefined; fun(); // 打印 B fun function () { console.log(A); }; fun(); // 打印 A注意以上是 ES5 写法。如果改用 ES6 的 let/const 重复声明 fun会直接报错Uncaught SyntaxError: Identifier fun has already been declaredES6 中不再需要关心谁优先提升的问题。5. 函数作用域调用函数时创建函数作用域函数执行完毕以后函数作用域销毁。每调用一次函数就会创建一个新的函数作用域它们之间是互相独立的在函数作用域中可以访问到全局作用域的变量在全局作用域中无法访问到函数作用域的变量在函数中要访问全局变量可以使用 window 对象比如说全局作用域和函数作用域都定义了变量 a想访问全局变量时使用window.a。提醒 1在函数作用域中同样有声明提前的特性使用 var 关键字声明的变量是在函数作用域内有效而且会在函数中所有的代码执行之前被声明函数声明也会在函数中所有的代码执行之前执行。因此在函数中没有 var 声明的变量都会成为全局变量而且并不会提前声明。举例var a 1; function foo() { console.log(a); a 2; // 此处的a相当于window.a } foo(); console.log(a); //打印结果是2上方代码中foo() 内部的打印结果是1访问的是全局变量 a。如果去掉第一行var a 1则 foo() 内部打印结果是Uncaught ReferenceError: a is not defined因为此时 a 尚未声明函数内赋值的a 2不会提前声明。提醒 2定义形参就相当于在函数作用域中声明了变量。function fun6(e) { console.log(e); } fun6(); //打印结果为 undefined fun6(123); //打印结果为1236. 预编译变量提升背后的机制如果还想再深入一层可以了解 04-JavaScript基础/24-预编译.md 中讲解的预编译机制。JavaScript 运行三部曲是语法分析 → 预编译 → 解释执行。函数预编译发生在函数执行的前一刻其步骤为创建 AO 对象Activation Object活跃对象即「执行期上下文」找形参和变量声明将形参名和变量名作为 AO 的属性名值为 undefined将实参值和形参统一实参的值赋给形参查找函数声明函数名作为 AO 对象的属性名值为整个函数体。理解函数预编译才能真正理解函数内变量的执行顺序。例如function fn(a) { console.log(a); // ƒ a() {} 函数声明覆盖了形参和var声明 var a 666; console.log(a); // 666 function a() {} console.log(a); // 666 var b function() {}; console.log(b); // ƒ () {} function c() {} } fn(1);打印结果为ƒ a() {}、666、666、ƒ () {}原因正是预编译阶段函数声明的优先级高于形参与 var 变量声明。7. 作用域与执行上下文的区别与联系区别 1产生时机不同全局作用域之外每个函数都会创建自己的作用域作用域在函数定义时就已经确定了而不是在函数调用时全局执行上下文环境是在全局作用域确定之后、JS 代码马上执行之前创建函数执行上下文是在调用函数时、函数体代码执行之前创建。区别 2静态与动态作用域是静态的只要函数定义好了就一直存在且不会再变化执行上下文是动态的调用函数时创建函数调用结束时就会自动释放。联系执行上下文对象是从属于所在的作用域的全局上下文环境 全局作用域函数上下文环境 对应的函数作用域。五、作用域链变量的查找规则1. 作用域链的形成当在函数作用域操作一个变量时它会先在自身作用域中寻找如果有就直接使用就近原则如果没有则向上一级作用域中寻找直到找到全局作用域如果全局作用域中依然没有找到则会报错 ReferenceError。外部函数定义的变量可以被内部函数所使用反之则不行。只要是函数就可以创造作用域函数中又可以再创建函数如果有多个函数嵌套那么就会构成一个链式访问结构这就是作用域链!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title script //只要是函数就可以创造作用域 //函数中又可以再创建函数 //函数内部的作用域可以访问函数外部的作用域 //如果有多个函数嵌套那么就会构成一个链式访问结构这就是作用域链 //f1---全局 function f1(){ //f2---f1---全局 function f2(){ //f3----f2---f1---全局 function f3(){ } //f4---f2---f1----全局 function f4(){ } } //f5---f1----全局 function f5(){ } } /script /head body /body /html理解要点多个上下级关系的作用域形成的链它的方向是从下向上的从内到外查找变量时就是沿着作用域链来查找的。2. 查找一个变量的三步规则var a 1 function fn1() { var b 2 function fn2() { var c 3 console.log(c) // 3 console.log(b) // 2 console.log(a) // 1 console.log(d) // 报错Uncaught ReferenceError: d is not defined } fn2() } fn1()查找规则在当前作用域下的执行上下文中查找对应的属性如果有直接返回否则进入第 2 步在上一级作用域的执行上下文中查找对应的属性如果有直接返回否则进入第 3 步再次执行第 2 步的相同操作直到全局作用域如果还找不到就抛出找不到的异常ReferenceError。04-JavaScript基础/23-作用域、变量提升、函数提升.md 中还有一个更直观的示例当全局与函数内都定义了同名变量 num 时内部函数打印的是内层作用域的值就近原则var num 10; function fn() { var num 20; // 外部函数 function fun() { // 内部函数 console.log(num); // 打印 20就近取内层作用域的 num } fun(); } fn();六、闭包让外部作用域访问内部局部变量1. 为什么需要闭包变量根据作用域的不同分为两种全局变量和局部变量。函数内部可以访问全局变量和局部变量函数外部只能访问全局变量不能访问局部变量当函数执行完毕本作用域内的局部变量会销毁。但在某些场景下我们就是想要在函数外部访问函数内部作用域的局部变量这就引入了闭包。2. 闭包的概念与代码示例闭包如果外部作用域有权访问另外一个函数内部的局部变量时那就产生了闭包。这个内部函数称之为闭包函数。注意这里强调的是访问局部变量。function fun1() { const a 10; return function fun2() { console.log(a); }; } fun1(); // 调用外部函数就能得到内部函数并用 变量 result 接收 const result fun1(); // 在 fun1函数的外部执行了内部函数 fun2并访问到了 fun2 的内部变量 a result(); // 10打印结果10。上方代码中外部作用域即全局作用域访问了函数 fun1 中的局部变量 a那么在 fun1 中就产生了闭包函数 fun1 是闭包函数。全局作用域中并没有定义变量 a正常情况下函数内的局部变量 a 无法被外部访问但通过闭包我们最后还是可以在全局作用域中拿到局部变量 a 的值。注意闭包函数是 fun1不是 fun2。fun2 在这里的作用是让全局作用域访问到变量 a它只是一个桥梁。3. 闭包的生命周期产生内部函数被声明时即被创建时不是被调用时就产生了死亡嵌套的内部函数成为垃圾对象时比如将引用闭包的变量置为 null即可让其成为垃圾对象。可以在 Chrome 浏览器控制台中设置断点当代码执行到console.log(a)这一行时调试面板中的 Local 表示局部作用域、Global 表示全局作用域、Closure 表示闭包fn1 是一个闭包函数从而直观验证闭包确实产生了。4. 闭包的两种表现形式形式 1将一个函数作为另一个函数的返回值function fn1() { var a 2 function fn2() { a console.log(a) } return fn2 } var f fn1(); //执行外部函数fn1返回的是内部函数fn2 f() // 3 //执行fn2 f() // 4 //再次执行fn2当 f() 第二次执行的时候a 加 1 了说明闭包里的数据没有消失而是保存在了内存中。如果没有闭包代码执行完倒数第三行后变量 a 就消失了。上面代码中虽然调用了内部函数两次但闭包对象只创建了一个。也就是说要看闭包对象创建了几个就看外部函数执行了几次与内部函数执行几次无关。形式 2将函数作为实参传递给另一个函数调用在定时器、事件监听、Ajax 请求、Web Workers 或者任何异步中只要使用了回调函数实际上就是在使用闭包function showDelay(msg, time) { setTimeout(function() { //这个function是闭包因为是嵌套的子函数而且引用了外部函数的变量msg alert(msg) }, time) } showDelay(qianguyihao, 2000)上面的代码中闭包是里面的 function因为它是嵌套的子函数而且引用了外部函数的变量 msg。5. 闭包的作用作用 1延长局部变量的生命周期作用 2让函数外部可以操作读写函数内部的数据变量/函数。代码演示function fun1() { let a 2 function fun2() { a console.log(a) } return fun2; } const foo fun1(); //执行外部函数fn1返回的是内部函数fn2 foo() // 3 //执行fun2 foo() // 4 //再次执行fun2作用 1 分析一般来说fun1() 函数执行完毕后它里面的变量 a 会立即销毁但此时由于产生了闭包fun1 函数中的变量 a 不会立即销毁仍然保留在内存中因为 fn2 函数还要继续调用变量 a。只有等所有函数把变量 a 调用完了变量 a 才会销毁。作用 2 分析执行foo()之后竟然能打印出3这就通过闭包实现了全局作用域成功访问到了局部作用域中的变量 a。达到的效果是外界看不到变量 a但可以操作 a。当然如果你真想看到 a可以在 fun2 中将 a 返回。6. 闭包的应用场景场景 1高阶函数不同标准的成绩检测题目不同班级有不同成绩检测标准。A 班的合格线是 60 分B 班的合格线是 70 分。已知某个人班级和分数请用闭包函数判断他的成绩是否合格。// 高阶函数判断学生的分数是否合格。形参 standardTemp 为标准线 function createCheckTemp(standardTemp) { // 形参 n 表示具体学生的分数 function checkTemp(n) { if (n standardTemp) { alert(成绩合格); } else { alert(成绩不合格); } } return checkTemp; } // 创建一个 checkStandard_A 函数它以60分为合格线 var checkStandard_A createCheckTemp(60); // 再创建一个 checkStandard_B 函数它以70分为合格线 var checkStandard_B createCheckTemp(70); // 调用函数 checkStandard_A(65); // 成绩合格 checkStandard_B(65); // 成绩不合格因为有闭包存在所以并不会因为 createCheckTemp() 执行完毕后就销毁 standardTemp 的值且 A 班和 B 班的 standardTemp 参数不会混淆。场景 2封装 JS 模块闭包的第二个使用场景是定义具有特定功能的 JS 模块将所有的数据和功能都封装在一个函数内部只向外暴露指定的对象或方法。模块的调用者只能调用模块暴露的对象或方法来实现对应的功能。比如有这样一个需求定义一个私有变量 a要求 a 只能被进行指定操作加减不能进行其他操作乘除。在 Java、C 等语言中有私有属性的概念但在 JS 中只能通过闭包模拟。写法 1myModule.js 中定义一个模块向外暴露多个方法function myModule() { //私有数据 var msg Qinguyihao Haha //操作私有数据的函数 function doSomething() { console.log(doSomething() msg.toUpperCase()); //字符串大写 } function doOtherthing() { console.log(doOtherthing() msg.toLowerCase()) //字符串小写 } //通过【对象字面量】的形式进行包裹向外暴露多个函数 return { doSomething1: doSomething, doOtherthing2: doOtherthing } }上方代码中外界只能通过 doSomething1 和 doOtherthing2 来操作里面的数据但不让外界看到里面的具体实现。index.html 中这样调用script typetext/javascript srcmyModule.js/script script typetext/javascript var module myModule(); module.doSomething1(); module.doOtherthing2(); /script写法 2使用立即执行的匿名函数IIFE更简洁将方法直接挂到 window 上myModule2.js(function () { //私有数据 var msg Qinguyihao Haha //操作私有数据的函数 function doSomething() { console.log(doSomething() msg.toUpperCase()) } function doOtherthing() { console.log(doOtherthing() msg.toLowerCase()) } //外部函数是立即运行的匿名函数我们可以把两个方法直接传给window对象 window.myModule { doSomething1: doSomething, doOtherthing2: doOtherthing } })()引入该 js 文件后会立即执行里面的匿名函数在 index.html 中直接把 myModule 拿来用即可script typetext/javascript srcmyModule2.js/script script typetext/javascript myModule.doSomething1() myModule.doOtherthing2() /script写法 1 和写法 2 都采用了闭包二者选其一即可。这种「私有数据 暴露接口」的模式也正是现代 ES Module 出现之前前端模块化的常用手法。7. 闭包与内存内存泄漏与内存溢出内存泄漏占用的内存没有及时释放。内存泄漏的次数积累多了就容易导致内存溢出。常见的内存泄漏有意外的全局变量没有及时清理的计时器或回调函数闭包滥用时。情况 1 举例意外的全局变量function fn() { a new Array(10000000); // 未声明就赋值a 变成全局变量一直占用内存 console.log(a); } fn();情况 2 举例没有及时清理的计时器或回调函数var intervalId setInterval(function () { //启动循环定时器后不清理 console.log(----) }, 1000) // clearInterval(intervalId); //清理定时器情况 3 举例闭包被长期引用function fn1() { var a 4; function fn2() { console.log(a) } return fn2 } var f fn1() f() // f null //让内部函数成为垃圾对象--回收闭包内存溢出程序运行时出现的错误。当程序运行需要的内存超过剩余的内存时就抛出内存溢出的错误。举例var obj {}; for (var i 0; i 10000; i) { obj[i] new Array(10000000); //obj 占用了很大的内存空间 console.log(-----); }闭包是否会造成内存泄漏一般来说答案是否定的。因为内存泄漏是非预期情况——本来想回收但实际没回收而闭包是预期情况一般不会造成内存泄漏。但如果因代码质量不高、滥用闭包也会造成内存泄漏。因此使用完闭包后应及时将引用置为 null让内部函数成为垃圾对象以便回收。8. 闭包面试题多个闭包的独立性function addCount() { let count 0; return function () { count count 1; console.log(count); }; } const fun1 addCount(); const fun2 addCount(); fun1(); fun2(); fun1(); fun2();打印结果1 1 2 2代码解释fun1 和 fun2 这两个闭包函数是互不影响的因为各自调用了一次外部函数各自持有一份独立的 count 变量因此第一次调用时 count 变量都是 0最终各自都输出 1第二次调用时由于闭包有记忆性变量被保留在内存中所以各自会在上一次的结果上再加 1因此输出 2。七、知识地图在教程体系中的位置本主题是 JS 进阶阶段「三座大山」之一。仓库内 16-前端综合/01-Web前端开发流程和学习路线详尽版.md 中明确把「JS 三座大山原型与原型链、作用域及闭包、异步和单线程」列为 JS 高级阶段的核心内容并进一步列出了「作用域链、类、继承、原型继承」「this 的指向和绑定规则」「call、apply、bind」「JS 内存泄漏、JS 垃圾回收算法」等进阶要点。建议的学习路线基础篇04-JavaScript基础/23-作用域、变量提升、函数提升.md 建立作用域与声明提前的整体认知进阶篇本文以 07-JavaScript进阶/作用域.md 为主体打通执行上下文、this、作用域链与闭包的完整链路深化篇04-JavaScript基础/24-预编译.md 理解变量提升的底层机制、04-JavaScript基础/26-闭包.md 系统掌握闭包的全部应用、04-JavaScript基础/25-this指向.md 深入 call/apply/bind 的用法配套篇07-JavaScript进阶/this.md 与 07-JavaScript进阶/01-var、let、const的区别.md 分别补充 this 的运行时细节与 ES6 块级作用域、暂时性死区的对比。掌握作用域与闭包之后你再看 Vue 的响应式原理、React 的 Hooks、Promise 的异步回调等源码实现都会轻松很多——因为它们都建立在这套规则之上。赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐千古前端JavaScript入门如何快速理解变量、作用域和闭包千古前端JavaScript入门如何快速理解变量、作用域和闭包 想要快速掌握JavaScript编程变量、作用域和闭包是必须理解的三大核心概念。作为千古前端文档教程前端如何快速安装和管理Codex技能5个简单步骤提升你的AI工作流如何快速安装和管理Codex技能5个简单步骤提升你的AI工作流 在AI辅助编程的时代Codex技能已成为开发者提升效率的秘密武器。skill installAI 技能AI 插件工作流自动化人工智能攻克JavaScript面试理解闭包与作用域链的实战指南攻克JavaScript面试理解闭包与作用域链的实战指南 你是否在JavaScript面试中遇到过这样的问题为什么循环中的定时器总是输出相同的值为什么函数前端教程文档上一篇Windows平台Btrfs文件系统驱动完全指南下一篇终极Chrome搜索替换插件让网页文本编辑变得超简单的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考