定义

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三者的区别

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注，后续会输出更好的分享。

欢迎关注