javaScript中闭包的作用

node版本不兼容

于 2023-04-07 11:10:24 发布

阅读量620

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_35381576/article/details/130007710

版权

文章介绍了JavaScript闭包在封装变量、实现模块化、创建私有方法和属性、延长变量生命周期以及缓存数据等方面的应用。通过示例展示了闭包如何用于防止全局变量污染，实现代码模块化，提高代码安全性和程序效率。

摘要由CSDN通过智能技术生成

JavaScript闭包是一种非常强大的编程技术，它可以在JavaScript中实现许多有趣和有用的功能。以下是JavaScript闭包的一些常见用途：

封装变量：闭包可以将变量私有化，防止全局变量污染和命名冲突。通过将变量作为闭包中的内部变量，可以避免在全局作用域中定义变量，并将变量的值存储在函数的局部作用域中。
实现模块：通过使用闭包来封装代码块，可以实现模块化开发，使代码更加模块化和易于维护。
实现私有方法和属性：闭包可以将方法和属性封装在对象中，使其成为私有的。这样可以防止其他代码直接访问或修改它们，从而提高了代码的安全性和稳定性。
延长变量生命周期：闭包可以延长变量的生命周期，使其在函数执行完毕后仍然存在。这种技术可以用于处理异步编程中的回调函数等情况。
缓存数据：闭包可以用于缓存数据，避免重复计算和网络请求。通过将数据存储在闭包中，可以避免在每次访问时都需要重新计算或从服务器请求数据，从而提高了程序的效率和性能。

1.封装变量：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}
const counter = createCounter();
counter(); // 输出1
counter(); // 输出2
counter(); // 输出3

在这个例子中，我们使用闭包将count变量封装在createCounter函数内部，从而使变量在全局范围内不可见。我们可以通过createCounter函数返回的闭包函数来访问和更新count变量。

2.实现模块：

const myModule = (function() {
  const privateVar = '私有变量';
  function privateFunc() {
    console.log('私有方法');
  }
  return {
    publicFunc: function() {
      console.log('公共方法');
    }
  };
})();
myModule.publicFunc(); // 输出 "公共方法"

在这个例子中，我们使用自执行的闭包函数来封装代码块，并返回一个对象来公开公共接口。通过这种方式，我们可以在对象中封装公共方法和属性，并将它们暴露给外部代码。

3.实现私有方法和属性：

function Person(name) {
  let age = 0; // 私有变量
  function getAge() { // 私有方法
    return age;
  }
  this.name = name; // 公共属性
  this.sayName = function() { // 公共方法
    console.log(this.name);
  }
  this.sayAge = function() { // 公共方法
    console.log(getAge());
  }
  this.setAge = function(newAge) { // 公共方法
    age = newAge;
  }
}
const john = new Person('John');
john.sayName(); // 输出 "John"
john.sayAge(); // 输出 0
john.setAge(30);
john.sayAge(); // 输出 30

在这个例子中，我们使用闭包来封装age变量和getAge方法，并将它们作为私有方法和属性。同时，我们将name属性和sayName方法暴露给外部代码。

4.延长变量生命周期：

function fetchUserData(userId) {
  let userData = null;
  const callback = function(response) {
    userData = response;
    console.log(userData);
  };
  api.getUserData(userId, callback);
  return function() {
    console.log(userData);
  };
}
const showUserData = fetchUserData(123);
setTimeout(showUserData, 1000); // 延迟1秒后输出用户数据

在这个例子中，我们使用闭包来延长userData变量的生命周期，并将其存储在callback函数中。我们还返回一个函数来访问userData变量，并在延迟一秒后输出其值。

5.缓存数据：

function memoize(func) {
  const cache = {};
  return function(arg) {
    if (arg in cache) {
      return cache[arg];
    } else {
      const result = func(arg);
      cache[arg] = result;
      return result;
    }

缓存数据是指将之前计算过的结果存储起来，以便之后再次调用时可以直接返回结果，避免重复计算，提高程序的运行效率。JavaScript闭包可以用于实现缓存数据的功能。

在第5个例子中，我们定义了一个memoize函数，它接受一个函数作为参数，然后返回一个闭包函数。该闭包函数具有以下特点：