从JS执行过程剖析作用域提升、作用域链及闭包的概念
2023-09-23 13:31:32
前言
JavaScript是一门非常灵活、强大的语言，但它也有一些容易让人困惑的概念，其中之一就是作用域。
作用域决定了变量和函数在程序中的可见性。
在本文中，我们将从JavaScript执行过程的角度，深入浅出地剖析作用域提升、作用域链以及闭包的概念。通过对这些概念的理解，可以帮助开发者更好地编写出健壮、可维护的JavaScript代码。
JavaScript的执行过程
为了理解作用域，我们首先需要了解JavaScript的执行过程。
JavaScript的执行过程可以分为以下几个阶段：
- 词法分析 ：将源代码解析成一系列的标记（token）。
- 语法分析 ：将标记组合成语法树（AST）。
- 代码生成 ：将语法树编译成机器码。
- 执行 ：运行机器码。
在执行阶段，JavaScript解释器会逐行读取代码，并执行其中的语句。
在执行一条语句之前，解释器会先检查该语句中是否使用了变量或函数。
如果使用了，解释器会先在当前作用域中查找该变量或函数。
如果在当前作用域中找不到，解释器会沿着作用域链向上查找。
如果在作用域链中找到了该变量或函数，解释器就会执行该语句。
作用域提升
在JavaScript中，变量和函数在声明之前就可以使用，这就是作用域提升。
作用域提升是JavaScript的一项非常重要的特性，它可以使代码更加简洁和易读。
例如，以下代码是有效的：
function sayHello() {
console.log('Hello!');
}
sayHello();
即使sayHello函数在声明之前就被调用，但它仍然可以正常执行。
这是因为在执行sayHello()语句之前，解释器会先将sayHello函数提升到当前作用域的顶部。
作用域链
作用域链是一个由作用域组成的链条。
每个作用域都包含一个变量和函数的对象。
当解释器执行一条语句时，它会先在当前作用域中查找该语句中使用的变量或函数。
如果在当前作用域中找不到，解释器会沿着作用域链向上查找。
例如，以下代码中，函数foo()嵌套在函数bar()中：
function bar() {
var x = 10;
function foo() {
console.log(x);
}
foo();
}
bar();
当解释器执行foo()函数时，它会在foo()函数的作用域中查找变量x。
在foo()函数的作用域中找不到变量x，解释器会沿着作用域链向上查找。
在bar()函数的作用域中，找到了变量x，解释器就会执行console.log(x)语句，并将变量x的值10输出到控制台。
闭包
闭包是指能够访问其他函数作用域中变量的函数。
闭包在JavaScript中非常常见，它可以用于实现许多强大的功能，例如：
- 模块化开发
- 私有变量和函数
- 事件处理
- 延迟执行
例如，以下代码中，函数foo()返回了一个闭包：
function foo() {
var x = 10;
return function() {
console.log(x);
};
}
var bar = foo();
bar();
当执行foo()函数时，解释器会在foo()函数的作用域中创建一个变量x，并将它的值设置为10。
然后，解释器会返回一个闭包，该闭包可以访问变量x。
当执行bar()函数时，解释器会在bar()函数的作用域中查找变量x。
在bar()函数的作用域中找不到变量x，解释器会沿着作用域链向上查找。
在foo()函数的作用域中，找到了变量x，解释器就会执行console.log(x)语句，并将变量x的值10输出到控制台。
总结
在本文中，我们从JavaScript执行过程的角度，深入浅出地剖析了作用域提升、作用域链以及闭包的概念。
这些概念是JavaScript中非常重要的基础知识，理解了这些概念，可以帮助开发者更好地编写出健壮、可维护的JavaScript代码。
