js--闭包的理解
从技术上来讲,在JS中,每个function都是闭包,因为它总是能访问在它外部定义的数据。
当该内部函数在外部函数外被调用,就生成了闭包。
函数内部可以直接读取全局变量。
闭包就是能够读取其他函数内部变量的函数。
在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
举例:我们在函数lazy_sum
中又定义了函数sum
,并且,内部函数sum
可以引用外部函数lazy_sum
的参数和局部变量,当lazy_sum
返回函数sum
时,相关参数和变量都保存在返回的函数中,这种称为“闭包(Closure)”的程序结构拥有极大的威力。
闭包经常用于创建含有隐藏数据的函数(但并不总是这样)。 代码如下:
<script type="text/javascript">
var db = (function() {
// 创建一个隐藏的object, 这个object持有一些数据
// 从外部是不能访问这个object的
var data = {};
// 创建一个函数, 这个函数提供一些访问data的数据的方法
return function(key, val) {
if (val === undefined) { return data[key] } // get
else { return data[key] = val } // set
}
// 我们可以调用这个匿名方法
// 返回这个内部函数,它是一个闭包
})();
db('x'); // 返回 undefined
db('x', 1); // 设置data['x']为1
db('x'); // 返回 1
// 我们不可能访问data这个object本身
// 但是我们可以设置它的成员
</script> ------常见闭包问题-----
/*输出的都是5*/
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
/*解决方法一:正常输出 依次 0,1,2,3,4
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}
*/
/*解决方法二:正常输出 依次 0,1,2,3,4
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = Function('alert('+i+')');
}
}*/
----------------------
JavaScript闭包例子
function outerFun()
{
var
a=0;
function
innerFun()
{
a++;
alert(a);
}
}
innerFun()
上面的代码是错误的.innerFun()的作用域在outerFun()内部,所在outerFun()外部调用它是错误的.
改成如下,也就是闭包:
Js代码
function outerFun()
{
var
a=0;
function innerFun()
{
a++;
alert(a);
}
return
innerFun; //注意这里
}
var
obj=outerFun();
obj(); //结果为1
obj();
//结果为2
var obj2=outerFun();
obj2();
//结果为1
obj2(); //结果为2
什么是闭包:
当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包
,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.
--------------------------------------------------------------------------------------------------------
再来看一个例子
Js代码
function outerFun()
{
var a
=0;
alert(a);
}
var a=4;
outerFun();
alert(a);
结果是 0,4 . 因为在函数内部使用了var关键字
维护a的作用域在outFun()内部.
再看下面的代码:
Js代码
function outerFun()
{
//没有var
a =0;
alert(a);
}
var
a=4;
outerFun();
alert(a);
结果为 0,0
真是奇怪,为什么呢?
作用域链是描述一种路径的术语,沿着该路径可以确定变量的值 .当执行a=0时,因为没有使用var关键字,因此赋值操作会沿着作用域链到var a=4;
并改变其值.
--------------------
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢?请看下面的代码。
Js代码
function f1(){
var n=999;
nAdd=function(){n+=1}
function
f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); //
999
nAdd();
result(); //
1000
在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage
collection)回收。
这段代码中另一个值得注意的地方,就是“nAdd=function(){n+=1}”这一行,首先在nAdd前面没有使用var关键字,因此
nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个
匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
http://www.jb51.net/article/24156.htm 前端必知的闭包知识及其应用
js--闭包的理解的更多相关文章
- JS闭包的理解及常见应用场景
JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...
- 个人对js闭包的理解
闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法 ...
- 【闭包】JS闭包深入理解
先看题目代码: 1 2 3 4 5 6 7 8 9 10 11 12 function fun(n,o) { console.log(o) return { fun:function(m){ ...
- 浅谈对Js闭包的理解
理解Js的闭包,首先让我们先看几个概念 执行环境(executive environment)每个函数都有自己的执行环境,匿名函数默认为全局环境. 作用域链(scope chain)子函数继承父函数, ...
- js 闭包原理理解
问题?什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 很显然 ...
- 从循环添加事件谈起对JS闭包的理解
1.引子 相信很多初学js的人,都遇到这样一种情况:想要给一堆按钮添加各自的事件,比如点击第i个按钮时,弹出i这个值.理所当然地,我们会这样写: var buttons = document.getE ...
- js闭包的理解-目前网上分析的最透彻文章
js的闭包对于大家实际上并不陌生,但是真正敢说自己完全理解的人并不多.笔者在网上看到分析闭包的文章非常多,篇幅用的非常多,但是实际上分析的并不到位,或者根本就是不正确的.我有时候都在想,写这些文章的人 ...
- 对JS闭包的理解
闭包,是JS里很重要的一个概念,也是相对来讲不太容易理解的一个东西,不过即使难理解,我们也要迎难而上啊,嘿嘿,网上有很多文章都在讲闭包,我在看JS设计模式的时候,书里也着重讲了闭包,但是书里官方的的确 ...
- JS闭包的理解
闭包的两个特点: 1.作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态.2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 其实上面两点可以合成一点,就是闭包函数返回时,该函数内部 ...
- JS闭包深入理解(理解篇)
看书的时候很是不明白为啥变量老是五,经过认真思考的出一下理解: function box() { var arr = []; for (var i = 0; i < 5; i++) { ...
随机推荐
- Javac编译与JIT编译
本文转载自:http://blog.csdn.net/ns_code/article/details/18009455 编译过程 不论是物理机还是虚拟机,大部分的程序代码从开始编译到最终转化成物理机的 ...
- JS中的call()和apply()方法理解和使用
1.方法定义call方法: 语法:obj.method.call(thisObj[,arg1[, arg2[, [,.argN]]]]) 定义:调用对象(obj)的一个方法(method),以另一个对 ...
- Java中IO流
* IO流用来处理设备之间的数据传输 * Java对数据的操作是通过流的方式 * Java用于操作流的类都在IO包中 * 流按流向分为两种:输入流,输出流. * 流按操作类型分为两种: * 字节流 : ...
- C#数字类型及运算符
- 常用的html标签大全
html标签大全 一.文字 1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>........ ...
- android应用编译失败 ResXMLTree_node size 类错误,以及 android studio 项目内搜索
今天很郁闷,又遇到个很让人崩溃的问题: ResXMLTree_node size 0 is smaller than header size 0x45. 类似这样的错误,提示中看不出任何有用的内容,网 ...
- mac相关
1 mac的动态链接库 mac基于bsd,所以它使用的是bsd风格的动态链接库,即以.dylib为后缀的动态链接库. 这个和windows的.dll和linux的.so相区分.
- 来看看CBIS 2017中国(上海)大数据产业创新峰会有哪些大师出席
CBIS 2017中国(上海)大数据产业创新峰会,围绕"数据+产业.企业+数据.技术+人才.品牌+市场.应用+发展"相继展开话题讨论. CBIS 2017中国(上海)大数据产业创新 ...
- #js#简单的在线计算器
啊因为懒得去找素材了,所以做了一个仿win10计算器的灰白色计算器. 参考:http://www.html5tricks.com/jquery-calculator.html HTML源码: < ...
- UML(Unified Modeling Language)同一建模语言
wiki定义: UML is a general-purpose, developmental, modeling language in the field of software engineer ...