JavaScript作用域和作用域链详解

JavaScript中的作用域是指变量、函数和对象的可访问范围。了解作用域和作用域链的概念对于理解JavaScript的工作原理至关重要。本攻略将详细讲解JavaScript作用域和作用域链的概念，并提供示例说明。

作用域

作用域定义了变量和函数的可访问范围。在JavaScript中，有三种作用域：全局作用域、函数作用域和块级作用域。

• 全局作用域：在代码的任何地方都可以访问的变量和函数。它们在整个程序中都是可见的。

• 函数作用域：在函数内部定义的变量和函数只能在函数内部访问。函数作用域可以帮助我们创建私有变量和函数。

• 块级作用域：在ES6中引入的新概念，使用let和const关键字声明的变量具有块级作用域。块级作用域只在当前代码块内部可见。

作用域链

作用域链是指在JavaScript中查找变量和函数的过程。当访问一个变量或函数时，JavaScript引擎会按照作用域链的顺序从内到外进行查找，直到找到对应的标识符或者到达全局作用域。

作用域链的构建是在函数定义时发生的，而不是在函数调用时。每当创建一个函数时，都会创建一个新的作用域，并将其添加到作用域链的顶部。

以下是一个示例说明作用域和作用域链的概念：

// 全局作用域
var globalVariable = 'Global';

function outerFunction() {
  // 函数作用域
  var outerVariable = 'Outer';

  function innerFunction() {
    // 函数作用域
    var innerVariable = 'Inner';
    console.log(innerVariable); // 输出 'Inner'
    console.log(outerVariable); // 输出 'Outer'
    console.log(globalVariable); // 输出 'Global'
  }

  innerFunction();
}

outerFunction();

在上面的示例中，innerFunction内部可以访问到其外部函数outerFunction的变量outerVariable，以及全局作用域中的变量globalVariable。这是因为JavaScript引擎在查找变量时会按照作用域链的顺序进行查找。

另一个示例说明块级作用域的概念：

// 全局作用域
var globalVariable = 'Global';

function blockScopeExample() {
  // 块级作用域
  if (true) {
    let blockVariable = 'Block';
    console.log(blockVariable); // 输出 'Block'
    console.log(globalVariable); // 输出 'Global'
  }

  console.log(blockVariable); // 报错，blockVariable不在作用域内
}

blockScopeExample();

在上面的示例中，blockVariable是在if语句的块级作用域中声明的，只能在该块级作用域内部访问。在块级作用域外部访问blockVariable会导致错误。

希望这个攻略能够帮助你理解JavaScript作用域和作用域链的概念。如果你有任何疑问，请随时提问！