浏览 7110 次
该帖已经被评为良好帖
|
|
---|---|
作者 | 正文 |
发表时间:2006-09-16
链接:http://www.iteye.com/topic/24457 我不赞成该文的观点,所以针对该文提出我自己的理解,如有不当之处,还请各位多多指教! 我觉得该文章对Copy和Referring的概念的理解会使大家陷入困境。 下面我针对该文的一些行文附上自己的理解,方便大家对比。 引用 代码:
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(内联事件注册)这样的处理方式有弊端,其实不然,这样做给了我们充分的自由,在触发了元素的事件以后,我们可以选择该处理什么范围内的事情,是全局还是针对该元素 控制权在我们自己手中。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2006-09-22
jianfeng008cn 写道 顶一下哦
我明白你的意思,但我觉得你没有说明白,相信也有他人有同感。 《JavaScript权威指南(4)》的 11.2.1 基本类型和引用类型 里有比较清楚的描述。 |
|
返回顶楼 | |
发表时间:2006-09-22
醒来 写道 jianfeng008cn 写道 顶一下哦
我明白你的意思,但我觉得你没有说明白,相信也有他人有同感。 《JavaScript权威指南(4)》的 11.2.1 基本类型和引用类型 里有比较清楚的描述。 还没有找这本书来看看,大多是在网上查查,我发这些贴主要是针对新人javascript学习的时候往往发现内容很多反而抓不住核心,希望对他们有所帮助,描述比较随意,的确不是很清爽(努力ing),相信还是能看懂的吧。 |
|
返回顶楼 | |