一文带你掌握JavaScript中的执行上下文和作用域

执行上下文（Execution Context）

执行上下文是JavaScript中一个重要的概念，它定义了代码执行时的环境和变量访问规则。每当JavaScript代码执行时，都会创建一个执行上下文。

执行上下文包含三个重要的组成部分：

1. 变量对象（Variable Object）：用于存储变量、函数声明和函数参数。在执行上下文创建时，会创建一个变量对象，并将变量和函数声明添加到该对象中。

2. 作用域链（Scope Chain）：用于解析变量和函数的访问权限。作用域链是一个由多个执行上下文的变量对象组成的链表结构，它决定了变量和函数的可见性。

3. this值：指向当前执行上下文所属的对象。

作用域（Scope）

作用域是指变量和函数的可访问范围。JavaScript中有两种作用域：

1. 全局作用域（Global Scope）：全局作用域是在代码中任何地方都可以访问的作用域。在浏览器环境中，全局作用域是指window对象。

2. 局部作用域（Local Scope）：局部作用域是在函数内部定义的作用域。在函数内部定义的变量只能在函数内部访问。

下面是两个示例说明：

示例一：全局作用域和局部作用域

var globalVariable = \"I'm a global variable\";

function foo() {
  var localVariable = \"I'm a local variable\";
  console.log(globalVariable); // 可以访问全局变量
  console.log(localVariable); // 可以访问局部变量
}

foo();
console.log(globalVariable); // 可以访问全局变量
console.log(localVariable); // 无法访问局部变量，会抛出ReferenceError

在上面的示例中，globalVariable是一个全局变量，可以在任何地方访问。而localVariable是在函数foo内部定义的局部变量，只能在函数内部访问。

示例二：作用域链

var globalVariable = \"I'm a global variable\";

function outer() {
  var outerVariable = \"I'm an outer variable\";

  function inner() {
    var innerVariable = \"I'm an inner variable\";
    console.log(globalVariable); // 可以访问全局变量
    console.log(outerVariable); // 可以访问外部函数的变量
    console.log(innerVariable); // 可以访问当前函数的变量
  }

  inner();
}

outer();
console.log(globalVariable); // 可以访问全局变量
console.log(outerVariable); // 无法访问外部函数的变量，会抛出ReferenceError
console.log(innerVariable); // 无法访问内部函数的变量，会抛出ReferenceError

在上面的示例中，inner函数可以访问全局变量、外部函数outer的变量以及自身的变量。但是在外部函数outer和全局作用域中无法访问inner函数的变量。

希望这篇攻略能帮助你更好地理解JavaScript中的执行上下文和作用域。