关于Function.prototype.bindAsEventListener方法的解析

Function.prototype.bindAsEventListener=function(object){
     var __method=this;
     return function(event){
              __method.call(object,event||window.event);
    }
}

解构一下

//这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。

Function.prototype.bindAsEventListener=function(object){...}


//在Function原型上增加prototype,则所有function()都能继续到这个方法。例如

function z();
alert(z.bindAsEventListener);


//做一个指针,指向Function<--请注重是Function而不是bindAsEventListener

var__method=this;

returnfunction(event){
         __method.call(object,event¦¦window.event);
}

//返回一个函数。请注重是返回一个函数而不是函数结果,否则函数内部并没有返回结果不就永远成了undefined了

call()要理解。这个说起来有点麻烦。举个例子:

var a={
        val_url:"http://www.baidu.com",
        run:function(val){
                alert(this.val_url+"____"+val)
           }
      }
varb={
       val_url:"http://blog.my400800.cn"
}

      a.run.call(b,"c");

//a的run方法召唤b来调用它,参数是"c"。b并没有run方法。相当于b.run=c.run;b.run("c");的这么过程。

根据bindAsEventListener字面意思,用上面这些代码写个例子

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UntitledPage</title>
<scripttype="text/javascript">

Function.prototype.bindAsEventListener=function(object){
      var __method=this;
      return function(event){
            __method.call(object,event||window.event);
      }
}

</script>
</head>
<body>
<div id="test" style="background-color:#ccc;padding:20px;">aaaaaaaaaaaaaaaaaaaaaaa</div>

<script type="text/javascript">

//方便起见,重新封装getElementById。自然它也具备bindAsEventListener方法

function $(id){returndocument.getElementById(id);}

//定义一个事件监听方法

function show(){alert(arguments[0]);}

//获取Element

var div=$("test");

//绑定事件作为div的事件监听器,在onclick时触发假如使用addEventListener可绑定多个方法。

div.onclick=show.bindAsEventListener(div);
</script>

</body>
</html>

在这个例子中,onclick触发show方法在binddiv后返回的一个方法,即function(event);

这个方法召唤div来实现__method方法,并以当前的事件作为参数传递过去。

__method.call(object,event||window.event);

前面强调过__method指向的是Function,在这里也就是实例show

show通过arguments[0]来获取传递过来的第一个参数,也就是event。所以,可以随意修改show并能简单第将这个方法绑定到每一个事件中。当然,假如采用addEventListener方法来绑定事件会更灵活。

简便的维护,简洁的代码,我想这就是这个bind方法的初衷。

1.4下多了个return我想没有太多奥妙,应该是方便show()返回值。

没用过prototype框架,也没有上下文,差不多就这意思吧。

原文地址:https://www.cnblogs.com/jishu/p/1940098.html