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').οnclick=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').οnclick=obj.getName;                 //输出asf
                //$('myChk2').οnclick=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 >  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值