JavaScript深入理解系列：bind方法详解以及手写
定义
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
由定义可知，函数调用bind()方法的时候，会返回一个新函数，并且this指向bind函数的第一个参数，简单来表示。
fn.bind(obj对象)执行 返回一个函数，想调用的时候，fn.bind(obj)()这样来执行;
举个例子：
var name = '炒米粉';
var obj = {
name: '程序员米粉'
};
function fn() {
console.log(this.name);
}
var getFn = fn.bind(obj); // 返回一个函数命名getFn
getFn(); // this.name => '程序员米粉'， this指向obj
fn(); // this.name => '炒米粉'， this指向window
总结：
1、bind()执行，返回一个函数。
2、bind()接受多个参数。
第1步：模拟返回一个函数
由上述定义以及总结可知，我们首先模拟一个函数调用bind()方法返回一个函数：
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
return function() {
self.apply(context);
};
};
// 使用一下
var getFn = fn.myBind(obj); // 返回一个函数命名getFn
getFn(); // this.name => '程序员米粉'， this指向obj
apply实现可以看我以往写的 《javascript深入系列之手写call与apply》
那我们把fn再改造一下，加一个返回值
function fn() {
console.log(this.name);
return 1
}
// 使用一下
var getFn = fn.myBind(obj); // 返回一个函数命名getFn
console.log(getFn()); // 发现并没有把目标值1返回回来
上面的例子getFn()执行发现并没有把目标值1返回回来，那我们需要myBind函数里面添加 return self.apply(context);
最终代码：
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
return function() {
// 这里加了return
return self.apply(context);
};
};
// 使用一下
var getFn = fn.myBind(obj); // 返回一个函数命名getFn
console.log(getFn()); // 1, 目标值达到
第2步：模拟返回接受多个参数
我们先来看看bind是怎样接收多个参数的。还是原来的例子：
var name = '炒米粉';
var obj = {
name: '程序员米粉'
};
function fn(age, weight) {
console.log(this.name);
console.log(age, weight);
}
// var getFn = fn.bind(obj, 18, 150);
// getFn(); // this.name => '程序员米粉'，age, weight => 18, 150
// var getFn = fn.bind(obj);
// getFn( 18, 150); // this.name => '程序员米粉'，age, weight => 18, 150
var getFn = fn.bind(obj, 18);
getFn(150); // this.name => '程序员米粉'，age, weight => 18, 150
从例子可以看出来，参数可以在两个地方传进来。在用bind绑定函数fn的时候传参数18， fn.bind(obj, 18); 返回函数的时候传参数15 getFn(150)。
思考一下，我们如何把这两个地方传进来的参数合并一下。别问，我们可以用arguments对象获取传传进来的参数合并一下。那我们继续修改一下代码：
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
// myBind函数传进来的参数，从第2个开始取
var args = arguments.length && Array.prototype.slice.call(1, arguments.length) || [];
// array.slice(start, end)
return function() {
// 返回函数传进来的参数，从第1个开始取
var arr = arguments.length && Array.prototype.slice.call(0, arguments.length) || [];
return self.apply(context, arr.concat(args));
};
};
var getFn = fn.bind(obj, 18);
getFn(150); // age, weight => 18, 150
好了我们已经搞定了总结里面的两点了。
第3步：模拟构造函数效果
bind()方法还有一种特殊的用法，那就是原函数使用bind()方法绑定函数之后，原函数可以作为构造函数使用的。
绑定函数自动适应于使用 new 操作符去构造一个由目标函数创建的新实例。当一个绑定函数是用来构建一个值的，原来提供的 this 就会被忽略。 --来源moz
这什么意思呢？那我们先来代码看一下：
var name = '炒米粉';
var obj = {
name: '程序员米粉'
};
function fn(age, weight) {
console.log(this.name);
console.log(age, weight);
this.phoneNumber = '188888888'
}
fn.prototype.haveMoney = 'NO';
var getFn = fn.bind(obj, 18);
// 通过使用bind()方法返回的绑定函数，可以使用new创建实例对象。fn的this不再指向obj，而是新创建的对象newObj
var newObj = new getFn(150);
// fn函数
// this.name => undefined;
// age, weight => 18, 50
newObj.haveMoney // => 'NO'
newObj.phoneNumber // => '188888888'
由上面的例子可以看出来this.name变成了undefined，为什么呢？由于使用了new创建了新对象newObj，this.name中的this失效了，this指向了newObj，如果没有用new创建新对象，this是指向bind(obj)中的obj的。原函数fn就作为了一个构造函数使用，所以newObj作为new创建出来的实例，可以继承fn的原型上的属性和方法，可见 newObj.haveMoney // => 'NO',newObj.phoneNumber // => '188888888'
继续改进一下我们myBind方法：
var name = '炒米粉';
var obj = {
name: '程序员米粉'
};
function fn(age, weight) {
console.log(this.name);
console.log(age, weight);
this.phoneNumber = '188888888';
}
fn.prototype.haveMoney = 'NO';
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
// myBind函数传进来的参数，从第2个开始取
var args = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
var returnFn = function() {
var arr = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
// this instanceof returnFn 什么意思？这是一个判断对象是否属于继承于当前对象
// 如果为true，那就是返回的函数returnFn作为了一个构造函数使用，那么this指向新实例，不再是context
// 如果为false，那就是返回的函数returnFn作为了一个普通函数使用，那么this指向context或者window
return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
};
// 这样写，使returnFn作为一个构造函数使用的时候，那么通过原型继承的方法，returnFn可以继承当前对象里面原型上面所有属性和方法
// 修正prototype之后，创建的新实例，可以继承原型的属性和方法，例如例子，实例newObj继承了，this.phoneNumber中的属性值。
returnFn.prototype = this.prototype;
return returnFn;
};
var getFn = fn.myBind(obj, 18);
var newObj = new getFn(150);
// console.log(this.name); => undefined;
// console.log(age, weight); => 18, 50
newObj.haveMoney // => 'NO'
newObj.phoneNumber // => '188888888'
上面例子比较难懂就是this instanceof returnFn ? this : context 与 returnFn.prototype = this.prototype;，这都是跟js里面的原型继承相关知识点。
第4步：最终版本
好了，我们已经完成了90%了，但是还有点小瑕疵，关于原型继承的，我们先来看看例子：
function fn() {}
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
// myBind函数传进来的参数，从第2个开始取
var args = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
var returnFn = function() {
var arr = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
// this instanceof returnFn 什么意思？这是一个判断对象是否属于继承于当前对象
// 如果 为true，那就是返回的函数returnFn作为了一个构造函数使用，那么this指向新实例，不再是context
// 如果 为false，那就是返回的函数returnFn作为了一个普通函数使用，那么this指向context或者window
return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
};
// 这样写，使returnFn作为一个构造函数使用的时候，那么通过原型继承的方法，returnFn可以继承当前对象里面原型上面所有属性和方法
// 修正prototype之后，创建的新实例，可以继承原型的属性和方法，例如例子，实例newObj继承了，this.phoneNumber中的属性值。
returnFn.prototype = this.prototype;
return returnFn;
};
var getFn = fn.myBind(obj);
getFn.prototype.text = '我是被bind方法返回的函数'
console.log(fn.prototype.text) // '我是被bind方法返回的函数'，理论上这里不应该被修改，应该为undefined
由上述例子可以看出来，我们只是修改了通过用了bind方法返回函数的prototype对象添加了属性，那么原函数的原型对象prototype也被修改了。这样是不行的。所以我们继续优化了方法。
function fn() {}
Function.prototype.myBind = function(context) {
if (typeof this !== 'function') {
throw new Error('The bind method is not available');
}
var context = context || window;
var self = this;
// myBind函数传进来的参数，从第2个开始取
var args = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
var returnFn = function() {
var arr = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
};
var templateFn = function() {};
// 修正prototype之后，templateFn可以继承原函数原型的属性和方法
templateFn.prototype = this.prototype;
// 创建空函数实例，然后给returnFn的原型继承，returnFn创建的实例可以继承templateFn方法。
// 这样修改了returnFn原型方法，都影响不了 原函数myBind原型对象，只会影响空函数templateFn。妙妙妙啊。
returnFn.prototype = new templateFn();
return returnFn;
};
var getFn = fn.myBind(obj);
var newObj = new getFn();
getFn.prototype.text = '我是被bind方法返回的函数'
console.log(fn.prototype.text) // => undefined
上述例子，可以看出来我们通过一个空函数 var templateFn = function() {};，那么空函数templateFn的原型继承原函数myBind的原型对象，再把返回函数returnFn继承空函数templateFn的实例属性和方法。这样子改变返回函数templateFn的原型对象，不再影响原函数了myBind原型对象，简直一个妙字。
防止调用不是函数情况
if (typeof this !== 'function') {
throw new Error('The bind method is not available');
}
题外话：apply、call、bind三者的区别
-
三者都可以改变函数的this对象指向。
-
三者第一个参数都是this要指向的对象，如果没有这个参数或参数为undefined或null，则默认指向全局window。
-
三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入，bind是返回绑定this之后的函数，apply、call 则是立即执行。
结语
希望看完这篇文章对你有帮助：
- 理解bind原理
- 实践写一个bind方法
- 区分apply、call、bind三者的区别
文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注，后续会输出更好的分享。
欢迎关注公众号：【程序员米粉】
公众号分享开发编程、职场晋升、大厂面试经验
![[NodeJS] timers阶段的源码解析](https://blog.xiaobaicai.fun/wp-content/themes/xiaolin/img/default_thumb.png)
