JS语言理解13 bind函数的实现

发表于 分类于 阅读次数：

面试经常遇到的问题，以前的实现考虑还是不太全面，总结了一下。

定义

bind的作用和call与apply类似，区别在于使用上。bind的执行的结果返回的是绑定了一个对象的新函数

先看一个使用例子：

1
2
3
4
5
6
7
8
9
var obj = { name: 'Jay' };

function sayName(){
  console.log(this.name);
}

var fn = sayName.bind(obj) ;
fn() 
// 'Jay'

MDN上的定义：

bind()方法创建了一个新的函数，在bind()被调用时，这个新函数的this会被设定为bind方法传入的第一个参数，其余的参数将作为新函数的参数供调用时使用。

从上面的定义来看，bind函数的功能包括：

  1. 改变原函数的this指向，绑定this
  2. 返回原函数的拷贝，并预传参数

要注意的，当使用new调用bind返回的参数时，bind绑定this失效。这是由于上面提到过的this绑定的优先级，new的优先级高于bind

简易版

在面试过程中，无数次遇到过这个问题，如何自己实现一个bind函数，一般情况下，都知道了用apply/call来实现

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
Function.prototype.myBind = function (thisArg) {
  if (typeof this !== 'function') {
    return;
  }
  const self = this;
  const args1 = [].slice.call(arguments, 1);
  return function () {
    const args2 = [].slice.call(arguments, 0);
    self.apply(thisArg, args1.concat(args2))
  }
};

const obj = {
  age: 1,
};

function foo(a, b) {
  console.log(this.age, a, b);
}

foo.bind(obj, 2)(3);
// 1 2 3

foo.myBind(obj, 2)(3);
// 1 2 3

貌似没有问题了，实现了bind上面提到的绑定this和复制函数的功能，还附带实现了传参的实现。

但是有一点，对于绑定优先级的处理还有一些问题，this有4种绑定规则：

  1. 默认绑定
  2. 隐式绑定
  3. 显示绑定
  4. new绑定

四种绑定规则的优先级从上到下依次递增，默认绑定的优先级最低，new绑定的优先级最高，而bind方法就是显示绑定的一种，优先级应该低于new绑定

先复习一下new调用构造函数时的过程：

  1. 创建一个全新的对象
  2. 这个对象被执行[[Prototype]]连接
  3. 将这个对象绑定到构造函数中的this
  4. 如果函数没有返回其他对象，则new操作符调用的函数则会返回这个对象

先看一下正常的bind后的函数遇到new操作符，表示是如何的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const obj = {};

function foo(name) {
  this.name = name;
}

const Person = foo.bind(obj);
Person('jay');
console.log(obj.name);
// 'jay'

let p2 = new Person('chow');
console.log(obj.name); // jay
console.log(p2.name); // chow

首先直接调用bind后的参数，这时候this指向obj，所以obj.name变成了jay，然后通过new操作符调用Person，根据上面的优先级，new的优先级更高，所以this会绑定为创建的新对象p2，所以对name的更改是对p2的name的更改，obj的name保持不变

再来看看我们的myBind方法遇到this后的表现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const obj = {};

function foo(name) {
  this.name = name;
}

const Person = foo.myBind(obj);
Person('jay');
console.log(obj.name);
// 'jay'

let p2 = new Person('chow');
console.log(obj.name); // 'chow'
console.log(p2.name); // undefined

而我们的简易版bind方法，一旦绑定了this后，当遇到new操作符后也不会更改，而是固定在obj上，所以在new的过程中绑定的this仍然是我们myBind绑定的对象obj，所以p2.name

所以对简易版的bind还需要优化

优化版

想要解决上面的问题，关键点就是在于处理new的第三步，我们的myBind函数识别是new调用，那么就不再将this绑定到我们传入的thisArg对象，而是绑定为函数本身调用的this

那么问题就转换为了，如何判断一个函数是普通调用，还是通过new操作符调用。在new的过程中，会首先建立新建对象的原型继承，然后绑定新建对象到构造函数的this，也就是下面的过程

1
2
3
4
5
6
let p1 = new Person();

// 1 let p1 = {};
// 2 p1.__proto__ === Person.prototype;
// 3 p1 === this;
// 4 return p1;

通过第二步和第三步，this就成为了Person的一个实例，可以通过this insetanceof Person来判断，所以可以对上面的myBind进行优化：

1
2
3
4
5
6
7
8
9
10
11
12
13
Function.prototype.myBind = function (thisArg) {
  if (typeof this !== 'function') {
    return;
  }
  const self = this;
  const args1 = [].slice.call(arguments, 1);
  return function fBound() {
    // 判断是否 new 调用
    const target = this instanceof fBound ? this : thisArg;
    const args2 = [].slice.call(arguments, 0);
    self.apply(target, args1.concat(args2))
  };
};

再来验证一下效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const obj = {};

function foo(name) {
  this.name = name;
}

const Person = foo.myBind(obj);
Person('jay');
console.log(obj.name);
// 'jay'

let p2 = new Person('chow');
console.log(obj.name); // 'jay'
console.log(p2.name); // 'chow'

myBind的效果与原生bind的效果一致，new操作符改变了bind的this指向。

MDN上的bind实现，增加了维护原型关系的步骤，但是我并不是太理解这样做的必要性，我理解new的实现就直接将this与fBound的原型链进行了关联，可以通过instanceof判断

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
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() {
          // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
          return fToBind.apply(this instanceof fBound
                 ? this
                 : oThis,
                 // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    // 维护原型关系
    if (this.prototype) {
      // 当执行Function.prototype.bind()时, this为Function.prototype 
      // this.prototype(即Function.prototype.prototype)为undefined
      fNOP.prototype = this.prototype; 
    }
    // 下行的代码使fBound.prototype是fNOP的实例,因此
    // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
    fBound.prototype = new fNOP();

    return fBound;
  };
}

这个疑问先放在这里，看以后有没有机会弄明白，或者哪位大神来指点吧。（2019-09-23）

参考