使用js模拟实现bind

关于bind，先看一下MDN的解释呢

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

总结一下： 1.bind创建了一个新函数； 2.这个新函数的this会指向bind的第一个参数； 3.其余参数是新函数的参数。

我们先来试用一下bind吧

var foo = {
    value: '你好'
}
function bar() {
    console.log(this.value);
}

// 返回了一个函数
var bindFoo = bar.bind(foo); 

bindFoo(); // 你好

随便模拟一下，简单一点的

// 第一版
Function.prototype.bind2 = function (context) {
    var self = this;
    //返回一个函数，目前就先认为它只传入一个参数吧
    return function () {
        self.apply(context);
    }

}
var foo = {
    value: '你好'
}
function bar() {
    console.log(this.value);
}

// 返回了一个函数
var bindFoo = bar.bind2(foo); 

bindFoo(); // 你好

返回一个函数，并且将该函数的this指向第一个传入的参数。没错，成功。那开始处理传入参数的问题吧 其实要处理传参问题并不复杂，apply和call怎么处理的我们就怎么处理呗，但是，bind有个问题是绑定的时候和使用的时候都是可以传参的，比如：

var foo = {
    value: 1
};
function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);
}
var bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

想到处理方法了，使用arguments获得两次传入的参数，然后再将它们拼接起来就好了呀

// 第二版
Function.prototype.bind2 = function (context) {

    var self = this;
    // 获取bind2函数从第二个参数到最后一个参数
    var args = [].slice.call(arguments, 1);

    return function () {
        // 这个时候的arguments是指bind返回的函数传入的参数
        var bindArgs = [].slice.call(arguments);
        self.apply(context, args.concat(bindArgs));
    }

}
var foo = {
    value: 1
};
function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);
}
var bindFoo = bar.bind2(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

好的，完成传参的问题了。 但是bind还有一个问题需要解决，如果使用bind生成的函数被当做了构造函数怎么办呢？我们知道new的话this是指向生成对象的，bind中this是指向生成的函数的，先来看看会有什么效果吧

var bindFoo = bar.bind2(foo, 'daisy');
var obj = new bindFoo('18')
//1
//daisy
//18
var bindFoo1 = bar.bind(foo, 'azhu');
var obj1 = new bindFoo('16')
//undefined
//azhu
//16

由以上的代码我们可以发现，new完之后生成的obj，this指向还是没有变化的，指向的是foo，而obj1指向的是自己，所以value是undefined。

那么，我们就要在返回的函数里面，再做一次this指向的修改，并且改一下原型链。

// 第三版
Function.prototype.bind2 = function (context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fbound = function () {

        var bindArgs = Array.prototype.slice.call(arguments);
        // 当作为构造函数时，this 指向实例，self 指向绑定函数，因为下面一句 `fbound.prototype = this.prototype;`，已经修改了 fbound.prototype 为 绑定函数的 prototype，此时结果为 true，当结果为 true 的时候，this 指向实例。
        // 当作为普通函数时，this 指向 window，self 指向绑定函数，此时结果为 false，当结果为 false 的时候，this 指向绑定的 context。
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
    fbound.prototype = this.prototype;
    return fbound;
}

优化一下

// 第四版
Function.prototype.bind2 = function (context) {

    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fNOP = function () {};

    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    fNOP.prototype = this.prototype;
    fbound.prototype = new fNOP();
    return fbound;

}

然后再优化几个小问题： 1.关于 context 是否存在的判断 2.调用 bind 的不是函数怎么办 3.线上使用 so

Function.prototype.bind2 = function (context) {

    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var fNOP = function () {};

    var fbound = function () {
        self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)));
    }

    fNOP.prototype = this.prototype;
    fbound.prototype = new fNOP();

    return fbound;

}

参考

# JavaScript深入之bind的模拟实现