javascript 闭包
2015-12-24 12:08
381 查看
闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它。因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包!
1 闭包--爱的初体验
在接触一个新技术的时候,我首先会做的一件事就是:找它的demo code。对于码农们来说,代码有时候比自然语言更能理解一个事物。 其实,闭包无处不在,比如:jQuery、zepto的主要代码都包含在一个大的闭包中,所以下面我先写一个最简单最原始的闭包demo,好让你在大脑里产生闭包的画面:
View Code
count是A中的一个变量,它的值在B中被改变,函数B每执行一次,count的值就在原来的基础上累加1。因此,A中的count一直保存在内存中。
这就是闭包的作用,有时候我们需要一个模块中定义这样一个变量:希望这个变量一直保存在内存中但又不会“污染”全局的变量,这个时候,我们就可以用闭包来定义这个模块。
3 高端写法
上面的写法其实是最简单最原始的写法,而在实际应用中,没人这么玩,特别是在一些大型JS框架中更不会这么写。我之所以还要告诉你这种写法,是因为干扰因素越少越容易专注于一件事。下面我用常用的写法来写一个简单的demo组件:
这个组件的作用是:初始化一个容器,然后可以给这个容器添加子容器,也可以移除一个容器。功能很简单,但这里涉及到了另外一个概念:立即执行函数。 简单了解一下就行。主要是要理解这种写法是怎么实现闭包功能的。
可以将上面的代码结构分成两部分:(function(){})() 红色部分是一个表达式,而这个表达式本身是一个匿名函数,所以在这个表达式后面加()就表示执行这个匿名函数。
因此这段代码执行执行过程可以分解如下:
在这段代码中似乎看到了闭包的影子,但 f 中没有任何返回值,似乎不具备闭包的条件,注意这句代码:
4 简单的总结语
这是对闭包最简单的理解,当然闭包还有其更深层次的理解,这个就涉及的多了,你需要了解JS的执行环境(execution context)、活动对象(call object)以及作用域(scope)和作用域链(scope chain)的运行机制。但作为一个初学者,暂时不必了解这些,有了简单的理解之后,一定要在实际项目中用起来,等你用的多了,对于闭包,你自然会有更深层次的理解!
End!
1 闭包--爱的初体验
在接触一个新技术的时候,我首先会做的一件事就是:找它的demo code。对于码农们来说,代码有时候比自然语言更能理解一个事物。 其实,闭包无处不在,比如:jQuery、zepto的主要代码都包含在一个大的闭包中,所以下面我先写一个最简单最原始的闭包demo,好让你在大脑里产生闭包的画面:
function A(){ var count = 0; function B(){ count ++; console.log(count); } return B; } var c = A(); c();// 1 c();// 2 c();// 3
View Code
count是A中的一个变量,它的值在B中被改变,函数B每执行一次,count的值就在原来的基础上累加1。因此,A中的count一直保存在内存中。
这就是闭包的作用,有时候我们需要一个模块中定义这样一个变量:希望这个变量一直保存在内存中但又不会“污染”全局的变量,这个时候,我们就可以用闭包来定义这个模块。
3 高端写法
上面的写法其实是最简单最原始的写法,而在实际应用中,没人这么玩,特别是在一些大型JS框架中更不会这么写。我之所以还要告诉你这种写法,是因为干扰因素越少越容易专注于一件事。下面我用常用的写法来写一个简单的demo组件:
(function(document){ var viewport; var obj = { init:function(id){ viewport = document.querySelector("#"+id); }, addChild:function(child){ viewport.appendChild(child); }, removeChild:function(child){ viewport.removeChild(child); } } window.jView = obj; })(document);
这个组件的作用是:初始化一个容器,然后可以给这个容器添加子容器,也可以移除一个容器。功能很简单,但这里涉及到了另外一个概念:立即执行函数。 简单了解一下就行。主要是要理解这种写法是怎么实现闭包功能的。
可以将上面的代码结构分成两部分:(function(){})() 红色部分是一个表达式,而这个表达式本身是一个匿名函数,所以在这个表达式后面加()就表示执行这个匿名函数。
因此这段代码执行执行过程可以分解如下:
var f = function(document){ var viewport; var obj = { init:function(id){ viewport = document.querySelector("#"+id); }, addChild:function(child){ viewport.appendChild(child); }, removeChild:function(child){ viewport.removeChild(child); } } window.jView = obj; }; f(document);
在这段代码中似乎看到了闭包的影子,但 f 中没有任何返回值,似乎不具备闭包的条件,注意这句代码:
window.jView = obj;
4 简单的总结语
这是对闭包最简单的理解,当然闭包还有其更深层次的理解,这个就涉及的多了,你需要了解JS的执行环境(execution context)、活动对象(call object)以及作用域(scope)和作用域链(scope chain)的运行机制。但作为一个初学者,暂时不必了解这些,有了简单的理解之后,一定要在实际项目中用起来,等你用的多了,对于闭包,你自然会有更深层次的理解!
End!
相关文章推荐
- js常用方法和事件
- {"0":"192.168.1.100","1":"192.168.1.101"} 是Map
- js,将日期时分秒等格式化和转化
- JSTL动态加载单选框--【ssnc】
- html5载入JS引用
- javascript时间戳和日期字符串相互转换
- mvc使用JsonResult返回Json数据
- js-图标控件
- Jsoup 网页抓取数据之获取汽车时刻表 实例解析
- json 转换为 map、对象
- JavaScript 前端编程使用小技巧
- js对表单设置了readonly和disabled后的区别
- Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
- JavaScript的性能优化:加载和执行
- js获取当前url主机名和端口号
- 高性能Javascript:脚本的无阻塞加载策略
- 浏览器内核及JS引擎各有什么功能
- 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密
- JS 字符串操作函数 往指定位置插入字符 删除指定位置字符 替换指定位置字符
- 让你分分钟学会javascript闭包