定义

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

文中如有错误






















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













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

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

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

 
 

 
 

 
 

 
 

 
 

 
 

 
 
、大厂面试经验