理解bind函数

前言:之前一直不懂这个函数是干嘛的,最近慢慢有点懂了,说一说自己的理解~

本文按以下3个方面来谈谈bind函数

1)对bind函数的理解;

2)如何使用bind函数

3)自定义bind函数

https://msdn.microsoft.com/zh-cn/library/ff841995中有bind函数较详细的说明)

bind函数的理解

语法:

function.bind(thisArg[,arg1[,arg2[,argN]]])

首先不看传的参数,bind函数实现的功能就是将function绑定在thisArg环境上,使其可以在thisArg上调用function。听起来这和apply/call的作用好像一样,那到底是不是一样呢?

var a={x:1};
function foo(){
  return this.x;
}
console.log(foo.call(a));//1
console.log(foo.bind(a));//function foo(){return this.x;}

观察以上代码发现,call函数实现了在a对象上调用foo函数,但bind函数却返回了foo的主体。那这不是没起任何作用?

var a={x:1};
function foo(){
  return this.x;
}
var foo_bind = foo.bind(a);
console.log(foo);//function foo(){return this.x;}
console.log(foo_bind);//function foo(){return this.x;}
console.log(foo());//undefined
console.log(foo_bind());//1

通过以上代码可以发现,虽然通过bind绑定后返回的是foo函数主体,但是有差别的:通过bind绑定后返回的函数运行时已经是在a的环境中运行了(而单独运行foo是在window中,所以this.x返回undefined)。

综上可以总结为:bind函数实现与call/apply相似的功能:将给定函数绑定到特定的this环境中;但是bind函数绑定不是立刻执行,只是实现绑定,等到需要执行的时候再执行,此时才完成了和call/apply一样的功能。

那bind函数的这个作用又什么用呢?它一般用在回调函数和事件处理程序中(也就是异步编程中),举个例子

//bind方法
btn.onclick = foo.bind(a);
//匿名函数方法
btn.onclick = function(){
  foo.call(a);
}

以上两种方法实现相同的功能,再举个例子

//bind方法
setTimeout(foo.bind(a), 1000);
//匿名函数方法
setTimeout(function() { foo.call(a); }, 1000);

通过以上两个例子可以很清楚的看出,call函数相当于把绑定和执行一次性完成了(匿名函数达到了将其分开的作用),bind函数就是将绑定与执行分开了。

如何使用bind函数

上一部分其实已经讲了怎么使用,这一部分主要是将带参数是怎么使用。

规则:绑定函数将bind中指定的参数作为优先参数,在调用绑定函数时指定的参数作为辅助参数。啥意思?

var a={};
function foo(a,b,c){
  alert( a+b+c);
}
var foo_bind = foo.bind(a,"A","B")
foo_bind("X","Y","Z");//"ABX"
var foo_bind2 = foo.bind(a,"A","B","C")
foo_bind2("X","Y","Z");//"ABC"

观察以上代码,发现“A”,"B”作为优先参数转给了函数foo,而调用时传入的"X","Y","Z"要接在"A","B"后面(如果还需要就传,不需要了就不传了)

自定义bind函数

通过第一部分的讲解,其实自定义bind就很简单了。

首先,先不考虑传参数,写出简单的自定义bind

var a={x:1};
function foo(a,b,c){
 alert (a+b+c+this.x);
}
function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}
var foo_bind=bind(foo,a);
foo_bind("A","B","C");//"ABC1"

可以看出,其实就是用一个闭包把apply/call函数包起来了(即第一部分中讲到的),这里用apply是为了方便用arguments传参。注意,这里的arguments是指调用时的参数,而不是bind函数的。

接下来考虑给bind函数传参数。

var a={x:1};
function foo(a,b,c){
 alert (a+b+c+this.x);
}
function bind(fn,context){
  //从第3个参数开始取
  var args1 = Array.prototype.slice.call(arguments,2);
  return function(){
    //将bind函数的参数args1与调用时的参数arguments按先后顺序排列
    var args2= args1.concat(Array.prototype.slice.call(arguments));
    return fn.apply(context,args2);
  }
}
var foo_bind=bind(foo,a,"a");
foo_bind("A","B","C");//"aAB1"

到这里,就算都讲完了。这是我自己的理解,希望可以帮到你~

参考资料:

1)https://msdn.microsoft.com/zh-cn/library/ff841995

2)《JavaScript高级程序设计(第3版)》第602-604页。

原文地址:https://www.cnblogs.com/youhong/p/6781008.html