js学习之----深入理解闭包


Posted in Javascript onNovember 21, 2016

闭包算是js里面比较不容易理解的点,尤其是对于没有编程基础的人来说。

其实闭包要注意的就那么几条,如果你都明白了那么征服它并不是什么难事儿。下面就让我们来谈一谈闭包的一些基本原理。

 闭包的概念

一个闭包就是一个函数和被创建的函数中的作用域对象的组合。(作用域对象下面会说)

通俗一点的就是 “ 只要一个函数中嵌套了一个或多个函数,那么我们就可以称它们构成了闭包。 ”

类似这样:

function A() {
 var i = 5;
 return function() {
  console.log('i = '+i);
 }
}

var a = A();
a(); // i = 5

闭包的原理

1、外部函数的局部变量若会被闭包函数调用就不会在外部函数执行完毕之后立即被回收。

我们知道,不管什么语言,操作系统都会存在一个垃圾回收机制,将多余分配的空间回收掉以便减小内存。而一个函数的生命周期的是从调用它开始的,在函数调用完毕的时候函数内部的局部变量等都会被回收机制回收。

我们拿上述例子来说,当我们的外部函数A调用完毕时,A中的局部变量i按理说就会被操作系统回收而不存在,但是当我们用了闭包结果就不是那样了,i并不会被回收。试想,如果i被回收了那么返回的函数里面岂不是就是打印undefined了?

i为什么没有被回收?

在javascript执行一个函数的时候都会创建一个作用域对象,将函数中的局部变量(函数的形参也是局部变量)保存进去,伴随着那些传入函数的变量一起被初始化。

所以当调用A的时候就创建了一个作用域对象,我们姑且称之为Aa,那么这个Aa应该是这样的: Aa { i: 5; };  在A函数返回一个函数之后,A执行完毕。Aa对象本应该被回收,但是由于返回的函数使用了Aa的属性i,所以返回的函数保存了一个指向Aa的引用,所以Aa不会被回收。

所以理解作用域对象,就能理解为什么函数的局部变量在遇到闭包的时候不会在函数调用完毕时立即被回收了。

再来个例子:

function A(age) {
 var name = 'wind';
 var sayHello = function() {
  console.log('hello, '+name+', you are '+age+' years old!');
 };
 return sayHello;
}
var wind = A(20);
wind(); // hello, wind, you are 20 years old!

你能说出的它的作用域对象Ww是什么吗?

Ww{ age: 20; name: 'wind'; };

2、每调用一次外部函数就产生一个新的闭包,以前的闭包依旧存在且互不影响。

3、同一个闭包会保留上一次的状态,当它被再次调用时会在上一次的基础上进行。

每调用一次外部函数产生的作用域对象都不一样,你可以这样想,上面的例子,你每次传入的参数age不一样,所以就每次生成的对象不一样。

每调用一次外部函数那么就会生成一个新的作用域对象。

function A() {
 var num = 42;
 return function() { console.log(num++); }
}
var a = A();
a(); // 42
a(); // 43

var b = A(); // 重新调用A(),形成新闭包
b(); // 42

这个代码让我们发现了两个事情,一、当我们连续调用两次a();,num会在原基础上自加。说明同一个闭包会保留上一次的状态,当它被再次调用时会在上一次的基础上进行。 二、我们的b();的结果为42,说明它是一个新的闭包,并且不受其他闭包的影响。

我们可以这样想,就好比我们吹肥皂泡一样,我每次吹一下(调用外部函数),就会产生一个新的肥皂泡(闭包),多个肥皂泡可以同时存在且两个肥皂泡之间不会相互影响。

4、在外部函数中存在的多个函数 “ 同生共死 ”

以下三个函数被同时声明并且都可以对作用域对象的属性(局部变量)进行访问与操作。

var fun1, fun2, fun3;
function A() {
 var num = 42;
 fun1 = function() { console.log(num); }
 fun2 = function() { num++; }
 fun3 = function() { num--; } 
}

A();
fun1();  // 42
fun2(); 
fun2(); 
fun1();  // 44
fun3(); 
fun1();  //43

var old = fun1;

A(); 
fun1();  // 42
old();  // 43  上一个闭包的fun1()

由于函数不能有多个返回值,所以我用了全局变量。我们再次可以看出在我们第二次调用A()时产生了一个新的闭包。

当闭包遇到循环变量

当我们说到闭包就不得不说当闭包遇到循环变量这一种情况,看如下代码:

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var item = 'item' + i;
    result.push( function() {console.log(item + ' ' + arr[i])} );
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item2 undefined
fnlist[1](); // item2 undefined
fnlist[2](); // item2 undefined

怎么会这样呢?我们预想的三个输出应该是 item0 1,  item1 2,  item2 3。为什么结果却是返回的result数组里面存储了三个 item2 undefined ?

原来当闭包遇到循环变量时都是循环结束之后统一保存变量值,拿我们上面的例子来说,i是循环变量,当循环全部结束的时候i正好是i++之后的3,而arr[3]是没有值的,所以为undefined,有人会疑惑:为什么item的值是item2,难道不应该是item3吗?注意,在最后一次循环的时候也就是i = 2的时候,item的值为item2,当i++,i = 3循环条件不满足循环结束,此时的item的值已经定下来了,所以此时的arr[i]为arr[3],而item为item2。这样能理解吗?如果我们将代码改成这样那就说得通了:

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) { 
    result.push( function() {console.log('item' + i + ' ' + arr[i])} );
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[1](); // item3 undefined

那么问题来了,如何改正呢?且看代码:

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    result.push( (function(n) {
      return function() {
       var item = 'item' + n;
       console.log(item + ' ' + arr[n]);
      }
    })(i));
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item0 1
fnlist[1](); // item1 2
fnlist[2](); // item2 3

我们可以用一个自执行函数将i绑定,这样i的每一个状态都会被存储,答案就和我们预期的一样了。

所以以后在使用闭包的时候遇到循环变量我们要习惯性的想到用自执行函数来绑定它。

以上就是我对闭包的理解,如果有什么意见或建议希望我们能在评论区多多交流。感谢,共勉。

Javascript 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
浅谈js原生拖放
Nov 21 #Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 #Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 #Javascript
JS中判断null的方法分析
Nov 21 #Javascript
javascript 利用arguments实现可变长参数
Nov 21 #Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 #Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 #Javascript
You might like
php实现天干地支计算器示例
2014/03/14 PHP
php类自动加载器实现方法
2015/07/28 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
Javascript 入门基础学习
2010/03/10 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python解析nginx日志文件
2015/05/11 Python
理解python正则表达式
2016/01/15 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python实现不规则图形填充的思路
2020/02/02 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
技术人员面试提纲
2013/11/28 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python