prototype.js学习（3）函数绑定

类库提供了Function.prototype.bind Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。
任何一个函数都可以调用这两个方法；参数的是javascript对象或网页上元素对象；返回类型是个函数对象。
本来我就是个函数，返回还是函数，到这两个函数有什么不同呢。看实现代码，关键还是apply/call函数的代码。其实这里只是转化了一下方法调用的对象。


<input type="checkbox" id="myChk" name="asf" value="1" />Test






<script language="javascript" type="text/javascript">...


//


//函数绑定：bindAsEventListener()


//


var CheckboxWatcher = Class.create();






CheckboxWatcher.prototype = ...{




initialize: function(chkBox, message) ...{


this.chkBox = $(chkBox);


this.message = message;


//绑定点击onclick事件


this.chkBox.onclick = this.showMessage.bindAsEventListener(this);


},




showMessage: function(evt) ...{


alert(this.message + ' (' + evt.type + ')');


}


};




new CheckboxWatcher('myChk','message!!!!');


//$('myChk').onclick=function(){}; //正常情况下的事件写法


</script>




<br />


<input type="checkbox" id="myChk2" name="asf" value="1" />Test2




<script language="javascript" type="text/javascript">...




//函数绑定：bind()


//obj.getName.bind($('myChk2'));


//相当于从apply/call，应用某一对象的一个方法，用另一个对象替换当前对象。


//即：应用obj的getName方法，用$('myChk2')替换当前obj对象




function Class()...{


this.name="class";


}




Class.prototype.getName=function()...{


alert(this.name);


}


var obj=new Class();


//$('myChk2').onclick=obj.getName; //输出asf


//$('myChk2').onclick=obj.getName.bind(obj); //输出: class；或用bindAsEventListener也可以


$('myChk2').onclick=obj.getName.bind($('myChk2')); //输出：asf




//从上面代码可以看出bind/bindAsEventListener只是包装了一下apply/call方法，改变方法的调用对象。


//如例子，你可以把obj.getName方法转化成任何对象调用，并且把方法让表单元素触发。


//（bind和bindAsEventListener之间只是返回函数的参数不同）




</script>








<script language="javascript" type="text/javascript">...




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(); //输出yql




var obj2=new Object();


obj2.name="zkj";


obj2.fun=Class1.prototype.getName.bind(obj2);


obj2.fun();//输出zkj


</script>