从javascript的两个例子谈开

简介:

今天是研究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的上下文

目录
相关文章
|
JavaScript 前端开发 Windows
|
JavaScript 前端开发
JavaScript小例子
<html> <head> <style> #vector {position:static; border:1px solid red; background-color:gray;} span {display:block; position:absolute; font-size:20px;
837 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0
|
5天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
33 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1