从javascript的两个例子谈开

本文通过两个具体的代码示例详细解析了JavaScript中闭包的工作原理,重点探讨了函数内部this关键字的上下文环境及作用域链的问题。

今天是研究javascript的闭包问题,看到这么一个非常好的文章

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html?20110419152835

文章最后留了两个题目:

如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。

代码片段一。

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()());

这两个例子相当精简

这里记录下对这两个例子的理解:

理解最后两个例子:

1 函数中的this指的是调用这个函数的owner 
2 object.getNameFunc()是返回一个函数,并没有执行函数中的代码 
3 增加一个例子0: 
var name = "The Window"; 
var object = { 
name : "My Object", 
getNameFunc : function(){ 
return (this.name); 

}; 
var name = object.getNameFunc(); 
alert(name);

4 把例子1变成 
var name = "The Window"; 
var object = { 
name : "My Object", 
getNameFunc : function(){ 
return function(){ 
return this.name; //这个this是有上下文的限制的 
}; 

}; 
var tmp = Object.getNameFunc(); //此时没有执行this.name 
var name = tmp();//这个时候才执行,这时候的this上下文为全局 
alert(name); 
//alert(object.getNameFunc()())

5 把例子2变成: 
var name = "The Window";

var object = { 
name : "My Object",

getNameFunc : function(){ 
var that = this; 
return function(){ 
return that.name; 
}; 

}; 
var tmp = Object.getNameFunc(); //这个时候执行了that = this,这里的this上下文是object,所以that指的是object 
var name = Object.getNameFunc(); //这个时候执行了that.name 
alert(name); 
//alert(object.getNameFunc()());

这里面最难理解的应该是this的上下文

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值