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 相关文章推荐
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
vue实现表格合并功能
Dec 01 Vue.js
浅谈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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PDO::exec讲解
2019/01/28 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JS限制输入框输入的实现代码
2018/07/02 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python正则表达式学习小例子
2020/03/03 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
高中军训的心得体会
2014/09/01 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
单位未婚证明范本
2014/11/25 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL