结合代码图文讲解JavaScript中的作用域与作用域链

JavaScript中的作用域与作用域链

作用域是指在程序中定义变量的区域，它决定了变量的可见性和生命周期。JavaScript中的作用域是基于函数的，每个函数都有自己的作用域。作用域链是指在嵌套的函数中，内部函数可以访问外部函数的变量，形成了一个链式结构。

作用域

JavaScript中有三种作用域：全局作用域、函数作用域和块级作用域。

• 全局作用域：在函数外部定义的变量拥有全局作用域，可以在整个程序中访问。
• 函数作用域：在函数内部定义的变量拥有函数作用域，只能在函数内部访问。
• 块级作用域：在ES6中引入了块级作用域，使用let和const关键字定义的变量拥有块级作用域，只能在块级作用域内部访问。

下面是一个示例说明作用域的概念：

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

function foo() {
  var functionVariable = 'Function'; // 函数作用域
  console.log(globalVariable); // 可以访问全局变量
  console.log(functionVariable); // 可以访问函数内部变量
}

foo();
console.log(globalVariable); // 可以在函数外部访问全局变量
console.log(functionVariable); // 无法在函数外部访问函数内部变量

作用域链

作用域链是指在嵌套的函数中，内部函数可以访问外部函数的变量。当内部函数访问一个变量时，它首先在自己的作用域中查找，如果找不到，就会向上一级作用域查找，直到找到该变量或者到达全局作用域。

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

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

  function inner() {
    var innerVariable = 'Inner';
    console.log(innerVariable); // 可以访问内部变量
    console.log(outerVariable); // 可以访问外部函数的变量
    console.log(globalVariable); // 可以访问全局变量
  }

  inner();
}

outer();

在上面的示例中，内部函数inner可以访问外部函数outer的变量outerVariable，以及全局变量globalVariable。这是因为内部函数的作用域链包含了外部函数的作用域。

希望这个攻略能够帮助你理解JavaScript中的作用域与作用域链。如果还有其他问题，请随时提问！