开发学院网页设计 JavaScript Prototype1.5 诡异错误一例阅读

Prototype1.5 诡异错误一例

　2010-09-14 13:21:59　来源：WEB开发网　闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷

闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�

婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷　　闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺鍦拡閸嬪棝鎯€椤忓浂妯勯梺鍝勬湰濞叉ḿ鎹㈠┑濠勭杸闁哄洨濮烽悰銉╂⒒娴ｅ搫甯跺鐟帮攻缁傚秴饪伴崼姘ｅ亾閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡涱€楀褜鍠栭湁闁绘ɑ鐟ョ€氼喚绮绘ィ鍐╃厱妞ゆ劑鍊曢弸搴ㄦ煟韫囧鍔滈柕鍥у瀵潙螣閸濆嫬袝婵＄偑鍊戦崹娲偡閳哄懎绠栭柍鈺佸暞閸庣喖鏌曢崶褍绨婚柟鍑ゆ嫹

核心提示：示范代码：<divid="test-parent"><divclass="test-child">child</div></div><script>//获取childdivvarc=document.getElement

示范代码：<divid="test-parent">　　<divclass="test-child">child</div>　 </div><script>　 //获取childdiv　 varc=document.getElementsByClassName(’test-child’)[0];　 //克隆一份childdiv　 newInsertion.After(c,$(’test-parent’).innerHTML);　 //获取克隆后插入的第二个div　 varc2=$$(’.test-child’)[1];　 c2.hide();//Error:Objectdoesn’tsupportthispropertyormethod　 </script>　

从Prototype1.5开始，$()、$$()和getElementsByClassName()这三个方法取得的结果对象，在返回前Prototype都会用Element.extend(elm)函数进行封装。这样结果对象就自动拥有了Element对象的很多实例方法，原来比如　

Element.hide(element);　

这样的调用可以简化为　

$(element).hide();　

那么开头部分代码报错的原因何解呢？打印出"$(’test-parent’).innerHTML"的输出可看出些端倪来，IE7的输出结果如下：　

<DIVclass=test-child_extended="true">child</DIV>　

奥妙就在这个_extended属性上，看Element.extend()的源码　

Element.extend=function(element){　　if(!element)return;　　if(_nativeExtensions)returnelement;　if(!element._extended&&element.tagName&&element!=window){　　　varmethods=Element.Methods,cache=Element.extend.cache;　　　for(propertyinmethods){　　　　varvalue=methods[property];　　　　if(typeofvalue==’function’)　　　　　element[property]=cache.findOrStore(value);　　　}　　}　element._extended=true;　　returnelement;　 }　原来Element.extend(elm)方法会给element增加一个_extended属性，当element再次被$()等函数取得并返回时如果发现已经有了这个属性则停止执行。　

所以，开头代码报错的原因就在于通过innerHTML复制一个element的时候，_extended也被复制了进去，这样被复制后插入的新element就无法继承到Element的实例方法。对新element调用这些实例方法时就抛出错误来。　

解决办法　

从innerHTML中过滤掉_extended属性　

手工清除新对象的_extended属性后重新调用$()　

用DOM方法替换innerHTML　