javascript闭包问题

2018-06-24 01:39:38来源：未知阅读 ()

什么是闭包？？

有权访问另一个函数作用域内变量的函数就是闭包。

看一个例子：

 1 function a(){
 2   var n = 0;
 3   function inc(){
 4     n++; 
 5     console.log(n);
 6   }
 7   return inc;
 8 }
 9 var c = a();
10 c();  //控制台输出1
11 c();  //控制台输出2

在这里，控制台两次输出不一样？？？为什么？？变量n不是重新赋值了吗？？

并没有，在这里，var c = a(); 这段代码意思是将 a 方法的返回值赋值给变量 c ，那么 a() 的返回值就是 inc ,也就 function inc() ，

后面执行两次 c(); c(); 实际上是执行两次的 inc(); 因为function一直引用着a()，所以n没有回收，也就是说，n的值一直在用着，

自然第一次执行 c() 打印1，第二次执行 c() 打印2；

再看一个经典例子：

 1 function createFunctions(){
 2   var result = [];
 3   for (var i=0; i < 10; i++){
 4     result[i] = function(){
 5       return i;
 6     };
 7   }
 8   return result;
 9 }
10 var funcs = createFunctions();
11 for (var i=0; i < funcs.length; i++){
12   console.log(funcs[i]());
13 }

一般来说，以为输出 0~9 ，但事实上是输出10个10。

需要注意的点就是，方法带()才是执行这个方法，而诸如 var abc = function(){ }，只能说将这个方法定义并且赋值给abc，并没有执行这个方法。

简单来说：单纯的一句 var f = function() { alert('lalala'); }; 是不会弹窗的，后面接一句 f(); 才会执行方法内部的代码，才会弹窗。

以上代码的解释：

 1 function createFunctions(){
 2   var result = new Array();
 3   for (var i=0; i < 10; i++){
 4     result[i] = function(){
 5       return i;
 6     };
 7   }
 8   return result;
 9 }
10 var funcs = createFunctions(); //执行了一次createFunctions()，里面的 i 变成10
11 for (var i=0; i < funcs.length; i++){
12   console.log(funcs[i]());  //createFunctions的返回值是result，所以funcs[i]() 执行的是 result[i] 的方法：return i
13 }

因为正在引用 i ，并且 i 的值已经是10，也就是 return i 的值一直是return 10 。传递到执行 funcs[i]() 方法里面。

funcs[0]()就是执行 return i 语句，就是返回10

funcs[1]()就是执行 return i 语句，就是返回10

funcs[9]()就是执行 return i 语句，就是返回10

闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。闭包通常会跟很多东西混搭起来，接触多了才能加深理解，这里只是说说基础性的东西。

一道经典题：

1 for (var i = 0; i < 5; i++) {
2   setTimeout(function() {
3     console.log(i);
4   }, 1000 * i);
5 }

setTimeout 会延迟执行，那么执行到 console.log 的时候，其实 i 已经变成 5 了。

上面代码一开始输出一个 5，然后每隔一秒再输出一个 5，一共 5 个 5。

1 for (var i = 0; i < 5; i++) {
2   (function(i) {
3     setTimeout(function() {
4       console.log(i);
5     }, i * 1000);
6   })(i);
7 }

加上闭包之后，就是每隔一秒输出0到4，一开始是输出0，在这里，内部方法引用了外部 i 局部变量，所以 i 的值传递到内部；

如果把 i 删掉之后：

1 for (var i = 0; i < 5; i++) {
2   (function() {
3     setTimeout(function() {
4       console.log(i);
5     }, i * 1000);
6   })(i);
7 }

这样子的话，内部其实没有对 i 保持引用，其实会变成每隔一秒输出 5，一开始输出5，共5个5

再如果改成这样：

1 for (var i = 0; i < 5; i++) {
2   setTimeout((function(i) {
3     console.log(i);
4   })(i), i * 1000);
5 }

这里给 setTimeout 传递了一个立即执行函数。setTimeout 可以接受函数或者字符串作为参数，那么这里立即执行函数应该是个 undefined ，也就是说等价于：setTimeout(undefined, ...);

而立即执行函数会立即执行，那么应该是立马输出的。

也就是立马输出 0 到 4 。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Leetcode代码练习（三）

下一篇：小刘同学的第七十六篇博文

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签