正文
理解并手写 bind() 函数
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
有了对call()、apply()的前提分析，相信bind()我们也可以手到擒来。
参考前两篇：'对call()函数的分析' 和 '对apply()函数的分析'，我们可以先得到以下代码：
Function.prototype.myBind = function(obj){
// 判断调用对象是否为函数
if(typeof this !== 'function'){
console.error('type error!')
}
// 判断绑定的对象
obj = obj || window;
}
bind()函数与call()函数参数的格式相同，不同的是bind()返回的是一个函数。
Function.prototype.myBind = function(obj){
if(typeof this !== 'function'){
console.error('type error!')
}
obj = obj || window;
// 获取正确参数
let args = [...arguments].slice(1);
// 返回函数
return function Fn(){};
}
使用bind()函数来对this进行绑定，可以之间在内部使用 apply() 。
Function.prototype.myBind = function(obj){
if(typeof this !== 'function'){
console.error('type error!')
}
obj = obj || window;
let args = [...arguments].slice(1);
return function Fn(){
// 直接使用apply()
return this.apply();
};
}
这个时候会发现，我们绑定的this是window，而不是我们想要的’this‘环境，可以使用that作为中间量。
Function.prototype.myBind = function(obj){
if(typeof this !== 'function'){
console.error('type error!')
}
obj = obj || window;
// 在这里借助that
that = this；
let args = [...arguments].slice(1);
return function Fn(){
return that.apply();
};
}
然后我们需要考虑apply()中传递的参数，这里我们使用数组的concat()方法，得到apply中传递的数组。
Function.prototype.myBind = function(obj){
if(typeof this !== 'function'){
console.error('type error!')
}
obj = obj || window;
that = this；
let args = [...arguments].slice(1);
return function Fn(){
// 传递两个参数(绑定对象，数组)
return that.apply(obj,args.concat(...arguments));
};
}
最后需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。
Function.prototype.myBind = function(obj){
if(typeof this !== 'function'){
console.error('type error!')
}
obj = obj || window;
that = this；
let args = [...arguments].slice(1);
return function Fn(){
// 根据调用方式，传入不同绑定值
return that.apply(
this instanceof Fn ? this : obj,
args.concat(...arguments));
};
}
最后通过一个例子，来验证是否达到bind()的功能要求。
Function.prototype.myBind = function(obj){
if(typeof this !== 'function'){
console.error('type error!')
}
obj = obj || window;
that = this；
let args = [...arguments].slice(1);
return function Fn(){
return that.apply(
this instanceof Fn ? this : obj,
args.concat(...arguments)
);
}
}
let dog = {
name: '狗',
eat(food1, food2) {
console.log(this.name + '爱吃' + food1 + food2);
}
}
let cat = {
name: '猫',
}
dog.eat.bind(cat, '鱼', '肉')(); // 猫爱吃鱼肉
dog.eat.mybind(cat, '鱼', '肉')(); // 猫爱吃鱼肉
