浅析JavaScript作用域链、执行上下文与闭包

2023年6月10日下午8:19 • JavaScript

让我来为你详细讲解一下“浅析JavaScript作用域链、执行上下文与闭包”的完整攻略。

一、作用域链

作用域是指程序中的变量能够被访问的范围。JavaScript采用的是词法作用域，也就是在定义变量时就确定了变量的作用域。作用域链就是由当前执行环境与其上层环境的变量对象组成的链表。在查找变量时，会沿着这个链表一级一级地向上查找，直到找到为止。如果最终还没有找到，则会返回一个“undefined”的值。

例如，我们定义了以下代码：

function foo() {
  var x = 10;
  function bar() {
    console.log(x);
  }
  return bar;
}
var b = foo();
b();

在上面的代码中，变量x同时存在于函数foo和函数bar的作用域中，因为JavaScript采用的是词法作用域，所以变量x在函数bar中的值也是10。在执行b()时，JavaScript引擎会从bar函数的活动对象开始，查找变量x，由于没有找到，会继续往上一层的作用域中查找，即函数foo的变量对象中查找，最终找到了x的值为10。

二、执行上下文

执行上下文是执行JavaScript代码时所在的环境。一个执行上下文可以包含多个作用域链，也就是说，一个函数执行时会创建一个执行上下文。每个执行上下文都有三个重要的属性：变量对象、作用域链和this指针。

2.1 变量对象

变量对象是一个包含执行上下文中定义的所有局部变量的对象。在函数执行前，JavaScript引擎会先创建一个变量对象，然后将其中的所有形参、函数声明和变量声明都添加到变量对象中。

例如，在以下代码中：

function foo(x, y) {
  console.log(x + y)
}
foo(1, 2)

在函数foo执行之前，JavaScript引擎会先创建一个变量对象，然后将x和y作为形参添加到变量对象中。

2.2 作用域链

作用域链是由执行上下文的变量对象和其所有上层环境的变量对象组成的链表。在查找变量时，JavaScript引擎会沿着作用域链一级一级向上查找，直到找到变量为止。如果最终还没有找到，就会返回一个“undefined”的值。

以函数bar为例，在函数执行时，JavaScript引擎会创建一个执行上下文。其中的作用域链就是由bar函数的变量对象和它上一层的函数foo的变量对象组成的链表。

2.3 this指针

this指针指向函数执行的上下文对象。在全局执行上下文中，this指向全局对象window。而在函数执行过程中，this指向的则是当前函数的调用对象。

例如，在以下代码中：

var name = 'global';
function foo() {
  console.log(this.name);
}
var obj = {
  name: 'object',
  foo: foo
}
foo(); // 输出 global
obj.foo(); // 输出 object

在全局执行上下文中，this指向全局对象window，因此在函数foo中，this.name的值为global。而在调用对象为obj时，this指向obj对象，因此在执行obj.foo()时，this.name的值为object。

三、闭包

闭包是指一个函数可以访问另一个函数作用域中的变量，即使这个函数已经返回了。在JavaScript中，闭包是通过函数中嵌套函数来实现的。

例如，在以下代码中：

function counter() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  }
}
var c1 = counter();
c1(); // 输出 1
c1(); // 输出 2
var c2 = counter();
c2(); // 输出 1

在函数counter中，我们定义了一个变量count，然后返回了一个嵌套在其中的函数。这个嵌套的函数就可以访问到变量count的值，并且每次调用都会对其进行修改。由于嵌套函数可以访问到其外层函数的局部变量，因此我们可以将函数counter看作是一个闭包。