在讨论bind
方法前,我们可以先看一个例子:
var getElementsByTagName = document.getElementsByTagName;
getElementsByTagName('body');
这样在浏览器(这里使用的是chrome
)执行会报错:
原因也显而易见:上面的getElementsByTagName
方法是document.getElementsByTagName
的引用,但是在执行时this
指向了global
或window
对象,而不是document
对象。
解决办法也很简单,使用call
或bind
方法来改变this
:
var getElementsByTagName = document.getElementsByTagName;
getElementsByTagName.call(document, 'body');
或
var getElementsByTagName = document.getElementsByTagName;
getElementsByTagName.bind(document)('body');
上述两种解决办法也可以看出call
和bind
的区别:call
方法是直接执行,而bind
方法是返回一个新函数。
实现
由于bind
方法是从ES5
才开始引入的,不是所有浏览器都支持,为了实现兼容,需要自己实现bind
方法。
我们先来看看bind
方法的定义:
bind
方法会创建一个新函数。当这个新函数被调用时,bind
的第一个参数将作为它运行时的this
(该参数不能被重写), 之后的一序列参数将会在传递的实参前传入作为它的参数。
新函数也能使用new
操作符创建对象:这种行为就像把原函数当成构造器,提供的this
值被忽略。
初步思路
- 因为
bind
方法不是立即执行函数,需要返回一个待执行的函数,这里可以利用闭包:return function(){}
; - 作用域绑定:可以使用
apply
或call
方法来实现; - 参数传递:由于参数的不确定性,需要用
apply
传递数组;
根据上述思路,我们先来实现一个简单的customBind
方法;
Function.prototype.customBind = function (context) {
var self = this,
/**
* 由于参数的不确定性,我们用 arguments 来处理
* 这里的 arguments 只是一个类数组对象,可以用数组的 slice 方法转化成标准格式数组
* 除了作用域对象 self 以外,后面的所有参数都需要作为数组进行参数传递
*/
args = Array.prototype.slice.call(arguments, 1);
// 返回新函数
return function() {
// 作用域绑定
return self.apply(context, args);
}
};
测试初版
var testFn = function(obj, arg) {
console.log('作用域对象属性值:' + this.value);
console.log('绑定函数时参数对象属性值:' + obj.value);
console.log('调用新函数参数值:' + arg);
}
var testObj = {
value: 1
};
var newFn = testFn.customBind(testObj, {value: 2});
newFn('hello world');
// 执行结果:
// 作用域对象属性值:1
// 绑定函数时参数对象属性值:2
// 调用新函数参数值:undefined
从测试执行结果可以看出,上面已经实现了作用域绑定,但是返回新函数newFn
不支持传参,只能在testFn
绑定时传参。
因为我们最终需要使用的是newFn
,所以我们需要让newFn
支持传参。
动态参数
我们来继续改造
Function.prototype.customBind = function (context) {
var fn = this,
args = Array.prototype.slice.call(arguments, 1);
return function() {
// 将新函数执行时的参数 arguments 全部数组化,然后与绑定时传参 arg 合并
var newArgs = Array.prototype.slice.call(arguments);
return fn.apply(context, args.concat(newArgs));
}
};
测试动态参数
var testFn = function(obj, arg) {
console.log('作用域对象属性值:' + this.value);
console.log('绑定函数时参数对象属性值:' + obj.value);
console.log('调用新函数参数值:' + arg);
}
var testObj = {
value: 1
};
var newFn = testFn.customBind(testObj, {value: 2});
newFn('hello world');
// 执行结果:
// 作用域对象属性值:1
// 绑定函数时参数对象属性值:2
// 调用新函数参数值:hello world
可以看出,绑定时传的参数和新函数执行时传的参数是合并在一起形成完整参数的。
原型链
我们再回到bind
方法的定义第二条:新函数也能使用new
操作符创建对象。
说明绑定后的新函数被new
实例化之后,需要继承原函数的原型链方法,且绑定过程中提供的this
被忽略(继承原函数的this
对象),但是参数还是会使用。所以我们需要一个中转的函数将原型链传递下去。
首先我们需要明确new
实例化过程,比如说var a = new b()
:
- 创建一个空对象
a = {}
,并且this
变量引用指向到这个空对象a
; - 继承被实例化函数的原型:
a.__proto__ = b.prototype
; - 被实例化方法
b
的this
对象的属性和方法将被加入到这个新的this
引用的对象中:b
的属性和方法被加入的a
里面; - 新创建的对象由
this
所引用:b.call(a)
;
接下来我们实现原型链。
Function.prototype.customBind = function (context) {
var self = this,
args = Array.prototype.slice.call(arguments, 1);
// 创建中转函数
var cacheFn = function() {};
var newFn = function() {
var newArgs = Array.prototype.slice.call(arguments);
/**
* 这里的 this 是指调用时的执行上下文
* 如果是 new 操作,需要绑定 new 之后作用域,this 指向新的实例对象
*/
return self.apply(this instanceof cacheFn ? this : context, args.concat(newArgs));
};
// 中转原型链
cacheFn.prototype = self.prototype;
newFn.prototype = new cacheFn();
return newFn;
};
测试原型链
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function() {
return this.x + ',' + this.y;
};
var YAxisPoint = Point.customBind({}, 0);
var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // "0,5"
axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new Point(1, 2) instanceof YAxisPoint; // true