在ECMAScript 5中新增了bind() 函数用于控制调用的作用域 。bind () 是基于函数进行调用的 ,用来确保函数是在指定的this值所在的上下文中调用的。 我们可以通过如下代码了解其功能:
function SayHello() {
this.show=function () {
alert("hello")
}
document.οnclick= function () {
this.show();
}.bind(this)
}
SayHello();
在document.onclick 方法中 this 原本指向 document对象,但是我们通过bind方法可以将外部this 传入方法内部,使其作用域发生更改 。 这样就会调用window下的show方法,达到我们想要的效果 。但是老版本的浏览器并不支持bind( ), 幸运的是我们可以手动实现bind方法的兼容 。 直接扩展相关对象的原型,这样就可以在任意浏览器中使用它了 。
// 若Function原型上不存在bind方法
if(!Function.prototype.bind)
{
// 重新定义bind 方法
Function.prototype.bind=function(obj) {
var slice = [].slice,
args =slice.call(arguments,1), //获取后边的的参数,从bind 方法的第2参数个开始,同时转换为真正的数组 .
self = this, // 缓存变量 ,this 指当前调用bind方法的函数
nop = function () {}, // 做代理函数,方法传递
bound = function () {
// 若this指向的是当前所在函数,则继续使用this,否则使用传递进来的obj 做上下文替换 .
return self.apply(thisinstanceof nop ? this:(obj||{}),
args.concat(slice.call(arguments)));
};
nop.prototype = self.prototype;
bound.prototype = new nop();
return bound ;
}