我们先来看一道题目

1
2
3
4
var  write = document.write; 
write( "hello" ); 
//1.以上代码有什么问题
//2.正确操作是怎样的

不能正确执行，因为write函数丢掉了上下文，此时this的指向global或window对象，导致执行时提示非法调用异常，所以我们需要改变this的指向

正确的方案就是使用 bind/call/apply来改变this指向

bind方法

1
2
var  write = document.write;
write.bind(document)( 'hello' );

call方法

1
2
var  write = document.write;
write.call(document, 'hello' );

apply方法

1
2
var  write = document.write;
write.apply(document,[ 'hello' ]);

bind函数

bind()最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。常见的错误就像上面的例子一样，将方法从对象中拿出来，然后调用，并且希望this指向原来的对象。如果不做特殊处理，一般会丢失原来的对象。使用bind()方法能够很漂亮的解决这个问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type= "text/javascript" >
 
this .num = 9; 
var  module = { 
     num: 81,
     getNum: function(){
         console.log( this .num);
     }
};
 
module.getNum();  // 81 ,this->module
 
var  getNum = module.getNum;
getNum();  // 9, this->window or global
 
var  boundGetNum = getNum.bind(module); 
boundGetNum();  // 81,this->module
 
</script>

偏函数（Partial Functions）

Partial Functions也叫Partial Applications，这里截取一段关于偏函数的定义：

Partial application can be described as taking a function that accepts some number of arguments, binding values to one or more of those arguments, and returning a new function that only accepts the remaining, un-bound arguments.

这是一个很好的特性，使用bind()我们设定函数的预定义参数，然后调用的时候传入其他参数即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type= "text/javascript" >
 
function list() { 
   return  Array.prototype.slice.call(arguments);
}
 
var  list1 = list(1, 2, 3);
console.log(list1); // [1, 2, 3]
 
// 预定义参数37
var  leadingThirtysevenList = list.bind(undefined, 37);
 
var  list2 = leadingThirtysevenList();
console.log(list2); // [37] 
 
var  list3 = leadingThirtysevenList(1, 2, 3);
console.log(list3); // [37, 1, 2, 3] 
</script>

和setTimeout or setInterval一起使用

一般情况下setTimeout()的this指向window或global对象。当使用类的方法时需要this指向类实例，就可以使用bind()将this绑定到回调函数来管理实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type= "text/javascript" >
 
function Bloomer() { 
   this .petalCount = Math.ceil(Math.random() * 12) + 1;
}
 
// 1秒后调用declare函数
Bloomer.prototype.bloom = function() { 
   window.setTimeout( this .declare.bind( this ), 1000);
};
 
Bloomer.prototype.declare = function() { 
   console.log( '我有 '  +  this .petalCount +  ' 朵花瓣!' );
};
 
var  test =  new  Bloomer();
 
test.bloom();
 
</script>

绑定函数作为构造函数

绑定函数也适用于使用new操作符来构造目标函数的实例。当使用绑定函数来构造实例，注意：this会被忽略，但是传入的参数仍然可用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type= "text/javascript" >
 
function Point(x, y) { 
 
   this .x = x;
   this .y = y;
}
 
Point.prototype.toString = function() { 
   console.log( this .x +  ','  +  this .y);
};
 
var  p =  new  Point(1, 2); 
p.toString();  // 1,2
 
var  YAxisPoint = Point.bind( null ,10);
var  axisPoint =  new  YAxisPoint(5); 
axisPoint.toString();  // 10,5
 
console.log(axisPoint instanceof Point);  // true 
console.log(axisPoint instanceof YAxisPoint);  // true 
console.log( new  Point(17, 42) instanceof YAxisPoint);  // true  
</script>

上面例子中Point和YAxisPoint共享原型，因此使用instanceof运算符判断时为true

伪数组的转化

上面的几个小节可以看出bind()有很多的使用场景，但是bind()函数是在 ECMA-262 第五版才被加入；它可能无法在所有浏览器上运行。这就需要我们自己实现bind()函数了。

首先我们可以通过给目标函数指定作用域来简单实现bind()方法：

1
2
3
4
5
6
Function.prototype.bind = function(context){ 
   self =  this ;   //保存this，即调用bind方法的目标函数
   return  function(){
       return  self.apply(context,arguments);
   };
};

考虑到函数柯里化的情况，我们可以构建一个更加健壮的bind()：

1
2
3
4
5
6
7
8
Function.prototype.bind = function(context){ 
   var  args = Array.prototype.slice.call(arguments, 1),
   self =  this ;
   return  function(){
       var  innerArgs = Array.prototype.slice.call(arguments);
       var  finalArgs = args.concat(innerArgs);
       return  self.apply(context,finalArgs);
   };<br>｝

这次的bind()方法可以绑定对象，也支持在绑定的时候传参。

继续，Javascript的函数还可以作为构造函数，那么绑定后的函数用这种方式调用时，情况就比较微妙了，需要涉及到原型链的传递：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Function.prototype.bind = function(context){ 
   var  args = Array.prototype.slice(arguments, 1),
   F = function(){},
   self =  this ,
   bound = function(){
       var  innerArgs = Array.prototype.slice.call(arguments);
       var  finalArgs = args.concat(innerArgs);
       return  self.apply(( this  instanceof F ?  this  : context), finalArgs);
   };
 
   F.prototype = self.prototype;
   bound.prototype =  new  F();
   return  bound;
};

这是《JavaScript Web Application》一书中对bind()的实现：通过设置一个中转构造函数F，使绑定后的函数与调用bind()的函数处于同一原型链上，用new操作符调用绑定后的函数，返回的对象也能正常使用instanceof，因此这是最严谨的bind()实现。

对于为了在浏览器中能支持bind()函数，只需要对上述函数稍微修改即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Function.prototype.bind = function (oThis) { 
     if  ( typeof  this  !==  "function" ) {
       throw  new  TypeError( "Function.prototype.bind - what is trying to be bound is not callable" );
     }
 
     var  aArgs = Array.prototype.slice.call(arguments, 1),
         fToBind =  this ,
         fNOP = function () {},
         fBound = function () {
           return  fToBind.apply(
               this  instanceof fNOP && oThis ?  this  : oThis || window,
               aArgs.concat(Array.prototype.slice.call(arguments))
           );
         };
 
     fNOP.prototype =  this .prototype;
     fBound.prototype =  new  fNOP();
 
     return  fBound;
};