深入探索JavaScript高级语法系列 - 深入理解ECMAScript的作用域

2023-12-12 08:23:13

重学JavaScript深入理解系列（二）：ECMAScript的作用域

作为一门现代化的编程语言，JavaScript的出现极大地改变了web开发的面貌，并在当今世界软件开发领域占有举足轻重的地位。学习JavaScript语言对于程序员而言是十分有必要的，然而要想真正掌握JavaScript语言，就必须深入理解ECMAScript的作用域。

理解ECMAScript的作用域

ECMAScript的作用域是变量和函数声明所在的区域，它控制着变量和函数的可见性和访问范围。JavaScript支持两种作用域：

全局作用域： 包含在所有函数之外声明的变量和函数。
函数作用域： 包含在函数内部声明的变量和函数。

全局作用域

在JavaScript中，全局作用域是一个特殊的对象，它包含了在所有函数之外声明的变量和函数。全局变量和全局函数在任何地方都可以访问和使用。

// 全局变量
var globalVariable = "Hello World";

// 全局函数
function globalFunction() {
  console.log(globalVariable);
}

函数作用域

在JavaScript中，函数作用域是一个私有空间，它包含了在函数内部声明的变量和函数。函数内部声明的变量和函数只能在该函数内部访问和使用。

function myFunction() {
  // 局部变量
  var localVariable = "I am local";

  // 局部函数
  function localFunction() {
    console.log(localVariable);
  }

  // 使用局部变量和局部函数
  localFunction();
}

// 在函数外部无法访问局部变量和局部函数
console.log(localVariable); // ReferenceError: localVariable is not defined
localFunction(); // ReferenceError: localFunction is not defined

作用域链

JavaScript中的作用域是层层嵌套的，一个作用域可以访问其外层作用域中的变量和函数。这种机制称为作用域链。

function outerFunction() {
  // 外层函数变量
  var outerVariable = "I am outer";

  function innerFunction() {
    // 内层函数变量
    var innerVariable = "I am inner";

    // 访问外层函数变量
    console.log(outerVariable); // I am outer

    // 访问内层函数变量
    console.log(innerVariable); // I am inner
  }

  // 调用内层函数
  innerFunction();
}

// 调用外层函数
outerFunction();

闭包

JavaScript中还有一种特殊的函数称为闭包。闭包是指能够访问其创建作用域中的变量和函数的函数。即使函数的创建作用域已经销毁，闭包仍然可以访问这些变量和函数。

function createCounter() {
  // 私有变量
  var counter = 0;

  // 返回一个闭包
  return function() {
    // 访问私有变量
    counter++;

    // 返回计数器值
    return counter;
  };
}

// 创建闭包
var counter = createCounter();

// 使用闭包
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3