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

最新推荐文章于 2014-05-04 14:00:14 发布

ljl_xyf

最新推荐文章于 2014-05-04 14:00:14 发布

阅读量596

点赞数

分类专栏： JAVASCRIPT 文章标签： function object prototype div url 框架

JAVASCRIPT 专栏收录该内容

39 篇文章

订阅专栏

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.οnclick=show.bindAsEventListener(div);
</script>

</body>
</html>

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

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

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

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