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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
jQuery select的操作实现代码
May 06 Javascript
jquery 模板的应用示例
Nov 12 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
Vue响应式原理详解
Apr 18 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
JavaScript实现打字游戏
Feb 19 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
javaScript之split与join的区别(详解)
2017/11/08 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
用vue写一个日历
2020/11/02 Javascript
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
学习python需要有编程基础吗
2020/06/02 Python
python爬取招聘要求等信息实例
2020/11/20 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
书法培训心得体会
2014/01/05 职场文书
领导视察欢迎词
2014/01/15 职场文书
求职自荐信的格式
2014/04/07 职场文书
大学学习计划书范文
2014/05/02 职场文书
婚纱店策划方案
2014/05/22 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
公司档案管理制度
2015/08/05 职场文书
党员理论学习心得体会
2016/01/21 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python