JavaScripts闭包

stefanieliang 发布于2019-08-19 18:42 / 1129人阅读

摘要：这段代码中另一个值得注意的地方，就是这一行，首先在前面没有使用关键字，因此是一个全局变量，而不是局部变量。

闭包在js里面的存在就好像奥利奥冰淇淋里面的奥利奥，没了奥利奥，冰淇淋还是冰淇淋，毕竟js 就是一个你怎么写都能好好运行的好语言。可是人写的代码总是要高级484，所以好好理解闭包好么。

闭包的定义

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量

闭包的特性

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

闭包举例

下面是一个更有意思的示例 — makeAdder 函数：

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

在这个示例中，我们定义了 makeAdder(x) 函数：带有一个参数 x 并返回一个新的函数。返回的函数带有一个参数 y，并返回 x 和 y 的和。
从本质上讲，makeAdder 是一个函数工厂 — 创建将指定的值和它的参数求和的函数，在上面的示例中，我们使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和，另一个和 10 求和。
add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的环境。在 add5 的环境中，x 为 5。而在 add10 中，x 则为 10。

闭包的实用性

理论就是这些 — 可是闭包确实有用吗？闭包允许将函数与其所操作的某些数据（环境）关连起来。这显然类似于面向对象编程。在面对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。
因而，一般说来，可以使用只有一个方法的对象的地方，都可以使用闭包。
在 Web 中，可能想这样做的情形非常普遍。大部分我们所写的 Web JavaScript 代码都是事件驱动的 — 定义某种行为，然后将其添加到用户触发的事件之上（比如点击或者按键）。我们的代码通常添加为回调：响应事件而执行的函数。
闭包的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

function f1() {
   var n = 999;
   nAdd = function(){
        n += 1
   }
   function f2(){
       console.log(n);
   }
   return f2;
}
var result = f1(); 
result();//999
nAdd(); 
result();//1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

闭包性能考量

如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。

例如，在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。原因是这将导致每次构造器被调用，方法都会被重新赋值一次（也就是说，为每一个对象的创建）。
以下虽然不切实际但却说明问题的示例：

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};

上面的代码并未利用到闭包的益处，因此，应该修改为如下常规形式：

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}

MyObject.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};

参考备注：

阮一峰 学习Javascript闭包（Closure）
MDN Web技术文档 JavaScript 闭包

附上我的订阅号，欢迎关注，一起学前端

云服务器超融合服务器 JavaScripts 循环闭包闭包概念闭包实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79896.html

简单理解 JavaScript 闭包问题

摘要：从我年开始接触前端，知道闭包这个词，已经过去两年了。概念闭包，在高级程序设计里面是这样介绍的闭包是指有权访问另一个作用域中的变量的函数。这样形成的闭包虽然可以使外部可以访问到内部的函数，但是导致了原有的作用域链不释放，会造成内存泄漏。从我16年开始接触前端，知道闭包这个词，已经过去两年了。这两年里，闭包这个概念我在很多地方了解过，却实在没有真的理解，久而久之，变成了一块心病。这不，趁...

lyning 2019-08-23 14:12 评论0 收藏0
JavaScripts toLocaleString (Number)

摘要：有时候你写一个方法，里面一堆循环，循环里一堆自己看看都觉得死了其实人家自带的方法已经写了，你用一下就好了。好了，撩一张图。有时候你写一个方法，里面一堆for循环，for循环里一堆if else自己看看都觉得low死了其实人家js自带的方法已经写了，你用一下就好了。因为我写erp的么，然后就会用到金额，金额的话一般保留两位小数，然后用千分位显示，你打算怎么写，先用小数点区分小数位和整...

Salamander 2019-08-19 18:44 评论0 收藏0
使用CommonJS，AMD以及CMD编写模块化JavaScripts

摘要：模块化编程首先，我想说说模块化编程这个概念当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的而我一直不觉得有多好，其实也是因为我从开始写，就一直都在模块化编程啊我们写一个文件然后我们在文件中引入然后调用方法哈哈这样已经是模块化模块化编程首先，我想说说模块化编程这个概念当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的而我一直不觉得有多好，其实也是因为我从...

nifhlheimr 2019-08-22 10:34 评论0 收藏0
【全栈】使用Node、Express、Angular、MongoDB构建一个实时问卷调查应用程序

摘要：鉴于此目的，我决定快速构建一个用于此目的的问卷调查应用程序。这将启动一个服务器并将应用程序部署到该服务器。图应用程序配置基础前端这个问卷调查应用程序对常见用户界面和布局使用了框架。全栈教程。转自使用 Node.js、Express、AngularJS 和 MongoDB 构建一个实时问卷调查应用程序最近，在向大学生们介绍 HTML5 的时候，我想要对他们进行问卷调查，并向他们显...

BigTomato 2019-06-26 16:52 评论0 收藏0
参加第二届前端开发者年度大会总结

摘要：代表公司去参加今年的第二届前端开发者年度大会，散会的时候，技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完美趁着还记得点什么，在这里做个自我回顾总结，谨代表个人见解，有不当之处，或若涉及图片隐私或者其它问题，烦请代表公司去参加今年的第二届前端开发者年度大会，散会的时候，Team 技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完...

solocoder 2019-08-19 17:55 评论0 收藏0