函数含义:创建一个 Function ,当这个新的 Function 被调用时,使用给定的 this 值所在的 Context,并且传入给定的参数序列.

函数语法:var bound = fun.bind( thisValue, [, arg1 [, arg2 [ … ] ] ] );

thisValue:当新的 Function 被调用时,thisValue 会付给其 this 值。如果使用 new 操作符调用 Function,则忽略 thisValue。

arg1, arg2, …:当新的 Function 被调用时,当作参数列表传入,插入在调用时实际参数之前。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var dog = {
    food:'排骨',
    eat:function(){return this.food;}
};
//1
var cat = dog.eat.bind({food:'鱼'});
console.log(cat());
   
//2
var scat = dog.eat.bind(function(){this.food = '小鱼';}());
console.log(scat());
   
/////////////////////////////////////
   
function BigDog(){
    this.food = '大排骨';
    this.eat = function(){return this.food;}
    return this;
}
   
function BigCat(){
    this.food = '大鱼';
    this.eat = function(){return "吃:"+this.food;}
}
var BigDog2 = new BigDog();
   
//1
var Bcat1 = BigDog2.eat.bind(BigCat());
console.log(Bcat1());
//2
var Bcat2 = BigDog2.eat.bind(function(){
    this.food = '超大鱼';
}());
console.log(Bcat2());

结果为:

小鱼

大鱼

超大鱼

通过这种方式暂时把this绑定在一个方法上,声明时的函数执行,再执行。

如果你的浏览器还不支持bind函数,可以使用一下的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable 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,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };
  
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
  
    return fBound;
  };
}