JavaScript 作用域和作用域链|极客笔记

JavaScript 作用域和作用域链

JavaScript 是一种广泛应用于网页开发的脚本语言，它具有一种独特的作用域和作用域链机制。作用域指的是变量和函数的可访问范围，而作用域链则是指在嵌套的函数中访问变量时的搜索规则。深入理解 JavaScript 的作用域和作用域链对于编写高质量的代码和排查错误至关重要。

作用域

在 JavaScript 中，作用域分为全局作用域和局部作用域。全局作用域指的是在代码任何地方都可以访问的变量和函数，而局部作用域则是指变量和函数只在特定的代码块中可访问。

全局作用域

在 JavaScript 中，如果变量或函数在最外层定义，那么它就是全局作用域中的变量或函数。全局作用域中的变量和函数可以在代码的任何地方访问。

// 全局作用域中的变量
var globalVar = 'I am a global variable';

function globalFunction() {
  console.log('I am a global function');
}

// 在全局作用域中访问变量和函数
console.log(globalVar);
globalFunction();

局部作用域

在 JavaScript 中，局部作用域通常指的是在函数内部定义的变量和函数，它们只能在函数内部访问。当函数执行完毕后，局部作用域中的变量和函数将被销毁。

function localScopeExample() {
  // 函数内部定义的变量
  var localVar = 'I am a local variable';

  function localFunction() {
    console.log('I am a local function');
  }

  // 在局部作用域中访问变量和函数
  console.log(localVar);
  localFunction();
}

localScopeExample();

// 尝试在全局作用域中访问局部变量和函数
// console.log(localVar); // Error: localVar is not defined
// localFunction(); // Error: localFunction is not defined

作用域链

作用域链是 JavaScript 中非常重要的概念，它决定了变量和函数在嵌套的函数中的访问顺序。在 JavaScript 中，每个函数都有自己的作用域，函数在定义时会创建自己的作用域链。当函数执行时，它会从自己的作用域链中查找变量和函数，如果找不到则会沿着作用域链向上查找，直到找到为止。

作用域链的示例

var globalVar = 'I am a global variable';

function outerFunction() {
  var outerVar = 'I am an outer variable';

  function innerFunction() {
    var innerVar = 'I am an inner variable';

    // 访问内部变量
    console.log(innerVar);

    // 访问外部变量
    console.log(outerVar);
    console.log(globalVar);
  }

  innerFunction();
}

outerFunction();

// 尝试在全局作用域中访问内部变量
// console.log(innerVar); // Error: innerVar is not defined

// 尝试在全局作用域中访问外部变量
// console.log(outerVar); // Error: outerVar is not defined

在上面的示例中，outerFunction 是外部函数，innerFunction 是内部函数。当 innerFunction 在执行时，它首先会在自己的作用域链中查找变量 innerVar，找到后输出 I am an inner variable。然后它会沿着作用域链向上查找变量 outerVar，找到后输出 I am an outer variable。最后再向上查找变量 globalVar，找到后输出 I am a global variable。

作用域链的特点

作用域链具有以下几个特点：

内部函数可以访问外部函数的变量，但外部函数无法访问内部函数的变量。
内部函数可以访问外部函数的参数。
变量的查找是在定义函数时确定的，而不是在执行函数时确定的。

闭包

以上提到的特点中，第一个特点尤其重要。当内部函数在执行时访问外部函数的变量，即使外部函数已经执行完毕，这样的函数称为闭包。闭包可以保持对外部变量的引用，使其在函数执行时保持活动状态。

function outerFunction() {
  var outerVar = 'I am an outer variable';

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // 输出 I am an outer variable

在上面的示例中，outerFunction 返回了内部函数 innerFunction，并被赋值给变量 closure。当执行 closure 时，它仍然可以访问外部函数 outerFunction 中的变量 outerVar，这就是闭包的功效。