攻克JavaScript面试：理解闭包与作用域链的实战指南
项目地址: https://gitcode.com/GitHub_Trending/ja/javascript-questions 你是否在JavaScript面试中遇到过这样的问题：为什么循环中的定时器总是输出相同的值？为什么函数内部能访问外部变量？这些问题的核心都指向JavaScript的闭包（Closure）与作用域链（Scope Chain）机制。本文将通过README.md中的经典面试题，带你系统掌握这两个高频考点，让你在面试中从容应对。
作用域链：变量查找的"路径地图"
JavaScript中的每个函数都有自己的作用域，当访问一个变量时，解释器会从当前作用域开始查找，如果找不到就向上一级作用域查找，直到全局作用域。这个查找过程形成的链条就是作用域链。
经典案例分析
请看README.md中的代码：
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
第一个循环使用var声明变量i，由于var是函数作用域，整个循环共享同一个i。当定时器回调执行时，循环已经结束，i的值为3，因此输出三个3。
第二个循环使用let声明变量i，let是块级作用域，每次循环都会创建一个新的i。定时器回调捕获的是每次循环的i，因此输出0 1 2。
作用域链的工作原理
THE 0TH POSITION OF THE ORIGINAL IMAGE
如上图所示，当函数执行时，会创建一个执行上下文，其中包含变量对象和作用域链。作用域链的前端是当前函数的变量对象，后端是外层函数的变量对象，依次类推直到全局变量对象。
闭包：函数与环境的"永恒绑定"
闭包是指有权访问另一个函数作用域中变量的函数。简单来说，闭包就是一个函数及其捆绑的周边环境状态的引用的组合。
闭包的形成条件
- 函数嵌套
- 内部函数引用外部函数的变量
- 内部函数被外部访问
实战案例解析
README.md中的代码展示了闭包的典型应用：
let c = { greeting: 'Hey!' };
let d;
d = c;
c.greeting = 'Hello';
console.log(d.greeting); // 输出"Hello"
虽然这不是传统意义上的闭包，但展示了JavaScript中引用类型的特性。对象c和d指向同一个内存地址，当c的属性改变时，d也会受到影响。
闭包的实际应用
- 数据私有化
function createCounter() {
let count = 0;
return {
increment: () => count++,
decrement: () => count--,
getCount: () => count
};
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 输出1
- 防抖节流
// 防抖函数
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}
常见面试题解析
题1：this指向问题
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius,
};
console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NaN
解析：diameter是普通函数，this指向shape对象；perimeter是箭头函数，箭头函数没有自己的this，它的this指向外层作用域，即全局作用域，而全局作用域中没有radius属性，因此返回NaN。
题2：变量提升与函数提升
function sayHi() {
console.log(name);
console.log(age);
var name = 'Lydia';
let age = 21;
}
sayHi(); // undefined, ReferenceError
解析：var声明的变量会提升到函数顶部，但初始化不会提升，因此console.log(name)输出undefined。let声明的变量存在暂时性死区，在声明前访问会抛出ReferenceError。
总结与实战建议
闭包和作用域链是JavaScript的核心概念，也是面试中的高频考点。掌握它们不仅能帮助你通过面试，更能写出更优雅、更高效的代码。
关键要点回顾
- 作用域链决定了变量的查找顺序
- 闭包允许函数访问外部作用域的变量
var和let的区别在于作用域和提升行为- 箭头函数没有自己的
this，它继承外层作用域的this
进一步学习资源
通过README.md中的100+面试题练习，你可以巩固这些知识点，为面试做好充分准备。记住，理解概念比死记硬背更重要，多动手实践才能真正掌握JavaScript的精髓。
点赞收藏本文，关注作者获取更多JavaScript面试技巧，下期我们将深入探讨原型链与继承！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
