用最通俗易懂的代码帮助新手理解javascript闭包 推荐


Posted in Javascript onMarch 01, 2012

最近看了几篇有关javascript闭包的文章,包括最近正火的汤姆大叔系列,还有《javascript高级程序设计》中的文章,……我看不懂,里面有些代码是在大学教科书中看都没看过的,天书一般。幸好最近遇到两本好书《ppk on javascript》和《object-oriented JavaScript》,正字阅读中,后者还没有中文版,但前者还是建议看原版,写的不复杂,有兴趣的朋友可以看看,适合想进阶的朋友。
今天就结合这两本书,用最浅显的语言和最通俗的方式谈谈javascript中的闭包,因为也是新手,所以有有误的地方请各位指出,谢谢
一. 准备知识
1.函数作为函数的参数
在学习javascript中,你始终要有一个有学习与其他语言不同的概念:函数(function)不么特殊的东西,它也是一种数据,与bool ,string,number没有什么两样。
函数的参数可以string,number,bool如:
function(a, b) {return a + b;}
但同样也可以传入函数。对你没有听错,函数的参数是函数!加入你有以下两个函数:

//把三个数翻一倍 
function multiplyByTwo(a, b, c) { 
var i, ar = []; 
for(i = 0; i < 3; i++) { 
ar[i] = arguments[i] * 2; 
} 
return ar; 
}

//把数加一 
function addOne(a) { 
return a + 1; 
}

然后这么使用
var myarr = []; 
//先把每个数乘以二,用了一个循环 
myarr = multiplyByTwo(10, 20, 30); 
//再把每个数加一,又用了一个循环 
for (var i = 0; i < 3; i++) {myarr[i] = addOne(myarr[i]);}

要注意到其实这个过程用了两个循环,还是有提升的空间的,不如这么做:
function multiplyByTwo(a, b, c, addOne) { 
var i, ar = []; 
for(i = 0; i < 3; i++) { 
ar[i] = addOne (arguments[i] * 2); 
} 
return ar; 
}

这样就把函数当做参数传递进去了,并且在第一个循环中直接调用。这样的函数就是著名的回调函数(Callback function)
2.函数作为返回值
在函数中可以有返回值,但是我们一般都熟悉数值的返回,如
function ex(){ 
return 12 
}

但你一旦意识到函数只是一种数据的话,你就可以想到同样可以返回函数。注意看下面这个函数:
function a() { 
alert('A!'); 
return function(){ 
alert('B!'); 
}; 
}

它返回了一个弹出”B!”的函数。接下来使用它:
var newFunc = a(); 
newFunc();

结果是什么呢?首先执行a()的时候,弹出”A!”,此时newFunc接受了a的返回值,一个函数——此时newFunc就变成了那个被a返回的函数,再执行newFunc时,弹出”B!”
3.javascript的作用域
javascript的作用域很特别,它是以函数为单位的,而不是像其他语言以块为单位(如一个循环中),看下面这个例子:
var a = 1; function f(){var b = 1; return a;}
如果你此时试图想得到b的值:在firebug中试图输入alert(b)的话,你会得到错误提示:
b is not defined
为什么你可以这么理解:你所在的编程环境或者窗口是最顶级的一个函数,好像一个宇宙,但是b只是在你内部函数的一个变量,宇宙中的小星球上的一个点,你很难找到它,所以在这个环境中你不能调用它的;反之这个内部函数可以调用变量a,因为它暴露在整个宇宙中,无处藏身,同时也可以调用b,因为它就在自己的星球上,函数内部。
就上面这个例子说:
在f()外,a可见,b不可见
在f()内,a可见,b也可见
再复杂点:
var a = 1; //b,c在这一层都不可见 
function f(){ 
var b = 1; 
function n() { //a,b,c对这个n函数都可以调用,因为a,b暴露在外,c又是自己内部的 
var c = 3; 
} 
}

问你,函数b可以调用变量c吗?不行,记住javascript的作用域是以函数为单位的,c在n的内部,所以对f来说是不可见的。

开始正式谈闭包:

首先看这个图:

 

用最通俗易懂的代码帮助新手理解javascript闭包 推荐

假设G,F,N 分别代表三个层次的函数,层次如图所示,a,b,c分别是其中的变量。根据上面谈到的作用域,我们有如下结论:

  1. 如果你在a点,你是不可以引用b的,因为b对你是不可见的
  2. 只有c可以引用b

闭包的吊诡之处的就在于发生了如下情况:

 

用最通俗易懂的代码帮助新手理解javascript闭包 推荐

N突破了F的限制!跑到于a同一层了!因为函数只认它们在定义时所处的环境而不是执行时,这点很重要),N中的c仍然可以访问b!此时的a还是不可以访问b!

但是这是怎么实现的呢?如下:
闭包1:

function f(){ 
var b = "b"; 
return function(){ //没有名字的函数,所以是匿名函数 
return b; 
} 
}

注意返回的函数可以访问它父亲函数中的变量b
此时如果你想取b的值,当然是undefined
但是如果你这么做:
var n = f(); 
n();

你可以取到b的值了!虽然此时n函数在f的外面,b又属于f内部的变量,但是f内部出了一个内鬼,返回了b的值……
现在大家有点感觉了吧
闭包2:
var n; 
function f(){ 
var b = "b"; 
n = function(){ 
return b; 
} 
}

如果此时调用f会怎么样?那就生成了一个n的全局范围函数,但是它却能访问f的内部,照样返回b的值,与上面有异曲同工之妙!
闭包3:
你还可以用闭包访问函数的参数
function f(arg) { 
var n = function(){ 
return arg; 
}; 
arg++; 
return n; 
}

此时如果使用:
var m = f(123); 
m();

结果是124
因为此时f中返回的匿名函数经过了两道转手,先给n,再赋给外面的m,但本质没有变,把定义时父函数的参数返回了
闭包4:
var getValue, setValue; 
function() { 
var secret = 0; 
getValue = function(){ 
return secret; 
}; 
setValue = function(v){ 
secret = v; 
}; 
})

运行:
getValue() 
0 
setValue(123) 
getValue() 
123

这个就不用解释了吧,如果你有面向对象语言基础的话(如C#),这里的getValue和setValue就类似于一个对象的属性访问器,你可以通过这两个访问器来赋值和取值,而不是能访问其中内容
其实书中还有几个闭包的例子,但是原理用上面四个就足够了,希望能起抛砖引玉的作用,给javascript进阶者对闭包有一个更深刻的理解
Javascript 相关文章推荐
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 #Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 #Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 #Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 #Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 #Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 #Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 #Javascript
You might like
全文搜索和替换
2006/10/09 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php之可变函数的实例详解
2017/09/13 PHP
javascript 获取图片颜色
2009/04/05 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
采购经理岗位职责
2014/02/16 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
五心教育心得体会
2014/09/04 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
转让协议书
2015/01/27 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
2015暑假假期总结
2015/07/13 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技