想搞懂 JavaScript 中的闭包，关键在于理解堆栈内存和作用域

前端

2023-09-08 20:42:42

前言

JavaScript 中的闭包是一个非常重要的概念，它可以让函数访问其外部作用域的变量，即使这些变量在函数执行后已经不存在了。闭包在 JavaScript 中有很多应用，如实现私有变量、模拟块级作用域等。

本文将深入探讨 JavaScript 中的闭包，从堆栈内存和作用域的角度来理解闭包的原理和应用。

堆栈内存和作用域

在 JavaScript 中，内存主要分为两部分：堆栈内存和堆内存。

堆栈内存 ：堆栈内存是用来存储变量和函数调用信息。变量在函数执行时被创建，在函数执行结束时被销毁。函数调用信息包括函数的参数、局部变量等。
堆内存 ：堆内存是用来存储对象和数组。对象和数组在创建时被分配在堆内存中，直到它们被销毁才会被释放。

作用域是指变量和函数的有效范围。变量的作用域由其所在的作用域链决定。作用域链是由函数的调用关系决定的，最外层的函数的作用域链最长，最内层的函数的作用域链最短。

闭包的原理

闭包就是函数和与其相关的引用环境组合在一起的一个概念。闭包使我们能够访问其他函数作用域中的变量，即使这些变量所在的函数已经执行结束了。

闭包的原理是：当一个函数被执行时，它会创建一个执行上下文。执行上下文包含了函数的参数、局部变量、函数体以及指向其父函数执行上下文的引用。

当函数执行结束后，其执行上下文会被销毁，但是指向其父函数执行上下文的引用仍然存在。这意味着，即使函数执行结束了，我们仍然可以通过这个引用来访问其父函数执行上下文中的变量。

闭包的应用

闭包在 JavaScript 中有很多应用，如实现私有变量、模拟块级作用域等。

实现私有变量

在 JavaScript 中，没有私有变量的概念。但是，我们可以通过闭包来实现私有变量。

function Person(name) {
  var privateName = name;

  this.getName = function() {
    return privateName;
  };
}

var person = new Person("John Doe");
console.log(person.getName()); // "John Doe"
console.log(person.privateName); // undefined

在这个例子中，privateName 是一个私有变量，只能通过 getName 方法来访问。当 Person 函数执行结束后，privateName 变量会被销毁，但是指向其父函数执行上下文的引用仍然存在，因此我们仍然可以通过 getName 方法来访问 privateName 变量。

模拟块级作用域

JavaScript 中没有块级作用域的概念，但是我们可以通过闭包来模拟块级作用域。

for (var i = 0; i < 3; i++) {
  (function() {
    var j = i;
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })();
}

在这个例子中，我们使用闭包来模拟块级作用域。当 for 循环执行时，它会创建一个执行上下文，其中包含了变量 i 和函数 (function() {})。函数 (function() {}) 被立即执行，它会创建一个新的执行上下文，其中包含了变量 j 和函数 setTimeout(function() {}, 1000)。

当 setTimeout(function() {}, 1000) 被执行时，它会创建一个新的执行上下文，其中包含了函数 console.log(j)。由于 j 变量在闭包中被捕获，因此即使 for 循环执行结束后，j 变量仍然存在。