js作用域及作用域链概念理解及使用

JS作用域及作用域链概念理解及使用攻略

1. 作用域的概念

在JavaScript中，作用域是指变量、函数和对象的可访问范围。作用域规定了在代码中的哪些部分可以访问变量、函数和对象。理解作用域对于编写可维护和可扩展的代码非常重要。

JavaScript中有三种作用域：
- 全局作用域：在整个程序中都可以访问的变量和函数。
- 函数作用域：在函数内部定义的变量和函数，只能在函数内部访问。
- 块级作用域：在ES6中引入的概念，使用let和const声明的变量具有块级作用域，只能在声明的块内部访问。

2. 作用域链的概念

作用域链是指在JavaScript中，每个作用域都有一个关联的变量对象列表。当访问一个变量时，JavaScript引擎会按照作用域链的顺序从内到外查找变量，直到找到该变量或者到达全局作用域。

作用域链的构建过程：
1. 在函数创建时，会创建一个称为“变量对象”的特殊对象，用于存储函数内部的变量和函数声明。
2. 在函数执行时，会创建一个称为“活动对象”的对象，用于存储函数执行过程中的变量和函数。
3. 当访问一个变量时，JavaScript引擎首先在当前作用域的活动对象中查找，如果找不到，则沿着作用域链向上查找，直到找到该变量或者到达全局作用域。

3. 示例说明

示例1：全局作用域和函数作用域

var globalVariable = 'Global'; // 全局变量

function foo() {
  var localVariable = 'Local'; // 函数内部变量
  console.log(localVariable); // 输出：Local
  console.log(globalVariable); // 输出：Global
}

foo();
console.log(globalVariable); // 输出：Global
console.log(localVariable); // 报错：localVariable未定义

在上面的示例中，globalVariable是一个全局变量，可以在整个程序中访问。localVariable是在函数foo内部定义的变量，只能在函数内部访问。在函数内部，可以访问函数内部的变量和全局变量。在函数外部，只能访问全局变量。

示例2：作用域链的查找顺序

var globalVariable = 'Global';

function outer() {
  var outerVariable = 'Outer';

  function inner() {
    var innerVariable = 'Inner';
    console.log(innerVariable); // 输出：Inner
    console.log(outerVariable); // 输出：Outer
    console.log(globalVariable); // 输出：Global
  }

  inner();
}

outer();
console.log(globalVariable); // 输出：Global
console.log(outerVariable); // 报错：outerVariable未定义
console.log(innerVariable); // 报错：innerVariable未定义

在上面的示例中，inner函数内部可以访问到innerVariable、outerVariable和globalVariable。在inner函数内部，首先在自己的活动对象中查找变量，找到了innerVariable。如果没有找到，就会沿着作用域链向上查找，找到了outerVariable和globalVariable。在outer函数外部，无法访问outerVariable和innerVariable，因为它们只在函数内部可见。

以上是关于JS作用域及作用域链概念的详细攻略，希望对你有所帮助！