一、作用域和作用域链

引言

在 JavaScript 中，作用域是指变量在代码中可访问的范围。理解 JavaScript 的作用域和作用域链对于编写高质量的代码至关重要。本文将详细介绍 JavaScript 中的词法作用域、作用域链和闭包的概念，并探讨它们在实际开发中的应用场景。

1.词法作用域

1）概念

词法作用域是 JavaScript 中最常见的作用域类型。它是在代码编写阶段确定的，而不是在代码执行阶段确定的。在词法作用域中，变量的访问权限是由它们在代码中的位置决定的。

2）示例

function outer() {
  var outerVariable = "Hello";
  function inner() {
    var innerVariable = "World";
    console.log(outerVariable + " " + innerVariable);
  }
  inner();}
outer(); // 输出: Hello World

在上面的示例中，函数 inner 内部可以访问外部函数 outer 中定义的变量 outerVariable，这是因为它们处于词法作用域中。词法作用域确保了变量在代码编写阶段就能够正确地被访问。

3）词法作用域的应用场景

词法作用域在 JavaScript 中有广泛的应用场景，包括：

• 变量访问控制：词法作用域使得我们可以控制变量的可见性和访问权限，避免命名冲突和变量污染。
  
• 模块化开发：通过使用函数和闭包，可以实现模块化的代码组织，将变量和函数封装在私有作用域中，提供了良好的封装性和代码组织性。
  
• 函数嵌套：函数嵌套是 JavaScript 中常见的编程模式，词法作用域确保了内部函数可以访问外部函数的变量，实现了信息的隐藏和封装。
  

2. 作用域链

1） 概念

作用域链是 JavaScript 中用于查找变量的一种机制。它由当前作用域和所有父级作用域的变量对象组成。当访问一个变量时，JavaScript 引擎会首先在当前作用域的变量对象中查找，如果找不到，则沿着作用域链向上查找，直到找到变量或者到达全局作用域。

Global Execution Context
   |
   +-- Function Execution Context 1
   |      |
   |      +-- Function Execution Context 2
   |             |
   |             +-- Function Execution Context 3
   |
   +-- Function Execution Context 4

2） 示例

var globalVariable = "Global";
function outer() {
  var outerVariable = "Hello";
  function inner() {
    var innerVariable = "World";
    console.log(globalVariable + " " + outerVariable + " " + innerVariable);
  }
  inner();}
outer(); // 输出: Global Hello World

在上面的示例中，函数 inner 内部可以访问全局作用域中定义的变量 globalVariable，以及外部函数 outer 中定义的变量 outerVariable，这是因为 JavaScript 引擎按照作用域链的顺序查找变量。

带你读《现代Javascript高级教程》一、作用域和作用域链（2）https://developer.aliyun.com/article/1349715?groupCode=tech_library