JS的闭包与变量
发布时间:2017-07-14, 14:14:16 分类:HTML | 编辑 off 网址 | 辅助
正文 2992字数 329,685阅读
首先说一下闭包的概念,闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。先从简单的例子开始:
function comparison(propertyName){
return function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
};
}
Run code
Cut to clipboard
上面的函数comparison()中返回的匿名函数就是一个闭包,在这个匿名函数中,访问了外部函数中的变量propertyName,这个内部函数被返回之后,在其它地方调用时,仍然可以访问变量propertyName,原因是因为内部函数的作用域链包含外部函数comparison()的作用域。
var compare = comparison("age");
var result = compare({"age": 25},{"age": 35});
console.log(result); //25, 35
Run code
Cut to clipboard
在comparison()函数被调用时,会新建一个包含arguments和propertyName的活动对象,var compare = comparison(“age”);返回匿名函数,匿名函数的作用域链被初始化为包含comparison()函数的活动对象和全局变量对象。在comparison()函数执行完毕后,其执行环境的作用链会被销毁,但是活动对象不会,因为匿名函数的作用域链要引用这个活动对象。
compare返回的是内部的匿名函数,即:下面的这个函数
function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
};
Run code
Cut to clipboard
在第二部,var result = compare({“age”: 25},{“age”: 35})时,传入了object1和object2,但是并没有传入propertyName,但是函数仍然可以返回正确的结果,就是因为这时访问的是外部函数comparison()的活动对象propertyName的值”age”。外部函数的活动对象不会被销毁,除非你们函数被销毁。
如果我们在最后加上一句:
compare = null;
Run code
Cut to clipboard
这就解除了对匿名函数的引用。垃圾回收例程才会将其清除,否则其将一直存在于内存之中,因为垃圾回收例程不知道何时它还会被再使用。由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存,因此要避免过度使用闭包。
function newFunctions(){
var result = new Array();
for(var i = 0; i < 10; i++){
result[i] = function(){
return i;
}
}
return result;
}
var values = newFunctions();//返回长度为10的函数数组
console.log(values[2]()); //10
console.log(values[5]()); //10
Run code
Cut to clipboard
可以看出,values[2]()和values[5]()并没有像我们料想中的那样返回2,和5,而是全部返回的是10,这是因为,每个函数的作用域中都保存着newFunctions()函数的活动对象,因此它们引用的是同一个变量i。当newFunctions()返回时,变量i的值都是10。此时,每个函数引用的都是保存变量i的同一个变量对象,因此每个函数内部的i的值都是10.
可以通过创建一个匿名函数强制让闭包的行为符合预期。
function newFunctions(){
var result = new Array();
for(var i = 0; i < 10; i++){
result[i] = function(num){
return function(){
return num;
}
}(i);
}
return result;
}
var values = newFunctions();//返回长度为10的函数数组
console.log(values[2]()); //2
console.log(values[5]()); //5
Run code
Cut to clipboard
定义一个匿名函数,并将立即执行该匿名函数的结果赋值给数组。匿名函数有一个参数num,也是函数最终要返回的值。在每次调用这个函数时,都传入了一个变量i,每次将i的当前值复制给参数num。在这个匿名函数的内部,又创建并返回num的闭包。这样,result数组中的每个函数都有自己num变量,而不是像之前一样,全部都引用同样的一个i变量,因此就可以返回各自不同的数值了。
function(num){
return function(){
return num;
}
}(i);
Run code
Cut to clipboard
闭包是js中一个比较重要的概念,对于初学者来说,可能也是较为难以理解的知识点,希望本文来带给大家一点帮助。
(支付宝)给作者钱财以资鼓励 (微信)→
有过 2 条评论 »
匿名函数:没有函数名称的函数;
这就是匿名函数:
function(argument1,argument2){ }
如下面的代码函数b就是闭包,但是这个前提是:当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个我们通常所谓的“闭包”。
意思是说b要变成闭包的话,就必须被外包所引用,即c引用:
<script type="text/javascript"> function a(){ var i=1; function b(){ ++i; return i; } return b; } var c=a(); alert(c()); </script>
用一个专业一点的说法就是:函数调用返回后一个没有释放资源的栈区;
一般,当函数执行完毕后,局部活动对象会被销毁,内存中仅保存全局作用域,但闭包的情况是不一样的。闭包的活动对象依然会保存在内存中,于是像上例中,函数调用返回后,变量i是属于活动对象里面的,就是说其栈区还没有释放,但你调用c()的时候i变量保存的作用域链从b()->a()->全局去寻找作用域var i声明所在,然后找到了var i=1;然后在闭包内++i;结果,最后输出的值就是2了;不知道这么说有没人明白,如果不明白,那么只要记住它的闭包的两个点就好了,一点就是闭包的活动对象没有被销毁;第二点是作用域链的关键是他要遇到var 声明;就好了····
共同点:他们都有是函数;除此之外没有任何共同点;
下面是,阮一峰对闭包的解析;
闭包会携带它的函数的作用域,因此会比其他函数占用更多的内存,所以使用闭包要非常注意!!!
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。
下面就是我的学习笔记,对于Javascript初学者应该是很有用的。
一、变量的作用域
要理解闭包,首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种:全局变量和局部变量。
Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。
var n=999; function f1(){ alert(n); } f1(); // 999
另一方面,在函数外部自然无法读取函数内的局部变量。
function f1(){ var n=999; } alert(n); // error
这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!
function f1(){ n=999; } f1(); alert(n); // 999
二、如何从外部读取局部变量?
出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。
那就是在函数的内部,再定义一个函数。
function f1(){ var n=999; function f2(){ alert(n); // 999 } }
在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!
function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999
三、闭包的概念
上一节代码中的f2函数,就是闭包。
各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢?请看下面的代码。
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,可以在函数外部对函数内部的局部变量进行操作。
五、使用闭包的注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
六、思考题
如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。
代码片段一。
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()());
代码片段二。
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; alert(object.getNameFunc()());
this的指向是由它所在函数调用的上下文决定的,而不是由它所在函数定义的上下文决定的。
object.getnameFunc() 返回的匿名闭包函数被全局变量所引用,其中的this指向
全局变量,当执行时打印The Window 。
对于代码片段二
object.getnameFunc() 在返回闭包函数前,将this赋给that,此时getnameFunc是由
object调用的,故而this指向object,当内部函数被返回时,由于闭包的特性,仍然
能访问到外部函数中的值,当执行打印My Object 。
当一个函数作为函数而不是方法调用的时候,这个this关键字引用全局对象。容易令人混淆的是,当一个嵌套的函数(作为函数)在一个包含的函数中调用,而这个包含的函数是作为方法调用的,这也是成立的:this关键字在包含的函数中有一个值,但是它却(不太直观地)引用嵌套的函数体的内部的全局对象。
所以第一个打印出来的是"The Window"
代码段二、
由于this关键字不是在包含的函数中引用的,而是通过that=this这个调用的,所以这个this不是在闭包内的,因此这个this就不能调用函数体内的全局对象,而是他的局部对象object.name,所以第二个打印出来的是"My Object"
这就是javascript狡猾的地方。
我认为这句话只是在说闭包的调用,并不是没有被c引用的话,闭包就不存在
车是一类对象,
你的车是实例。
车是class
我的车既是一个对象也是一个实例?
对象与实例表达的意思都一样啊,只是不同的说法而已。车可以包括单车,汽车等,具有车所应该有的一般特点:有车轮、可以载东西等等,那么具体到你的那辆汽车,就是车的一个实例或者说是对象。
我觉得对象是实际存在的 但可以=null
实例也是对象,但实例!=null
对象范围包括实例。
对象是:产品设计图纸;
实例是:根据图纸设计出来的产品.产品可以体现出图纸的设计思想;
图纸没有实际作用;
产品可以直接使用
女孩是个对象,,人家不都说谈对象吗
实例呢,就是老婆了,,有了主的女人,,当然这个女人也可能离婚,,的,,哈哈
某个具体的对象就是实例。。
两个有时候就是一个意思,class代表的是一类对象,而这个类中的某一个具体的对象就是一个实例。
比如说人这个类,你是属于人类的,那这个人就是一个具体的对象,也是人类的一个实例。
你是人么?你不是人,你属于人类,但是你不能代表人,你只是自己,属于人类的一个对象,也是人类的一个实例。。
其实两个我感觉就差不多是一会事。。
我觉得,对象是普遍的面向对象思想的概念,面向对象的思想并不只是针对面向对象编程而言的,即 OO != OOP。而实例,是面向对象程序设计中对对象的特有称谓,所以在针对某一门具体的面向对象的语言时,对象和实例指的是同一个事物。
对象引用!=对象
可以有多个对象引用指向同一个对象
对象=实例
不知道理解的对不对
呵呵,对象是一种类型,而实例具体的一个对象。
我们常常听老人说
帮你介绍个 “对象”
真的见面的时候 来的是一个姑娘/帅哥
这就是 对象 实例的区别
对象是概念:你如说车,只是你脑中的一个认识,一类事物
实例是具体的实现:比如一辆奔驰。
类:
public class ren
{string 一个鼻子;
int 两个眼睛
}
实例1:
ren 张山=new ren();
张山.鼻子="高鼻梁";
张山.眼睛="双眼皮";
实例2:
ren 张山=new ren();
张山.鼻子="低鼻梁";
张山.眼睛="单眼皮";
对象:抽象的对象
实例:具体的对象
对象是对一类事物的抽象概括,
而
实例,是具体的某一个物体。
比如:
汽车是对象。
而
宝马就是实例。
对像object,类class,实例instance。
有时候说“对像”是指“类”,有时候是指“实例”,要看context。
这个问题就跟interface的实际意义是什么差不多。
对象分配在内存堆里,实例分配在堆栈里。
对象是不变的东西,它是对客观事物的抽象,实例是对操作对象的引用,你不能直接操作对象。
面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。
例如五子棋,面向过程的设计思路就是首先分析问题的步骤:1、开始游戏,2、黑子先走,3、绘制画面,4、判断输赢,5、轮到白子,6、绘制画面,7、判断输赢,8、返回步骤2,9、输出最后结果。把上面每个步骤用分别的函数来实现,问题就解决了。
而面向对象的设计则是从另外的思路来解决问题。整个五子棋可以分为 1、黑白双方,这两方的行为是一模一样的,2、棋盘系统,负责绘制画面,3、规则系统,负责判定诸如犯规、输赢等。第一类对象(玩家对象)负责接受用户输入,并告知第二类对象(棋盘对象)棋子布局的变化,棋盘对象接收到了棋子的i变化就要负责在屏幕上面显示出这种变化,同时利用第三类对象(规则系统)来对棋局进行判定。
可以明显地看出,面向对象是以功能来划分问题,而不是步骤。同样是绘制棋局,这样的行为在面向过程的设计中分散在了总多步骤中,很可能出现不同的绘制版本,因为通常设计人员会考虑到实际情况进行各种各样的简化。而面向对象的设计中,绘图只可能在棋盘对象中出现,从而保证了绘图的统一。
功能上的统一保证了面向对象设计的可扩展性。比如我要加入悔棋的功能,如果要改动面向过程的设计,那么从输入到判断到显示这一连串的步骤都要改动,甚至步骤之间的循序都要进行大规模调整。如果是面向对象的话,只用改动棋盘对象就行了,棋盘系统保存了黑白双方的棋谱,简单回溯就可以了,而显示和规则判断则不用顾及,同时整个对对象功能的调用顺序都没有变化,改动只是局部的。
再比如我要把这个五子棋游戏改为围棋游戏,如果你是面向过程设计,那么五子棋的规则就分布在了你的程序的每一个角落,要改动还不如重写。但是如果你当初就是面向对象的设计,那么你只用改动规则对象就可以了,五子棋和围棋的区别不就是规则吗?(当然棋盘大小好像也不一样,但是你会觉得这是一个难题吗?直接在棋盘对象中进行一番小改动就可以了。)而下棋的大致步骤从面向对象的角度来看没有任何变化。
当然,要达到改动只是局部的需要设计的人有足够的经验,使用对象不能保证你的程序就是面向对象,初学者或者很蹩脚的程序员很可能以面向对象之虚而行面向过程之实,这样设计出来的所谓面向对象的程序很难有良好的可移植性和可扩展性。
类:鸟类
对象:一群喜鹊
实例:一只喜鹊
类:具有同种属性的对象称为类,是个抽象的概念。比如说:汽车、人、狗、神;
对象:日常生活中的所有东西都是对象,是类的实例化。比如说:推土车是汽车的实例化;姚明是人的实例化;小白(狗的名字)是狗的实例化;二郎神是神的实例化;
属性:用来描述具体某个对象的特征的是属性,是静态的。比如:姚明身高2.6米多;小白的毛发是棕色的;二郎神额头上有只眼睛;
方法:每个对象有它们自己的行为或者是使用它们的方法,比如说一只狗会跑会叫等,我们把这些行为称之为方法,是动态的,可以使用这些方法来操作一个对象;
类的成员:属性和方法称为这个对象的成员,因为它们是构成一个对象的主要部分,没有了这两样东西,那么对象也没什么存在意义了。
给个例子:
我们以Person类为例:
Class Person { //人通常都有鼻子,眼睛等器官,这就是Person类的属性 private string eyes="";//建立私有成员 public string Eyes { set{eyes=value;} get{return eyes;}此处为eyes的访问器,用于对eyes赋值和取值 } //下面将声明一个方法,也称其为函数 //眼睛通常是用来看的,所以我们针对眼睛建立一个"看"的方法 public void Look() { //在这里可以写看的一些方法,比如如何看,看什么等等 } }
这就是一个"人"类,描述了"人"这个事物的大体特征
至于对象,就是将"人"具体到某一个人.
比如小王,
则可写成
Person xiaowang=new Person();//这个过程叫做实例化
这样就可以得到小王这个对象了.
我们可以通过小王这个对象来描述他自己的特征.
如
xiaowang.Eyes="big";//描述小王是大眼睛 xiaowang.look()//表示小王在看