作用域链和闭包：它们关系如此密切？

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

作用域链和闭包的详细解析

作用域链和闭包的详细解析

在 JavaScript 中，作用域链和闭包是理解变量作用域和函数行为的两个重要概念。它们在函数声明和执行上下文中起着至关重要的作用。下面将详细解释这两个概念，并提供相关示例。

一、作用域链（Scope Chain）

1.1 什么是作用域链？

作用域链是 JavaScript 中用于解析变量的机制。当在某个上下文中查找变量时，JavaScript 引擎会首先在当前作用域中查找，如果没有找到，会继续向外层作用域查找，直到全局作用域。这种嵌套查找的机制就形成了一个“链条”，称为作用域链。

1.2 作用域链的特点

嵌套作用域：每个函数都有自己的作用域，并且可以访问其外部作用域的变量。
查找顺序：从当前函数的作用域开始查找，如果没有找到，向外层作用域继续查找，直到全局作用域。

1.3 示例代码

let globalVar = "I'm a global variable";

function outerFunction() {
  let outerVar = "I'm an outer variable";

  function innerFunction() {
    let innerVar = "I'm an inner variable";
    console.log(innerVar); // 输出: I'm an inner variable
    console.log(outerVar); // 输出: I'm an outer variable
    console.log(globalVar); // 输出: I'm a global variable
  }

  innerFunction();
}

outerFunction();

在这里插入图片描述

在上面的例子中：

innerFunction 可以访问 innerVar、outerVar 和 globalVar，因为它们存在于其作用域链中。
outerFunction 也可以访问 globalVar，但无法访问 innerVar，因为 innerVar 只存在于 innerFunction 的作用域中。

二、闭包（Closure）

2.1 什么是闭包？

闭包是指一个函数以及创建该函数的词法环境的组合。换句话说，闭包是一个函数，可以“记住”其外部变量的引用，即使在其外部函数已经执行完毕后，仍然可以访问到这些外部变量。

2.2 闭包的特点

保持外部变量的引用：闭包允许函数访问其外部作用域的变量，即使外部函数已经返回。
封闭性：通过闭包可以形成一个私有变量的环境，这些变量只能通过特定的函数访问。

2.3 示例代码

function makeCounter() {
  let count = 0; // count 是闭包的私有变量

  return function() {
    count++; // 每次调用增加 count
    return count; // 返回当前 count
  };
}

const counter = makeCounter();

console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
console.log(counter()); // 输出: 3

在这里插入图片描述

在这个例子中，makeCounter 函数返回了一个内部函数。每次调用 counter 函数时，count 的值都会增加，保持了其状态，这就是闭包的特性。

三、作用域链与闭包的关系

关系密切：闭包的实现依赖于作用域链。当你创建一个闭包时，它会“记住”创建它的环境（即外部变量），而这些变量的查找依赖于作用域链。
应用场景：闭包常用于创建私有变量，封装状态，避免命名冲突以及实现一些函数式编程的特性。

结论

了解作用域链和闭包是掌握 JavaScript 变量作用域和函数行为的基础。作用域链帮助我们了解变量的查找机制，而闭包则提供了一种在函数内部保持状态的方式。通过这两个概念，开发者可以编写出更灵活和可维护的代码。