prototype.js中用了大量的applyå’Œcall函数åQŒä¸æ³¨æ„ä¼?x¨¬)造成理解偏差ã€?br />官方解释åQšåº”用某一对象的一个方法，用另一个对象替换当前对象ã€?br />apply与call的区别是½W¬äºŒä¸ªå‚æ•îC¸åŒã€‚apply是Â?数组或者arguments 对象。而call是逗号隔开的ä“Q何类型ã€?/p>

apply,callæ–ÒŽ(gu¨©)³•æœ€è®©ähæ·äh·†çš„地方也是apply,call的特艌Ӏ‚但最好不要滥用ã€?br />能改变调用函数的对象。如下例åQŒå‡½æ•îC¸­ç”¨åˆ°this关键字，˜q™æ—¶å€™this代表的是apply,call函数的第一个参数ã€?br />
<script src="prototype1.3.1.js"></script>
<input type="text" id="myText"  value="input text">
<script>
   function Obj(){
       this.value="对象åQ?;
   }
   var value="global 变量";
   function Fun1(){
       alert(this.value);
   }
   window.Fun1();
   Fun1.apply(window);
   Fun1.apply($('myText'));
   Fun1.apply(new Obj());
</script>

2、关于闭�/strong>
prototype.js在Class.create,bind½{‰ä¸­ç”¨åˆ°javascript的闭包特艌Ӏ‚但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我¾˜»è¯‘çš?a class="" title="" href="/zkjbeyond/archive/2006/05/23/47725.html" target="_blank">½‹‡æ–‡ç« äº†è§£é—­åŒ?/a>ã€?br />3、让我比较反感的两个æ–ÒŽ(gu¨©)³•
åQ?åQ?br />var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
很讨厌用别的语言的风格来写javascript。用˜q™ä¸ªæ–ÒŽ(gu¨©)³•æž„造自定义¾c»Â?òq¶æ²¡æœ‰è§‰å¾—有多方便，减少代码行数åQŒåªä¼?x¨¬)让人难理解åQŒå¤šå®šä¹‰ä¸€ä¸ªinitializeæ–ÒŽ(gu¨©)³•ã€?br />其实讨厌˜q™æ¡æœ‰äº›ç‰µå¼ºåQŒä¸˜q‡ä¿®æ”¹Object的原型对象就有点˜q‡åˆ†äº†ã€?br />åQ?åQ‰Object.prototype.extend
  先不˜q‡ä½ å–个extend的名字会(x¨¬)让熟æ‚(zh¨¨n)‰javaçš„äh引è“v的歧义。修改Objectçš„prototypež®Þp¯´ä¸è¿‡åŽÖMº†ã€‚不知道作者是怎么考虑的。当你for in循环对象是，éºÈƒ¦ž®±æ¥äº†ã€‚可能有äºÞZ¼š(x¨¬)问你for inòq²å—ã€?我一个项目中既用了DWR,也用了prototype.jsåQŒdwr˜q”回的javascript对象都多了个exetend属性，˜q˜å¾—ç‰ÒŽ(gu¨©)®Šå¤„理ã€?br />  以前我比较过dojoå’Œprototype.js中ç‘ô承的实现åQŒçŽ°åœ¨æˆ‘明白个道理。对于javascript˜q™ç§æ²¡æœ‰é™æ€ç±»åž‹æ£€æŸ¥ï¼Œè¯­æ³•å®½æ¾çš„语­a€æ¥è®²åQŒå¦‚果你选择了某个js¾cÕdº“åQŒé‚£ä½ ä¹Ÿå¿…须适应作者写javascript的风根{€‚prototype.js的作者对extendçš„ä‹É用炉火纯青，如果我们不当它只是个属性拷贝的函数的话åQŒå¤šè¯»è¯»prototype.js的代码是好的ã€?br />4、关于函数的¾l‘定
  ¾cÕdº“提供了Function.prototype.bind  Function.prototype.bindAsEventListener两个æ–ÒŽ(gu¨©)³•ã€‚首先我们从概念上解释一个这两个æ–ÒŽ(gu¨©)³•ã€?br />ä»ÖM½•ä¸€ä¸ªå‡½æ•°éƒ½å¯ä»¥è°ƒç”¨˜q™ä¸¤ä¸ªæ–¹æ³•ï¼›å‚数的是javascript对象或网™åµä¸Šå…ƒç´ å¯¹è±¡åQ›è¿”回类型是个函数对象ã€?br />本来我就是个函数åQŒè¿”回还是函敎ͼŒåˆ°è¿™ä¸¤ä¸ªå‡½æ•°æœ‰ä»€ä¹ˆä¸åŒå‘¢ã€‚看实现代码åQŒå…³é”®è¿˜æ˜¯apply\call函数的代码。其实这里只是è{化了一下方法调用的对象ã€?/p>

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="asf" value=1> Test
<script>
    var CheckboxWatcher = Class.create();
    CheckboxWatcher.prototype = {
       initialize: function(chkBox, message) {
            this.chkBox = $(chkBox);
            this.message = message;
            this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
       },
       showMessage: function(evt) {
          alert(this.message + ' (' + evt.type + ')');
       }
    };
new CheckboxWatcher('myChk','message!!!!');
//$('myChk').onclick=function(){};
</script>
˜q™æ˜¯ https://compdoc2cn.dev.java.net/ 上ä‹D的例子，个äh感觉没什么意思，反而让我对bind,bindAsEventListener有些反感。（javascriptž®±æ˜¯˜q™æ ·åQŒæ˜Žæ˜Žå¤§å®‰™ƒ½çŸ¥é“的语法，但写出来的代码差别确很大åQ?br />看下面代码：(x¨¬)

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
function Class(){
    this.name="class";
}
Class.prototype.getName=function(){
    alert(this.name);
}
var obj=new Class();
//$('myChk').onclick=obj.getName;
$('myChk').onclick=obj.getName.bind(obj);
//$('myChk').onclick=obj.getName.bind($('myChk'));
</script>

从上面代码可以看å‡?font color="#ff0000">bind/bindAsEventListener只是包装了一下apply/callæ–ÒŽ(gu¨©)³•åQŒæ”¹å˜æ–¹æ³•çš„调用对象ã€?/font>如例子，你可以把obj.getNameæ–ÒŽ(gu¨©)³•è½¬åŒ–成ä“Q何对象调用，òq¶ä¸”把方法让表单元素触发。（bindå’ŒbindAsEventListener之间只是˜q”回函数的参æ•îC¸åŒï¼‰
˜q™ä¸¤ä¸ªæ–¹æ³•ä¹Ÿå¯ä»¥ç”¨åœ¨å¯¹è±¡ä¹‹é—´çš„方法重用，实现¾cÖM¼¼¾l§æ‰¿æ–ÒŽ(gu¨©)³•çš„概å¿üc€‚看以下代码åQŒå…¶å®žæ˜¯æ¯”较无聊的ã€?/p>

<script src="prototype1.3.1.js"></script>
<script>
function Class1(name){
    this.name=name;
}
Class1.prototype.getName=function(){
    alert(this.name);
}
function Class2(name){
    this.name=name;
　　this.getName=Class1.prototype.getName.bind(this);
}
var obj1=new Class2("yql");
obj1.getName();
var obj2=new Object();
obj2.name="zkj";
obj2.fun=Class1.prototype.getName.bind(obj2);
obj2.fun();
</script>

我从来没读过prototype.js的扩展项目代码，也不知道bind..的最ä½?j¨©ng)_®žè·µï¼Œä¸€èµähŒ–掘吧。但你绝对不要把bind/bindAsEventListener从绑定的词义上来理解åQŒå¯èƒ½ä¼š(x¨¬)让你更加˜qähƒ‘。从apply/call理解本质。应用某一对象的一个方法，用另一个对象替换当前对象ã€?/p>

5、关于事件的注册

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
Event.observe(myChk, 'click', showMessage, false);
//$('myChk').onclick=showMessage;
//$('myChk').onclick=showMessage.bind();
$('myChk').onclick=showMessage.bind($('myChk'));
function showMessage() {
      alert(this.value);
}
</script>

执行上面代码åQŒä½ ž®Þpƒ½æ˜Žç™½Event.observe与bind/bindAsEventListener之间的区别：(x¨¬)
åQˆï¼‘åQ?昄¡„¶Event.observe有限åˆÓž¼Œåªèƒ½å¤„理½Ž€å•çš„函数åQŒåƈ函数中不能有this之类的东è¥Ñ€?br />åQˆï¼’åQ‰Event.observe内部用到addEventListeneråQattachEvent。能把多个函数加åˆîC¸€ä¸ªè§¦å‘事ä»Óž¼ˆwindow.onloadåQ‰ã€‚bind是覆盖ã€?/p>

6、关于事件监听最ä½?j¨©ng)_®žè·?/strong>
很显然prototype.js提供的事件注册方法不是很完善。那看看dojo的时间注册吧åQ?a class="" title="" target="_blank">中文ç‰?/a>åQ‰ï¼Œæ›´åŠ å¤æ‚åQŒä¼°è®¡å¾ˆå¤šäh像我一æ øP¼Œå¯¹äºŽdojo暂时持观望态度ã€?br />如果你看˜q‡çš„前篇关于闭包的介¾lï¼Œå¯èƒ½è§è¿‡ä»¥ä¸‹ä»£ç ã€?br />看以下代码前我想表述一个观点，ä»ÖM½•¾|‘页中元素，‹¹è§ˆå™¨éƒ½ä¼?x¨¬)äØ?f¨´)你创å»ÞZ¸€ä¸ªå¯¹è±¡ï¼ˆè§?/a>åQ‰ã€‚（我觉得）˜q™äº›å¯¹è±¡ä¸Žä½ å»ºç«‹javascript对象区别是它们有事äšg监听åQŒä¼š(x¨¬)响应鼠标键盘的事件。如果你用了以下代码åQŒé‚£ä¹ˆæŠŠäº‹äšg监听代码很好的è{化到你的javascript代码中ã€?/p>

function associateObjWithEvent(obj, methodName){
    return (function(e){
        e = e||window.event;
        return obj[methodName](e, this);
    });
}
function DhtmlObject(elementId){
    var el = getElementWithId(elementId);
    if(el){
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}

有时间我想用以上思想实现一个网™å‰|ÕQ动框拖拉的代码（其实已经有很多了åQ‰ï¼Œå¾…箋........

 

 

引用åQšajaxcn.org 链接。谢谢dlee
 

原创专栏 开源学�/a> 2006-05-25 16:45 发表评论

]]>