Function.prototype.bind及其polyfill分析

Function.prototype.bind执行会返回一个新的函数，并将this关键字设置为指定的值。并可以在执行该返回的函数之前传入参数。

语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg：表示返回的函数中this的指向。
• [, arg1[, arg2[, ...]]]：表明参数是可选的。

使用方法

绑定this

var obj = {
  name: 'real',
  getName: function() {
    console.log(this.name)
  }
}
var name = 'window';

obj.getName(); // "real"

var getName = obj.getName;
getName(); // "window";

var getName2 = obj.getName.bind(obj);
getName2(); // "real";

上述getName2方法中this指向了obj。

偏函数（提前传入参数）

var log = function log(...args) {
  console.log(args);
}
log(1,2,3); // [1, 2, 3]

var log2 = log.bind(null, 0);
log2(1,2,3); // [0, 1, 2, 3]

提前传入函数0。

结合setTimeout

setTimeout(fn, delay)。其中fn中的this默认指向的是全局window/global。

function Foo(name){ this.name = name; };
Foo.prototype.getName = function(){ console.log(this.name); }
Foo.prototype.declare = function() { setTimeout(this.getName, 100); }

var name = 'window';
var foo = new Foo('real');
foo.declare(); // 'window'

setTimeout(this.getName, 100);中的this指向的foo对象，可以找到Foo.prototype.getName。没能执行预期结果是因为Foo.prototype.getName中的this指向了window。如果改成：

setTimeout(this.getName.bind(this), 100);

可以取得预期效果，打印real。

结合new

这里大致说一下。你不知道的javascript 上卷一书中提到this有四种绑定方式。
① 默认绑定到window

var name = 'real';
console.log(this.name);

②隐式绑定到所在对象

var obj = {
  name: 'real',
  getName: function() { return this.name; }
}
console.log(obj.getName()) // 'real';

③显示绑定Function.prototype.apply/call及其变种Function.prototype.bind
④new绑定。

function Foo(name) { this.name = name; }
var foo = new Foo('real');
console.log(foo.name); // 'real'

其中，优先级从①到④依次增高。

和Function.prototype.apply/call区别

区别在于Function.prototype.bind不会执行被绑定的函数，并且返回一个新的函数。而Function.prototype.apply/call会执行被绑定的函数，并且被绑定的函数中的this发生偏移，并且传入参数。

polyfill的理解

bind 函数在 ECMA-262 第五版（es5）才被加入；它可能无法在所有浏览器上运行。你可以部分地在脚本开头加入以下代码，就能使它运作，让不支持的浏览器也能使用 bind() 功能。

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
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}

以一个demo为例。

function foo(name) { this.name = name; } 
var obj = { name: 'real'};
var bar = foo.bind(obj);

bar('123'); // 注1
console.log(obj.name); // 123

var baz = new bar('abc'); // 注2
console.log(baz.name); // 'abc'

接下来逐步分析。

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');
    }

这个很好理解。一般我们使用bind的方式是fn.bind(obj)。这里的this就是fn函数。上述demo中的foo。

if (this.prototype) {
  // Function.prototype doesn't have a prototype property
  fNOP.prototype = this.prototype; 
}

同理这里的this也是指上述demo中的foo。所以foo.prototype存在，设置fNOP.prototype = this.prototype;。

接下来就是最关键的地方了：

var aArgs   = Array.prototype.slice.call(arguments, 1),
    fToBind = this,
    fNOP    = function() {},
    fBound  = function() {
      return fToBind.apply(this instanceof fNOP
             ? this
             : oThis,
             aArgs.concat(Array.prototype.slice.call(arguments)));
    };

首先要明确的是bind函数返回的就是fBound函数，也就是外部的bar函数。并且fToBind = this,这里的this指向的还是还是demo中的foo函数。

最核心的这一行

this instanceof fNOP ? this : oThis, // 注3

的作用是区分fBound函数的调用方式。

如果是通过上述demo中的bar('123');这种方式调用，那么注3中的this就是window，this instanceof fNOP ? this : oThis返回oThis，也就是demo中的obj对象。那么就相当于执行foo.apply(obj, 123)，其结果就是改变了obj.name的值。

如果是通过var baz = new bar(‘abc’)这种方式调用。我们知道，使用new一个构造函数的过程中，会返回一个对象。并且构造函数中的this（在这里也就是foo中的this）会和该返回的对象baz绑定。所以this instanceof fNOP ? this : oThis中的this就是该对象baz。由于fBound.prototype = new fNOP();，所以fBound.prototype.__proto__指向FNOP.prototype。并且上面提到，bar函数就是fBound函数。所以baz是bar的一个实例，也就是fBound的一个实例。所以会有baz.__proto__指向fBound.prototype。并且fBound.prototype.__proto__指向FNOP.prototype，后者继续指向foo.prototype…所以baz的原型链上层是存在FNOP.prototype的。换言之，this instanceof fNOP ? this : oThis就返回this，也就是baz这个新new出来的对象。所以bar.name的结果是abc。

总结

主要讲了bind函数的基本用法，this的多种绑定方式。并且polyfill中大量使用了闭包和原型链的技巧，都是js中的基础。想想看，我们的js基础真的扎实吗！