javascript闭包(Closure)用法实例简析


Posted in Javascript onNovember 30, 2015

本文实例讲述了javascript闭包(Closure)用法。分享给大家供大家参考,具体如下:

closure被翻译成“闭包”,感觉这东西被包装的太学术化。下面参考书本和网上资源简单探讨一下(理解不当之处务请留意)。

1、什么是闭包

官方的回答:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

看了上面的定义,如果你不是高手,我坚信你会和我一样愤怒的质问:这tmd是人话吗?
要理解闭包,还是代码最有说服力啊,上代码:

function funcTest()
{
 var tmpNum=100; //私有变量
 //在函数funcTest内定义另外的函数作为funcTest的方法函数
 function innerFuncTest(
 {
    alert(tmpNum); //引用外层函数funcTest的临时变量tmpNum
 }
 return innerFuncTest; //返回内部函数
}
//调用函数
var myFuncTest=funcTest(); 
myFuncTest();//弹出100

上面代码中,注释已经写的清清楚楚。现在我们可以这么理解“闭包”:在函数体内定义另外的函数作为目标对象的方法函数(示例中就是在函数funcTest内定义另外的函数innerFuncTest作为funcTest的方法函数),而这个对象的方法函数反过来引用外层函数体中的临时变量(闭包是一种间接保持变量值的机制。示例中就是内部函数innerFuncTest引用外层函数funcTest的临时变量tmpNum,这里必须注意,临时变量可以包括外部函数中声明的所有局部变量、参数和声明的其他内部函数)。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包(示例中,调用函数的时候,myFuncTest实际调用的是innerFuncTest函数,也就是说funcTest的一个内部函数innerFuncTest在funcTest之外被调用,这时就创建了一个闭包)。

2、两个利用闭包的例子

下面举两个例子,一个是因为闭包导致了问题,而另一个则利用闭包巧妙地通过函数的作用域绑定参数。

这两个例子相关的HTML标记片断如下:

<a href="#" id="closureTest0">利用闭包的例子(1秒后会看到提示)</a><br />
<a href="#" id="closureTest1">由于闭包导致问题的例子1</a><br />
<a href="#" id="closureTest2">由于闭包导致问题的例子2</a><br />
<a href="#" id="closureTest3">由于闭包导致问题的例子3</a><br />

(1)、因闭包而导致问题

上面的HTML标记片断中有4个<a>元素,现在要给后三个指定事件处理程序,使它们在用户单击时报告自己在页面中的顺序,比如:当用户单击第2个链接时,报告“您单击的是第1个链接”。为此,如果编写下列为后三个链接添加事件处理程序的函数:

function badClosureExample(){
  for (var i = 1; i <4; i++) {
    var element = document.getElementById('closureTest' + i);
    element .onclick = function(){
      alert('您单击的是第' + i + '个链接');
    }
  }
}

然后,在页面载入完成后(不然可能会报错)调用该函数:

window.onload = function(){
  badClosureExample();
}

看一下运行结果,此时单击后3个链接,会看到警告框中显示什么信息呢?——全都是“您单击的是第4个链接”。是不是令你感到十分意外?为什么?

分析:因为在badClosureExample()函数中指定给element.onclick的事件处理程序,也就是onclick那个匿名函数是在badClosureExample()函数运行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到 badClosureExample()函数中查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部函(badClosureExample)作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。

那么这个例子的问题怎么解决呢?其实方法有很多(自己不妨写一下看看),我认为比较简单直接的代码:

function popNum(oNum){
  return function(){
          alert('您单击的是第'+oNum+'个链接');
  }
}
function badClosureExample(){
  for (var i = 1; i <4; i++) {
    var element = document.getElementById('closureTest' + i);
    element .onclick =new popNum(i);
    }
}

(2)、巧妙利用闭包绑定参数

还是上面的HTML片段,我们要在用户单击第一个链接时延时弹出一个警告框,怎么实现?答案是使用setTimeout()函数,这个函数会在指定的毫秒数之后调用一个函数,如:

setTimeout(someFunc,1000);

但问题是,无法给其中的someFunc函数传递参数。而使用闭包则可以轻松解决这个问题:
function goodClosureExample(oMsg){
  return function(){
    alert(oMsg);
  };
}

函数goodClosureExample用来返回一个匿名函数(闭包)。而我们可以通过为它传递参数来使返回的匿名函数绑定该参数,如:

var good = goodClosureExample('这个参数是通过闭包绑定的');

而此时,就可以将绑定了参数的good函数传递给setTimeout()实现延时警告了:
setTimeout(good,1000) //此时good中已经绑定了参数

最后,测试通过的完整代码:
window.onload = function(){
  var element = document.getElementById('closureTest0');
  if (element) {
    var good = goodClosureExample('这个参数是由闭包绑定的');
    element.onclick = function(){
      setTimeout(good, 1000); //延迟1秒弹出提示
    }
  }
}

3、javascript的垃圾回收原理

(1)、在javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收;

(2)、如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。

在js中使用闭包,往往会给javascript的垃圾回收器制造难题。尤其是遇到对象间复杂的循环引用时,垃圾回收的判断逻辑非常复杂,搞不好就有内存泄漏的危险,所以,慎用闭包。ms貌似已经不建议使用闭包了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
常用的javascript设计模式
Jan 11 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
详解JavaScript的流程控制语句
Nov 30 #Javascript
详解JavaScript的表达式与运算符
Nov 30 #Javascript
Bootstrap每天必学之进度条
Nov 30 #Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 #Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 #Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 #Javascript
整理Javascript流程控制语句学习笔记
Nov 29 #Javascript
You might like
浅谈PHP语法(1)
2006/10/09 PHP
PHP实现分页的一个示例
2006/10/09 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Javascript中Eval函数的使用说明
2008/10/11 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python处理cookie详解
2014/02/07 Python
Python使用django搭建web开发环境
2017/06/09 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
使用python3实现操作串口详解
2019/01/01 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
人事行政经理岗位职责
2014/06/18 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
销售员试用期自我评价
2014/09/15 职场文书
人事局接收函
2015/01/31 职场文书
老乡会致辞
2015/07/28 职场文书
小学大队委竞选口号
2015/12/25 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
MySQL数据库完全卸载的方法
2022/03/03 MySQL
Python中with上下文管理协议的作用及用法
2022/03/18 Python