关于Function.prototype.bindAsEventListener方法的解析
Function.prototype.bindAsEventListener=function(object){
var __method=this;
return function(event){
__method.call(object,event||window.event);
}
}
解构一下
//这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。
//在Function原型上增加prototype,则所有function()都能继续到这个方法。例如
alert(z.bindAsEventListener);
//做一个指针,指向Function<--请注重是Function而不是bindAsEventListener
returnfunction(event){
__method.call(object,event¦¦window.event);
}
//返回一个函数。请注重是返回一个函数而不是函数结果,否则函数内部并没有返回结果不就永远成了undefined了
call()要理解。这个说起来有点麻烦。举个例子:
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字面意思,用上面这些代码写个例子
<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指向的是Function,在这里也就是实例show
show通过arguments[0]来获取传递过来的第一个参数,也就是event。所以,可以随意修改show并能简单第将这个方法绑定到每一个事件中。当然,假如采用addEventListener方法来绑定事件会更灵活。
简便的维护,简洁的代码,我想这就是这个bind方法的初衷。
1.4下多了个return我想没有太多奥妙,应该是方便show()返回值。
没用过prototype框架,也没有上下文,差不多就这意思吧。