JavaScript温故而知新——bind()方法的实现

bind()方法和apply()、call()类似，均可以用来改变某个函数运行时this的指向。

而且一样接受的第一个参数做为它运行时的this，以后的参数都会传入做为它的参数。

可是bind()还有一个最大的特色就是它会建立一个新的函数，以便于咱们稍后做调用，这也是它区别于apply()和call()的地方。

先来看下bind的使用

var foo = {
    value: 1
};
function bar() {
    return this.value;
}
var bindFoo = bar.bind(foo);
console.log(bindFoo());     // 1
复制代码

模拟实现一

Function.prototype.bind2 = function(context) {
    // 将this做保存,表明被绑定的函数
    var self = this;
    return function() {
        // 绑定函数可能会有返回值，因此这里要return一下
        return self.apply(context);
    }
}
复制代码

bind的传参：须要注意咱们在bind的时候能够进行传参，而且在执行bind返回的函数的时候依然能够传参。以下例子：

var foo = {
    value: 1
};
function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);

}
var bindFoo = bar.bind(foo, 'xiao');
bindFoo('18');
// 1
// xiao
// 18
复制代码

传参效果的实现

Function.prototype.bind2 = function (context) {

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

    return function () {
        // 这里的arguments是指bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(context, args.concat(bindArgs));
    }
}
复制代码

bind还有一个特色：就是 bind 返回的函数能够被做为构造函数来使用，此时 bind 指定的this值会失效，但传入的参数依然生效。以下例子：

var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}

bar.prototype.friend = 'kevin';

var bindFoo = bar.bind(foo, 'daisy');

var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin
复制代码

能够看到因为这里使用了new操做符，this已经指向了obj，所以this.value打印出来为undefined。

构造函数效果的实现

为了让this指向new出来的对象，咱们能够经过修改返回的函数的原型来实现

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 指向 new 建立的实例，可让实例得到来自绑定函数的值
        // 看成为普通函数时，将绑定函数的 this 指向 context
        return self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就能够继承绑定函数的原型中的值
    fBound.prototype = this.prototype;
    return fBound;
}
复制代码

不过上面的写法还存在点问题，fBound.prototype = this.prototype这一句代码直接修改了 fBound.prototype，也会直接修改绑定函数的 prototype。以下例子：

function bar() {}

var bindFoo = bar.bind2(null);

// 修改 bindFoo 的值
bindFoo.prototype.value = 1;

// 致使 bar.prototype 的值也被修改了
console.log(bar.prototype.value)    // 1
复制代码

所以能够经过一个空函数做一个中转，避免绑定函数的 prototype 的属性被修改：

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);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }
    
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}
复制代码

当调用bind的不是函数还得作一下错误处理，完整实现以下：

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 () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}
复制代码

结尾

对于这篇文章理解起来有难度的话，建议先回顾一下原型，做用域和闭包相关的知识，能够看看我以前的文章，这些知识点都是相互关联的。连接在下方：

系列文章：

• JavaScript温故而知新——原型和原型链
• JavaScript温故而知新——执行环境和做用域
• JavaScript温故而知新——做用域链和闭包
• JavaScript温故而知新——函数的4种调用方式
• JavaScript温故而知新——call()和apply()的实现