- 浏览: 188139 次
- 性别:
- 来自: 湖州
最新评论
-
l_zh_y:
非常 感谢
spket-1.6.11.zip破解版-eclipse插件links方式安装包 -
nookiehuihui:
非常感谢 一直在找破解的
spket-1.6.11.zip破解版-eclipse插件links方式安装包 -
bangyan2003:
要破解的 这东西?????
spket-1.6.11.zip破解版-eclipse插件links方式安装包 -
oyhf521:
非常感谢啊,顶,就一个字
spket-1.6.11.zip破解版-eclipse插件links方式安装包 -
xiezhuogang:
哈哈,谢谢了
spket-1.6.11.zip破解版-eclipse插件links方式安装包
主题:"this" of JavaScript [翻译]
链接:http://www.iteye.com/topic/24457
我不赞成该文的观点,所以针对该文提出我自己的理解,如有不当之处,还请各位多多指教!
我觉得该文章对Copy和Referring的概念的理解会使大家陷入困境。
下面我针对该文的一些行文附上自己的理解,方便大家对比。
ps:
我觉得理解javascript这种解释型语言,应该从语言“运行时”这个角度来思考问题,注意“时间轴”上所发生的事情。
引用应该理解成js运行时指向一段内存空间的引用对象吧。
上面应该也只是引用而已,因为javascript的对象的属性都是引用,运行时,上面的例子只是将element的onclick属性指向了内存中分配的doSomething函数对象而已。
当然如果如果有两个引用对象开始都指向了同一个匿名对象,如果其中一个改变,并不会该变另外一个,因为其中一个的改变,其实是分配了新的对象给他,并不是改变原来他所指向的对象。
也许你会问: 如果element2.onclick = doSomething; 解释是:element2的onclick属性也指向了内存中分配的新的doSomething函数对象。
那下面的referring该如何解释呢?这里讲到了inline event registration(内联事件注册) 这是javascript和dom、bom对象相互协调工作的一种机制,我们可以这样理解,dom、bom对象的事件属性,在js里面的处理是这样的:
js针对这些属性会让他们指向内存中的匿名函数对象A,在匿名函数对象里面再调用我们指定的函数B。运行时,如果B函数的参数中含有this自然是把A函数中的this对象传递了过去。
我感觉:
作者该文章,从自己的使用经验上很好的总结了this在javascript的事件机制中的灵活作用,但是作者的这样的分析却违背了javascript语言的本质。
正所谓,万变不离其宗!
我们应该牢牢把握javascript语言的本质:基于对象的、弱类型语言、解释型语言。
那么是不是javascript中对象就不存在属性复制呢?答案是 不存在!
这里我要纠正大家一直都在说的一个看法,就是prototype中对象的继承是通过“拷贝”来实现的,这种理解是错误的,这样的理解将导致copy和referring两种分类的误区,代码如下:
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
在这里我们可以看到destination对象和source对象的同名属性只是指向了内存相同的对象而已,根本没有拷贝的情况发生,反个角度思考,如果是拷贝,那么我们需要在内存中分别为他们生成新的空间了,实际情况并非如此。这也是js节约内存的一种做法,也许你会问当source对象的属性改变以后,destination的属性根本没有变化呀,是的,那是因为source对象的属性改变只是他指向了内存中重新生成的一个对象,原来的所指向的内存中的那个对象并没有改变。
这里可一定要区分原始类型和包装类型哦,和java类似.
下面我附上一个例子:
function MakeArray(n) {
this[0] = "anuary"
this[1] = "February"
this[2] = "March"
this[3] = "April"
this[4] = "May"
this[5] = "June"
this[6] = "July"
this[7] = "August"
this[8] = "September"
this[9] = "October"
this[10] = "November"
this[11] = "December"
this['length'] = n
return this
}
theMonths = new Object();
theMonths.fun=MakeArray;
//这里打印出来看看也是有目的的哦
for(var p in theMonths){
alert("property:" + p + "==>value:" + theMonths[p]);
}
theMonths.fun(12);
var p2 = new Object();
for(var p in theMonths ){
p2[p]=theMonths[p];
}
//先打印一遍
for(var p in theMonths){
alert("property:" + p + "==>value:" + theMonths[p]);
}
for(var p in p2){
alert("property:" + p + "==>value:" + p2[p]);
}
theMonths.length=100;
//再印一遍 要理解为什么我会这样打印2遍哦
for(var p in theMonths){
alert("property:" + p + "==>value:" + theMonths[p]);
}
for(var p in p2){
alert("property:" + p + "==>value:" + p2[p]);
}
Referring
然而,如果你使用inline event registration(内联事件注册)
代码
<element onclick="doSomething()">
因此,它将声明“转到doSomething()并且执行它”。
当我们到达doSomething(),this关键字又重新指向了全局的window对象,函数返回错误信息。
The difference
如果你想使用this来指向HTML元素响应的事件,你必须确保this关键字被写在onclick属性里。只有在这种情况下它才指向event handler所注册的HTML元素。
代码
element.onclick = doSomething;
alert(element.onclick)
打印可以看到:
function doSomething() {
this.style.color = '#cc0000';
}
this关键字被展现在onclick函数中,因此它指向HTML元素。
但是如果执行
代码
<element onclick="doSomething()">
alert(element.onclick)
将打印看到:
function onclick() {
doSomething()
}
ps:
上面这段代码只是解释了inline event registration(内联事件注册)
在javascript里是怎么实现的,与this的本质并没有任何关联。内联事件注册 上面我说了,js只是在内存中让元素的属性指向了新分配的匿名函数对象A,如果我们自己没有在标签中写函数的话,那么默认是空函数 什么也不做,如果我们写了函数B,那么在匿名空函数A中调用我们的函数B,如果B里面有this,this当然不会想当然地指向元素而是指向window了,否则自然是将A函数中的this传递进B函数。
例子--拷贝
下面的例子中,this被写入onclick函数里:
代码
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
例子--引用
下述情况中,this指向window:
代码
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
注意attachEvent()的出现。
Microsoft event registration model最主要的弊端是attachEvent()创建了一个指向函数的引用,而不是复制它。
因此有时不可能知道哪个HTML正在处理该事件。
组合使用
当使用内联事件注册时,你可以将this发送到函数以至于可以正常使用:
代码
<element onclick="doSomething(this)">
function doSomething(obj) {
//this出现在event handler中并被发送到函数
//obj指向HTML元素,因此可以这样:
obj.style.color = '#cc0000';
}
ps:
该语句可能会让我们误以为inline event registration(内联事件注册)这样的处理方式有弊端,其实不然,这样做给了我们充分的自由,在触发了元素的事件以后,我们可以选择该处理什么范围内的事情,是全局还是针对该元素 控制权在我们自己手中。
我明白你的意思,但我觉得你没有说明白,相信也有他人有同感。
《JavaScript权威指南(4)》的 11.2.1 基本类型和引用类型 里有比较清楚的描述。
还没有找这本书来看看,大多是在网上查查,我发这些贴主要是针对新人javascript学习的时候往往发现内容很多反而抓不住核心,希望对他们有所帮助,描述比较随意,的确不是很清爽(努力ing),相信还是能看懂的吧。
我明白你的意思,但我觉得你没有说明白,相信也有他人有同感。
《JavaScript权威指南(4)》的 11.2.1 基本类型和引用类型 里有比较清楚的描述。
链接:http://www.iteye.com/topic/24457
我不赞成该文的观点,所以针对该文提出我自己的理解,如有不当之处,还请各位多多指教!
我觉得该文章对Copy和Referring的概念的理解会使大家陷入困境。
下面我针对该文的一些行文附上自己的理解,方便大家对比。
引用
代码:
function doSomething() {
this.style.color = '#cc0000';
}
Copying
代码
element.onclick = doSomething;
function doSomething() {
this.style.color = '#cc0000';
}
Copying
代码
element.onclick = doSomething;
ps:
我觉得理解javascript这种解释型语言,应该从语言“运行时”这个角度来思考问题,注意“时间轴”上所发生的事情。
引用应该理解成js运行时指向一段内存空间的引用对象吧。
上面应该也只是引用而已,因为javascript的对象的属性都是引用,运行时,上面的例子只是将element的onclick属性指向了内存中分配的doSomething函数对象而已。
当然如果如果有两个引用对象开始都指向了同一个匿名对象,如果其中一个改变,并不会该变另外一个,因为其中一个的改变,其实是分配了新的对象给他,并不是改变原来他所指向的对象。
也许你会问: 如果element2.onclick = doSomething; 解释是:element2的onclick属性也指向了内存中分配的新的doSomething函数对象。
那下面的referring该如何解释呢?这里讲到了inline event registration(内联事件注册) 这是javascript和dom、bom对象相互协调工作的一种机制,我们可以这样理解,dom、bom对象的事件属性,在js里面的处理是这样的:
js针对这些属性会让他们指向内存中的匿名函数对象A,在匿名函数对象里面再调用我们指定的函数B。运行时,如果B函数的参数中含有this自然是把A函数中的this对象传递了过去。
我感觉:
作者该文章,从自己的使用经验上很好的总结了this在javascript的事件机制中的灵活作用,但是作者的这样的分析却违背了javascript语言的本质。
正所谓,万变不离其宗!
我们应该牢牢把握javascript语言的本质:基于对象的、弱类型语言、解释型语言。
那么是不是javascript中对象就不存在属性复制呢?答案是 不存在!
这里我要纠正大家一直都在说的一个看法,就是prototype中对象的继承是通过“拷贝”来实现的,这种理解是错误的,这样的理解将导致copy和referring两种分类的误区,代码如下:
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
在这里我们可以看到destination对象和source对象的同名属性只是指向了内存相同的对象而已,根本没有拷贝的情况发生,反个角度思考,如果是拷贝,那么我们需要在内存中分别为他们生成新的空间了,实际情况并非如此。这也是js节约内存的一种做法,也许你会问当source对象的属性改变以后,destination的属性根本没有变化呀,是的,那是因为source对象的属性改变只是他指向了内存中重新生成的一个对象,原来的所指向的内存中的那个对象并没有改变。
这里可一定要区分原始类型和包装类型哦,和java类似.
下面我附上一个例子:
function MakeArray(n) {
this[0] = "anuary"
this[1] = "February"
this[2] = "March"
this[3] = "April"
this[4] = "May"
this[5] = "June"
this[6] = "July"
this[7] = "August"
this[8] = "September"
this[9] = "October"
this[10] = "November"
this[11] = "December"
this['length'] = n
return this
}
theMonths = new Object();
theMonths.fun=MakeArray;
//这里打印出来看看也是有目的的哦
for(var p in theMonths){
alert("property:" + p + "==>value:" + theMonths[p]);
}
theMonths.fun(12);
var p2 = new Object();
for(var p in theMonths ){
p2[p]=theMonths[p];
}
//先打印一遍
for(var p in theMonths){
alert("property:" + p + "==>value:" + theMonths[p]);
}
for(var p in p2){
alert("property:" + p + "==>value:" + p2[p]);
}
theMonths.length=100;
//再印一遍 要理解为什么我会这样打印2遍哦
for(var p in theMonths){
alert("property:" + p + "==>value:" + theMonths[p]);
}
for(var p in p2){
alert("property:" + p + "==>value:" + p2[p]);
}
引用
Referring
然而,如果你使用inline event registration(内联事件注册)
代码
<element onclick="doSomething()">
因此,它将声明“转到doSomething()并且执行它”。
当我们到达doSomething(),this关键字又重新指向了全局的window对象,函数返回错误信息。
The difference
如果你想使用this来指向HTML元素响应的事件,你必须确保this关键字被写在onclick属性里。只有在这种情况下它才指向event handler所注册的HTML元素。
代码
element.onclick = doSomething;
alert(element.onclick)
打印可以看到:
function doSomething() {
this.style.color = '#cc0000';
}
this关键字被展现在onclick函数中,因此它指向HTML元素。
但是如果执行
代码
<element onclick="doSomething()">
alert(element.onclick)
将打印看到:
function onclick() {
doSomething()
}
ps:
上面这段代码只是解释了inline event registration(内联事件注册)
在javascript里是怎么实现的,与this的本质并没有任何关联。内联事件注册 上面我说了,js只是在内存中让元素的属性指向了新分配的匿名函数对象A,如果我们自己没有在标签中写函数的话,那么默认是空函数 什么也不做,如果我们写了函数B,那么在匿名空函数A中调用我们的函数B,如果B里面有this,this当然不会想当然地指向元素而是指向window了,否则自然是将A函数中的this传递进B函数。
引用
例子--拷贝
下面的例子中,this被写入onclick函数里:
代码
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
例子--引用
下述情况中,this指向window:
代码
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
注意attachEvent()的出现。
Microsoft event registration model最主要的弊端是attachEvent()创建了一个指向函数的引用,而不是复制它。
因此有时不可能知道哪个HTML正在处理该事件。
组合使用
当使用内联事件注册时,你可以将this发送到函数以至于可以正常使用:
代码
<element onclick="doSomething(this)">
function doSomething(obj) {
//this出现在event handler中并被发送到函数
//obj指向HTML元素,因此可以这样:
obj.style.color = '#cc0000';
}
ps:
引用
Microsoft event registration model最主要的弊端是attachEvent()创建了一个指向函数的引用,而不是复制它。
该语句可能会让我们误以为inline event registration(内联事件注册)这样的处理方式有弊端,其实不然,这样做给了我们充分的自由,在触发了元素的事件以后,我们可以选择该处理什么范围内的事情,是全局还是针对该元素 控制权在我们自己手中。
评论
3 楼
jianfeng008cn
2006-09-22
醒来 写道
jianfeng008cn 写道
顶一下哦
我明白你的意思,但我觉得你没有说明白,相信也有他人有同感。
《JavaScript权威指南(4)》的 11.2.1 基本类型和引用类型 里有比较清楚的描述。
还没有找这本书来看看,大多是在网上查查,我发这些贴主要是针对新人javascript学习的时候往往发现内容很多反而抓不住核心,希望对他们有所帮助,描述比较随意,的确不是很清爽(努力ing),相信还是能看懂的吧。
2 楼
醒来
2006-09-22
jianfeng008cn 写道
顶一下哦
我明白你的意思,但我觉得你没有说明白,相信也有他人有同感。
《JavaScript权威指南(4)》的 11.2.1 基本类型和引用类型 里有比较清楚的描述。
1 楼
jianfeng008cn
2006-09-22
顶一下哦
发表评论
-
【Extjs学习七】Extjs2.0 日期相关函数
2009-03-02 11:22 1150主要是parse 到date 和 format到string -
【Extjs学习七】Extjs2.0 form如何使用checkbox和radiobox
2009-02-27 08:59 4324问题:Extjs2.0 form如何使用checkbox和ra ... -
在Ext中如何使窗体总在最前面(how to set a window always on top
2009-01-23 17:10 1668http://hi.baidu.com/rainchen/bl ... -
【Extjs学习七】extjs2-淘宝特效代码实践
2008-09-26 09:56 2554学习extjs拿网站特效练了练手,是在 http://www. ... -
【Extjs学习六】extjs2-element全面分析
2008-09-11 19:51 2543分析图标见附件excel表格,大家可以可通过数据帅选等方式自行 ... -
spket-1.6.11.zip破解版-eclipse插件links方式安装包
2008-09-11 18:58 7850spket-1.6.11.zip破解版-eclipse插件li ... -
【Extjs学习五】Extjs2-lib源码分析图解
2008-09-10 08:33 1551针对ext-lib进行了大致的分析,画了个简单的类图,给我的感 ... -
【Extjs学习四】Extjs2事件机制源码分析图解
2008-09-09 15:51 3349http://www.iteye.com/topic/1569 ... -
Extjs2.2 已经开始抛弃其他框架了吗?
2008-09-08 19:05 1088如题: 我看到在ext-base中ext.lib.event有 ... -
【Extjs学习三】Extjs2使用心得摘录
2008-07-17 09:35 1252080717 Ext.data.JsonStore的必要参 ... -
【Extjs学习二】Extjs2小控件slideplayer
2008-07-04 17:10 2780这下子左右上下的tab都可以轻松添加到web页面上去了,目前没 ... -
【Extjs学习一】Extjs2继承函数简单分析及疑问
2008-05-21 19:48 3591Ext = {version: '2.0'}; ... -
摘录的文章
2008-05-14 19:10 828http://www.cnblogs.com/leadzen/ ... -
【prototype学习】prototype源码分析—enumerable
2007-08-16 23:12 3045js 代码 var $break ... -
给javascript library挑挑刺
2007-05-16 10:59 6599第一个观点:(js代码不仅仅是为了实现功能而且是拿来给程序员看 ... -
I Love javascript
2007-04-02 22:58 110学习javascript是一个长期的过程,解释型弱类型动态语言 ... -
【prototype学习】基于prototype的tree(纯数据驱动OO)
2006-12-30 20:19 3076rt: 给出代码和demo; 看到很多tree的实现,很少有数 ... -
【prototype学习】基于prototype的拖动以及3横2竖布局
2006-12-25 16:25 4083rt ps: 学习prototype ing,参考着做了 ... -
【prototype学习】基于prototype的表单验证(二)
2006-12-12 16:26 16268上次在javaEye上看到了一 ... -
【prototype学习】基于prototype的表单验证(一)
2006-11-28 10:20 12135前台的表单验证是项目必不可少的一个部分,可以说是WEB项目很重 ...
相关推荐
在提供的资源中,《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导,而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...
在JavaScript中,对象是核心概念之一,它们是无序属性的集合,允许我们存储和操作数据。对象的属性可以是基本值(如字符串、数字、布尔值)或更复杂的对象和函数,使得JavaScript具备强大的数据结构和面向对象编程...
JavaScript是Web开发中不可或缺的一部分,它是一种轻量级的、解释型的编程语言,主要用于增强网页的交互性。本参考手册聚焦于...查阅手册时,结合书签和对象名列表,可以快速定位和学习特定对象的方法和属性。
在JavaScript中,`this`关键字是一个经常被讨论的话题,因为它在不同的上下文中具有不同的含义。`this`关键字是动态绑定的,也...记住`this`指向函数运行时所在的对象,有助于加深我们对JavaScript动态语言特性的理解。
在JavaScript中,对象是数据和函数的集合,是实现面向对象编程的基础。本文将深入探讨JavaScript创建对象的8种常见方式,帮助你更好地理解和掌握这门动态类型的编程语言。 1. **字面量(Literal)方式** 这是最...
JavaScript对象是编程语言的核心组成部分,尤其在Web开发中扮演着至关重要的角色。"JavaScript对象参考手册"涵盖了这一...通过深入学习,你将能够更好地理解和应用JavaScript对象,从而提升你的编程技能和项目质量。
在JavaScript中,面向对象编程(OOP)是其核心概念之一,允许开发者通过类和对象来组织和管理代码,提高代码的可重用性和可维护性。 8.1 面向对象术语 面向对象编程的基础包括类、对象、继承和多态等概念。类是对象...
本资源为个人Javascript学习笔记的精华版,涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明: 1. 什么是JavaScript? JavaScript是一种脚本语言,...
6. this关键字:在JavaScript中,this关键字用来引用当前执行上下文的对象。在构造函数、普通函数和箭头函数中,this的指向是不同的。理解this关键字有助于掌握JavaScript中对象的使用和方法的调用。 7. 高阶函数:...
第2篇 JavaScript内置对象篇 第3章 JavaScript内置对象 43 3.1 JavaScript对象概述 43 3.1.1 对象的概念 43 3.1.2 使用JavaScript对象 基础知识 44 3.2 Array对象 46 3.2.1 创建Array对象 46 3.2.2 Array对象属性 ...
### JavaScript经典面向对象设计 #### 标题与描述解析 标题“JavaScript经典面向对象设计”指出了本书的主要内容是关于如何使用面向对象编程(OOP)原则和技术来编写高质量、可扩展且可重用的JavaScript应用程序及...
最后,面向对象的基础知识也是不可或缺的,由于JavaScript的面向对象实现方式比较特殊,所以学习者需要了解正统的面向对象编程基础。 创建对象是面向对象编程的基础。在JavaScript中创建对象有多种方式,最简单的一...
这份"JavaScript学习PPT"是专为初学者设计的,旨在帮助他们掌握JavaScript的基础概念和核心技能。 首先,JavaScript的核心构成包括变量、数据类型、控制结构、函数和对象。变量是存储数据的地方,JavaScript支持...
### JavaScript面向对象精要 #### 一、概述 ...通过学习本书,开发者能够更好地理解JavaScript的底层工作原理,掌握高效的编码技巧,并能灵活运用面向对象的设计原则来构建可维护性强的应用程序。
JavaScript的面向对象主要基于以下三个核心概念: 1. **对象**:对象是JavaScript中的基本单位,它们由属性(key-value对)和方法(可执行的函数)组成。你可以通过创建一个`{}`字面量或`new Object()`来创建一个空...