JavaScript中的闭包真的过时了？其实Vue和React中都有用到！

1. 以生活中的例子解释闭包

我们可以把闭包想象成一个神奇的小商店。这个小商店有自己的仓库，仓库里放着一些商品（数据）。当有顾客来买东西的时候，售货员（函数）就会从仓库里拿商品卖给顾客。

这个小商店的仓库是不对外公开的，只有商店里的售货员能进去拿东西。而且，即使商店外面的环境变了（比如街道重新装修了），商店仓库里的商品数量和种类还是不会受影响。

在编程里，闭包就类似于这个小商店。它是一个函数，这个函数可以访问并记住它外部函数作用域里的变量，就像售货员能记住仓库里的商品一样。而且，即使外部函数执行完了，闭包函数依然可以访问这些变量，就像商店关门了，售货员依然知道仓库里有什么商品。

2.代码案例

下面是一个使用 JavaScript 实现的闭包示例：

javascript 复制代码

// 外部函数 createCounter，就像开了一家小商店
function createCounter() {
    // 这个 count 变量就像是商店仓库里的商品数量
    let count = 0;
    // 内部函数 increment，就像是商店里的售货员
    function increment() {
        // 售货员可以操作仓库里的商品数量
        count++;
        console.log(count);
    }
    // 把售货员（内部函数）返回出去，这样外面的人也能使用它
    return increment;
}

// 创建一个计数器实例，就像开了一家具体的小商店
const counter = createCounter();

// 使用计数器，每次调用就相当于有顾客来买东西，商品数量增加
counter(); // 输出: 1
counter(); // 输出: 2
counter(); // 输出: 3

2.1 代码解释

外部函数 createCounter ：这个函数就像是开了一家小商店，它里面有一个变量 count，这个变量就像是商店仓库里的商品数量。
内部函数 increment ：这个函数就像是商店里的售货员，它可以访问并修改外部函数里的 count 变量。
返回内部函数 ：createCounter 函数返回了 increment 函数，这样就把"售货员"送出去了。
使用闭包 ：当我们调用 createCounter 函数时，它返回了 increment 函数，我们把这个返回的函数赋值给 counter 变量。每次调用 counter() 时，实际上就是在调用 increment 函数，它会增加 count 的值并打印出来。

3. 闭包在前端开发中的应用案例

3.1 事件处理中的数据绑定

在前端开发中，我们经常需要为元素添加事件监听器，并且希望在事件处理函数中访问特定的数据。闭包可以帮助我们实现这一点。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <button id="btn1">按钮 1</button>
    <button id="btn2">按钮 2</button>
    <script>
        const buttons = document.querySelectorAll('button');
        for (let i = 0; i < buttons.length; i++) {
            // 为每个按钮添加点击事件监听器
            buttons[i].addEventListener('click', (function(index) {
                return function() {
                    console.log(`你点击了按钮 ${index + 1}`);
                };
            })(i));
        }
    </script>
</body>

</html>

在这个例子中，我们使用闭包来确保每个按钮的点击事件处理函数都能正确地访问到对应的索引值。

3.2 封装私有变量和方法

闭包可以用来创建私有变量和方法，这样可以避免全局作用域的污染，同时保护数据不被外部随意修改。

javascript 复制代码

function createCounter() {
    // 私有变量
    let count = 0;

    return {
        // 增加计数的公共方法
        increment: function() {
            count++;
            console.log(count);
        },
        // 减少计数的公共方法
        decrement: function() {
            if (count > 0) {
                count--;
                console.log(count);
            }
        }
    };
}

const counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1

在这个例子中，count 变量是私有的，外部无法直接访问和修改它，只能通过 increment 和 decrement 方法来操作。

3.3 实现函数柯里化

函数柯里化是指将一个多参数函数转换为一系列单参数函数的技术。闭包在实现函数柯里化时非常有用。

javascript 复制代码

function add(a, b) {
    return a + b;
}

// 柯里化函数
function curryAdd(a) {
    return function(b) {
        return add(a, b);
    };
}

const add5 = curryAdd(5);
console.log(add5(3)); // 输出: 8

在这个例子中，curryAdd 函数返回了一个闭包，这个闭包记住了传入的第一个参数 a，并在后续调用时与第二个参数 b 相加。

4.闭包在前端框架中的应用

闭包在前端框架（如 Vue 和 React）中有着广泛的应用，下面分别介绍其在这两个框架中的应用场景及具体代码案例。

4.1 闭包在 Vue 框架中的应用

1. 自定义指令中的闭包应用

在 Vue 里，自定义指令可用于封装 DOM 操作。闭包能让自定义指令记住某些状态。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 闭包示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <input v-colorful="color" type="text" placeholder="输入文本">
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          color: 'red'
        };
      }
    });

    // 自定义指令
    app.directive('colorful', function (el, binding) {
      // 闭包记住 binding.value 的值
      const color = binding.value;
      return function () {
        el.style.color = color;
      };
    }());

    app.mount('#app');
  </script>
</body>

</html>

在上述代码中，自定义指令 v-colorful 里使用闭包记住了 binding.value（即传入的颜色值）。这样，无论后续如何变化，指令始终能使用该颜色值来设置元素的文本颜色。

2. 组件内的事件处理函数闭包

在 Vue 组件里，事件处理函数可借助闭包访问组件的数据。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 组件闭包示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    const app = Vue.createApp({});

    app.component('my-component', {
      template: `
        <div>
          <button @click="increment">点击增加</button>
          <p>计数: {{ count }}</p>
        </div>
      `,
      data() {
        return {
          count: 0
        };
      },
      methods: {
        increment() {
          // 闭包访问组件的 data 中的 count
          this.count++;
        }
      }
    });

    app.mount('#app');
  </script>
</body>

</html>

在这个组件中，increment 方法作为事件处理函数，它是一个闭包，能访问组件 data 里的 count 变量，从而实现计数增加的功能。

4.2 闭包在 React 框架中的应用

1. 事件处理函数中的闭包

在 React 中，事件处理函数可以使用闭包来访问组件的状态。

jsx 复制代码

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 闭包访问 count 状态
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>点击增加</button>
      <p>计数: {count}</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

在上述代码中，handleClick 函数是一个闭包，它能够访问 App 组件的 count 状态。每次点击按钮时，handleClick 函数就会更新 count 状态。

2. 高阶组件中的闭包

高阶组件（HOC）是 React 中复用代码的一种方式，闭包在高阶组件中发挥着重要作用。

jsx 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';

// 高阶组件
const withLogging = (WrappedComponent) => {
  return (props) => {
    // 闭包记住 WrappedComponent
    console.log('组件即将渲染');
    return <WrappedComponent {...props} />;
  };
};

// 普通组件
const MyComponent = (props) => {
  return <p>{props.message}</p>;
};

// 使用高阶组件包装普通组件
const LoggedComponent = withLogging(MyComponent);

function App() {
  return (
    <div>
      <LoggedComponent message="这是一条消息" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

在这个例子中，withLogging 是一个高阶组件，它返回一个新的组件。返回的组件是一个闭包，记住了传入的 WrappedComponent，并在渲染前打印日志。