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优先加载笔记代码
Sep 30 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
理解JavaScript事件对象
Jan 25 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP 加密解密内部算法
2010/04/22 PHP
PHP制作用户注册系统
2015/10/23 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python GUI实例学习
2017/11/21 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Python 如何创建一个线程池
2020/07/28 Python
Python函数调用追踪实现代码
2020/11/27 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
行政部岗位职责范本
2014/03/13 职场文书
妈妈活动方案
2014/08/15 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android