JavaScript中扑朔迷离的闭包（closure）

2023-12-17 06:47:39

与闭包的关系
闭包对于前端程序员来说，可能是最熟悉的陌生人了。每个初学者都会被它谜一样的定义搞得晕头转向，甚至连很多经验丰富的开发人员也未必能够说清楚它是什么。

在JavaScript中，一个闭包就是一组相关的变量和函数，这些变量和函数被包装在一个特定的作用域内，使得它们可以在该作用域外部访问。举个简单的例子，下面的代码定义了一个闭包：

(function() {
  var name = "John Doe";

  function greet() {
    alert("Hello, " + name + "!");
  }

  greet();
})();

在这个例子中，闭包由函数greet()及其内部变量name组成。由于greet()是在一个独立的作用域中执行的，所以即使在函数执行之后，name变量仍然存在，并且可以被greet()访问。

闭包的类型

闭包可以分为两种类型：

自由变量闭包 ：自由变量闭包是那些包含对外部变量的引用的闭包。例如，上面的例子就是一个自由变量闭包，因为greet()函数引用了外部变量name。
词法闭包 ：词法闭包是那些不包含对外部变量的引用的闭包。例如，下面的代码定义了一个词法闭包：

var name = "John Doe";

function createGreeter() {
  return function() {
    alert("Hello, " + name + "!");
  };
}

var greeter = createGreeter();
greeter();

在这个例子中，闭包由匿名函数和变量name组成。由于匿名函数是在createGreeter()函数中定义的，所以它可以访问createGreeter()函数的作用域中的变量name。

闭包的优缺点

闭包既有优点也有缺点。

优点：

封装性 ：闭包可以将变量和函数封装在一个独立的作用域中，使得它们可以在该作用域外部访问，但不能被该作用域外部的代码修改。这可以提高代码的可维护性和安全性。
内存管理 ：闭包可以帮助我们更好地管理内存。当一个闭包被销毁时，它所引用的变量和函数也会被销毁。这可以防止内存泄漏。

缺点：

性能消耗 ：闭包可能会带来额外的性能消耗，因为它们需要在内存中分配额外的空间来存储变量和函数。
可读性 ：闭包可能会降低代码的可读性，因为它们可能会使代码结构更加复杂。

闭包的应用

闭包在JavaScript中有很多应用，例如：

事件处理程序 ：闭包可以用来为事件处理程序传递参数。例如，下面的代码使用闭包为按钮的click事件处理程序传递name参数：

var buttons = document.querySelectorAll("button");

for (var i = 0; i < buttons.length; i++) {
  (function(name) {
    buttons[i].addEventListener("click", function() {
      alert("Hello, " + name + "!");
    });
  })(buttons[i].innerHTML);
}

私有变量 ：闭包可以用来创建私有变量。例如，下面的代码使用闭包创建了一个私有变量name：

var Person = function() {
  var name = "John Doe";

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

  this.setName = function(newName) {
    name = newName;
  };
};

var person = new Person();

person.getName(); // "John Doe"

person.setName("Jane Doe");

person.getName(); // "Jane Doe"

模块化编程 ：闭包可以用来实现模块化编程。例如，下面的代码使用闭包创建了一个名为"module"的模块：

var module = (function() {

  var privateVariable = "I'm a private variable!";

  function privateFunction() {
    console.log(privateVariable);
  }

  return {
    publicVariable: "I'm a public variable!",

    publicFunction: function() {
      privateFunction();
    }
  };

})();

module.publicVariable; // "I'm a public variable!"

module.publicFunction(); // "I'm a private variable!"