揭秘JavaScript闭包的妙用：让变量跨时空交流

2023-11-06 17:55:20

闭包，是程序设计语言的一项技术，它允许一个函数或方法访问其定义所在范围之外的数据，即使这个范围已经被销毁。这个特性使得闭包成为了 JavaScript 中非常强大的工具，它可以用于多种用途，例如创建私有变量、封装代码、实现延迟加载、执行异步操作等等。

闭包的妙用

闭包实现了私有变量

在 JavaScript 中，没有私有变量的概念，所有的变量都是公共的。但是，我们可以通过闭包来模拟私有变量。例如，我们可以创建一个函数，并在函数内部声明一个变量，这个变量就只能在函数内部访问。

function createCounter() {
  let count = 0;

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

const counter = createCounter();

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

在这个例子中，变量 count 是私有的，因为它只能在函数 createCounter 内部访问。函数 counter 可以被多次调用，每次调用时，变量 count 都会增加。

闭包封装了代码

闭包可以将代码封装在一个函数中，使得代码更易于维护和重用。例如，我们可以创建一个函数，并在函数内部实现一个算法。这个函数可以被多次调用，每次调用时，算法都会执行。

function calculateFibonacci(n) {
  if (n <= 1) {
    return n;
  }

  return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
}

console.log(calculateFibonacci(10)); // 55

在这个例子中，函数 calculateFibonacci 封装了计算斐波那契数列的算法。这个函数可以被多次调用，每次调用时，算法都会执行。

闭包实现了延迟加载

闭包可以实现延迟加载，即只在需要时才加载数据。例如，我们可以创建一个函数，并在函数内部加载数据。这个函数可以被多次调用，每次调用时，数据都会被加载。

function loadUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: 'John Doe',
        email: 'john.doe@example.com'
      });
    }, 1000);
  });
}

async function getUserData(userId) {
  const userData = await loadUserData(userId);

  console.log(userData);
}

getUserData(1);

在这个例子中，函数 loadUserData 返回一个 Promise，该 Promise 在 1 秒后解析为用户数据。函数 getUserData 使用 async/await 语法异步加载用户数据。

闭包执行了异步操作

闭包可以执行异步操作，即不会阻塞主线程的操作。例如，我们可以创建一个函数，并在函数内部执行一个异步操作。这个函数可以被多次调用，每次调用时，异步操作都会执行。

function sendHttpRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open('GET', url);

    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('请求失败'));
      }
    };

    xhr.onerror = () => {
      reject(new Error('请求失败'));
    };

    xhr.send();
  });
}

async function makeRequest(url) {
  const response = await sendHttpRequest(url);

  console.log(response);
}

makeRequest('https://example.com/api/v1/users');