js闭包的应用和学习要点

前端

2023-12-22 14:16:38

闭包：JavaScript 中的秘密武器

在 JavaScript 的世界中，闭包是一个神奇的工具，能够让你编写出强大且灵活的代码。让我们踏上一个奇妙的旅程，深入探索闭包的奥秘，了解它的类型、作用域和广泛的应用。

何为闭包？

想象一下，一个函数执行完毕后，它在幕后仍然活跃着，默默地守卫着其变量。这就是闭包的本质：一个在函数执行后仍保留其作用域的函数。闭包让我们能够访问其他函数中的变量，甚至可以修改它们。

闭包的类型

闭包有两大类型：

词法闭包： 当一个函数嵌套在另一个函数中时，内部函数的作用域链将被添加到外部函数的作用域链中，从而形成词法闭包。内部函数可以访问外部函数中的所有变量。

动态闭包： 当一个函数被调用时，动态闭包会记录下调用时刻所在的作用域链中的变量。即使调用该函数的作用域链已被销毁，动态闭包仍然可以访问这些变量。

闭包的作用域

闭包的作用域由两部分组成：

静态作用域： 由词法闭包形成，在函数定义时确定，不会随着函数执行而改变。

动态作用域： 由动态闭包形成，在函数调用时确定，并会随着函数执行而改变。

闭包的应用

闭包在 JavaScript 中有着广泛的应用：

函数柯里化： 闭包可以将一个函数分解成一系列更小的函数，每个函数只接受一个参数。这使得代码更加模块化和可重用。

使用 call 实现 bind： 闭包可以模拟 call 方法，将一个函数绑定到特定对象上，即使该函数原本不属于该对象。

矩阵点击应用： 闭包可以用来实现矩阵点击应用，允许用户点击矩阵中的单元格并执行预定义的操作。

封装私有变量： 利用闭包的特性，我们可以封装私有变量，防止外部代码访问和修改。

代码示例

// 词法闭包
function outer() {
  let x = 10;
  function inner() {
    console.log(x); // 访问外部函数的变量 x
  }
  return inner;
}

const innerFunc = outer();
innerFunc(); // 输出 10

// 动态闭包
function counter() {
  let count = 0;
  return function() {
    count++;
    console.log(count); // 访问内部变量 count
  }
}

const countFunc = counter();
countFunc(); // 输出 1
countFunc(); // 输出 2