JavaScript/JS闭包理解

最新推荐文章于 2024-07-08 08:31:50 发布

蚩尤克里里帅

最新推荐文章于 2024-07-08 08:31:50 发布

阅读量574

点赞数

文章标签： JavaScript JS 闭包

本文链接：https://blog.csdn.net/qq_38787108/article/details/101543530

版权

JavaScript/JS闭包理解

本想写一篇关于JS闭包理解的总结。发现了有博主已经总结、分析的很到位了。推荐给大家：

Mozilla官方总结：闭包（Closures）
Mozilla-闭包

实用的闭包

闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。
因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。

闭包的概念

JavaScript中的函数会形成闭包。 **闭包是由函数以及创建该函数的词法环境组合而成。**这个环境包含了这个闭包创建时所能访问的所有局部变量。
闭包的关键在于return关键字返回的是执行闭包函数实例的引用，因此可以不断访问父类数值

闭包的使用

使用闭包来定义公共函数，那么相对来说，父类函数就变成了私有函数和变量。需要通过闭包的方法访问，这个方式也称为 模块模式（module pattern）。注意：下面的例子即是“Mozilla官方总结：闭包（Closures）”的内容

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }   
})();

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

解析： 这个JS代码使用的是自调用函数，通过“（）”运算符子调用一次。因此已经return了“{}”中的对象(生成了Counter新对象)
除自调用函数法积攒闭包外，这篇官方教程中还有通过定义并循环调用“私有函数”发来积攒闭包。

{
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }