javascript下动态this与动态绑定实例代码

那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象。但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window。不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者。

一个简单的例子:
[script]
<script>
window.name = "window";
var run = function() {
alert("My name is " + this.name);
}
run();
</script>
[/html]
这里你不能说run是作为window的一个属性而存在,但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上(不过在IE中window并不继承对象),于是有了window['xxx']与window.xxx性能上的差异。这是内部实现,不深究了。
另一个例子,绑定到一个明确的对象上


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


答案显然易见,this总是为它的调用者。但如果复杂一点呢?


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


尽管它是定义在object内部,尽管它是定义run函数内部,但它弹出的既不是object也不是run,因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用,不能被前两者调用,就只有被window拯救。window等原生对象浸透于在所有脚本的内部,无孔不入,只要哪里需要到它做贡献的地方,它都义不容辞。但通常我们不需要它来帮倒忙,这就需要奠出call与apply两大利器了。


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


call与apply的区别在于第一个参数以后的参数的形式,call是一个个,aplly则都放到一个数组上,在参数不明确的情况,我们可以借助arguments与Array.slice轻松搞定。


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


由此Prototype开发者搞了一个非常有名的函数出来,bind!以下是它的一个最简单的版本:

复制代码 代码如下:


var bind = function(context, fn) {
return function() {
return fn.apply(context, arguments);
}
}



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


不过为了面对更复杂的情况建议用以下版本。

复制代码 代码如下:


function bind(context,fn) {
var args = Array.prototype.slice.call(arguments, 2);
return args.length == 0 ? function() {
return fn.apply(context, arguments);
} : function() {
return fn.apply(context, args.concat.apply(args, arguments));
};
};


它还有一个孪生兄弟叫bindAsEventListener ,绑定事件对象,没什么好说的。

复制代码 代码如下:


var bindAsEventListener = function(context, fn) {
return function(e) {
return fn.call(context, (e|| window.event));
}
}


Prototype的版本

复制代码 代码如下:


Function.prototype.bind = function() {
if (arguments.length < 2 && (typeof arguments[0]==='undefined'))
return this;
var _slice = Array.prototype.slice
var __method = this, args = _slice.call(arguments,0), context = args.shift();
return function() {
return __method.apply(context, args.concat(_slice.call(arguments,0)));
}
}



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


bind函数是如此有用,google早早已把它加入到Function的原型中了(此外还有inherits,mixin与partial)。

复制代码 代码如下:


//在chrome中
var a = function(){};
alert(a.bind)


有绑定就有反绑定,或者叫剥离更好!例如原生对象的泛化方法我们是无法通过遍历取出它们的。


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


要取出它们就需要这个东西:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpdzp.html