返回

闭包初识,简单几例让您秒懂闭包

前端

以前,我对于JavaScript闭包的概念感到难以理解,即使是硬背相关知识,也是为了应付面试的需求。然而,在最近阅读了许多文章后,我终于对闭包有了更深入的认识。我想和大家分享几个简单的例子,希望对你们也有所帮助。

闭包是函数内部声明的函数,该函数可以访问其外部函数的所有局部变量。如果外部函数返回这个内部函数,那么内部函数就可以在外部函数的调用结束之后继续存在并运行。

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

在这个例子中,makeAdder函数返回一个内部函数,该函数接收一个参数y并返回x + y。因为内部函数对外部函数的局部变量x具有访问权限,所以add5和add10可以分别将5和10作为x的值来使用。

闭包的一个常见应用是创建一个私有变量。通过使用闭包,我们可以将变量的作用域限制在函数内部,使其无法被外部代码访问。

function createCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

const counter = createCounter();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

在这个例子中,createCounter函数返回一个内部函数,该函数每次调用时都会增加count变量的值并返回该值。因为count变量的作用域被限制在内部函数中,所以它不能被外部代码访问。

闭包还可用于创建模块。模块是 JavaScript 代码的独立单元,它们可以被其他模块导入和使用。通过使用闭包,我们可以创建私有模块变量和函数,从而实现模块化编程。

const module = (function() {
  const privateVariable = 10;

  function privateFunction() {
    console.log(`This is a private function.`);
  }

  return {
    publicVariable: 20,
    publicFunction: function() {
      console.log(`This is a public function.`);
    }
  };
})();

console.log(module.publicVariable); // 20
module.publicFunction(); // This is a public function.
console.log(module.privateVariable); // undefined
module.privateFunction(); // ReferenceError: privateFunction is not defined

在这个例子中,我们使用了一个立即执行函数表达式(IIFE)来创建一个模块。IIFE 的作用是立即调用函数,并返回函数的返回值。在这个例子中,IIFE 返回了一个对象,该对象包含两个属性和两个方法。publicVariable 和 publicFunction 是公共的,可以被外部代码访问,而 privateVariable 和 privateFunction 是私有的,无法被外部代码访问。

闭包是一种强大的 JavaScript 特性,它可以帮助我们创建更灵活和模块化的代码。通过理解闭包的工作原理,我们可以编写出更优雅和可维护的代码。