深究Function.prototype.bind

前言

在读这篇文章以前，但愿你对Function.prototype.bind有所了解。

若是尚未的话，强烈推荐去看看MDN上关于它的介绍，飞机票。

主要有如下两个特征：

1. 屡次bind，仅第一次的bind传入的绑定this生效
2. 使用new 操做bind返回的构造函数，曾经绑定的this会失效

bind的polyfill

MDN上为了向下兼容给出了bind的polyfill，先把代码贴出来：

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 does not have a prototype property
      fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}
复制代码

一段示例代码

var o1 = { a: 1 }
var o2 = { b: 2 }
var f = function () {
    console.log(this)
    console.log([].slice.call(arguments))
}

var f1 = f.bind(o1, 1, 2) // A行
var f2 = f1.bind(o2, 3, 4) // B行

f2(5, 6) // C行
复制代码

学习方法有正向也有反向，咱们从运行代码来解释这段polyfill

分析

接下来将会从执行上下文栈来解析这段代码运行的整个过程。 若是对“执行上下文栈”还不了解的话，推荐看个人另外一篇文章——执行上下文

1. 刚开始时的全局执行上下文：

1. 变量对象：o1，o2，f，f1，f2
2. 做用域链：目前为空
3. this，指向window

2. A行执行时加入的执行上下文：

1. 变量对象：oThis === o1，aArgs === [1, 2]，fToBind === f，fNOP，fBound
2. 做用域链：全局执行上下文
3. this，指向f
4. 返回的f1，指向变量对象的fBound，它的原型链：fBound.prototype.proto === f.prototype

3. B行执行时加入的执行上下文：

1. 变量对象：oThis === o2，aArgs === [3, 4]，fToBind === f1，fNOP，fBound
2. 做用域链：全局执行上下文
3. this，指向f1
4. 返回的f2，指向变量对象的fBound，它的原型链：fBound.prototype.proto === f1.prototype

4. C行执行时加入的执行上下文：

1. 变量对象：arguments
2. 做用域链：比较复杂，看下面说明
3. this，指向window

C行其实会执行两次函数：

第一次：

1. 变量对象：arguments === [5, 6]
2. 做用域链：B行的执行上下文（闭包）、全局执行上下文
3. this，指向window

f2(5, 6) === return f1.apply(o2, [3, 4, 5, 6])
复制代码

第二次：

1. 变量对象：arguments === [3, 4, 5, 6]
2. 做用域链：A行的执行上下文（闭包）、全局执行上下文
3. this，指向o2

return f1.apply(o2, [3, 4, 5, 6])  === return f.apply(o1, [1, 2, 3, 4, 5, 6]
复制代码

5. 结果

因此f2(5, 6)的打印的结果就是

{a: 1}
[1, 2, 3, 4, 5, 6]
复制代码

能够直接放到chrome的开发者工具里运行获得结果。

两处亮点

1. 维护原型关系

这里使用的是“原型式继承”，能够参考个人另外一篇文章——类相关。

在这里的做用是，把原函数（f）的原型保留下来，以供第二个亮点使用。

2. bind不影响new

我想你必定很疑惑fBound里的这段代码

this instanceof fNOP ? this : oThis
复制代码

其实这里的做用就是为了bind返回的函数不影响new操做符建立对象（也就是this被忽略）。

若是再执行如下语句，再上门的基础上修改f：

var f = function () {
    this.c = 3
    console.log(this)
    console.log([].slice.call(arguments))
}

var f2Obj = new f2(5, 6);

// 运行过程，下面的this指将要建立的新对象：
f2(5, 6) === return f1.apply(this, [3, 4, 5, 6] === return f.apply(this, [1, 2, 3, 4, 5, 6]

// 结果（在chrome上执行）
打印：
f {c: 3}
[1, 2, 3, 4, 5, 6]

而且 f2Obj.c === 3
复制代码

总结

不禁得感叹这个polyfill的做者，思惟太缜密了。我只能经过解析执行上下文一步一步来了解整个设计思路。

1. 借助闭包保存每次bind传入的参数，包括thisArg和args
2. 返回的fBound造成调用链，每个fBound都引用上一个fBound，尾端是原函数
3. 使用原型式继承的方式使new操做符建立新对象时候不受曾经绑定的this的影响

谢谢你能看到这里。

原文摘自个人我的博客，欢迎进来踩踩。