定义

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

文中如有错误



















，欢迎在评论区指正              ，如果这篇文章帮助到了你 
 
  
 
  
 
  
 
  
 
  
 
  
 
，欢迎点赞和关注












，后续会输出更好的分享                    。

欢迎关注公众号：【程序员米粉】

公众号分享开发编程              、职场晋升
 

 
 

 
 

 
 

 
 

 
 

 
 

、大厂面试经验