今天來(lái)實(shí)現(xiàn)JavaScript的bind函數(shù)。
首先看MDN的bind函數(shù)描述：

從上面可以看出來(lái)，var A = B.bind(this)函數(shù)其實(shí)干了這幾件事情：

返回一個(gè)函數(shù)，且這個(gè)函數(shù)后面運(yùn)行時(shí)的this就是bind(this)傳入的this

接收參數(shù)，這些參數(shù)（如果有的話）作為bind()的第二個(gè)參數(shù)跟在this（或其他對(duì)象）后面，之后它們會(huì)被插入到目標(biāo)函數(shù)的參數(shù)列表的開(kāi)始位置，傳遞給綁定函數(shù)的參數(shù)會(huì)跟在它們的后面

使用new操作bind函數(shù)返回的函數(shù)時(shí)，之前傳入的this會(huì)被忽略，也就是說(shuō)new的優(yōu)先級(jí)高于bind

首先實(shí)現(xiàn)第一步：

Function.prototype.Zbind = function (othis) {
    var originFunc = this;
    return function () {
        originFunc.apply(othis);
    }
}


var obj = {

}

function createAgumon() {
    this.name = "agumon";
}
var createAgumonBind = createAgumon.Zbind(obj);
createAgumonBind();   
obj;// {name: "agumon"}

第二步考慮傳參的問(wèn)題，首先看看原生的bind函數(shù)是如何傳參的：

var obj = {

}
function createAgumon(gender, age) {
    this.name = "agumon";
    this.gender = gender;
    this.age = age;
}
var createAgumonBind = createAgumon.bind(obj, "female");
createAgumonBind(22);

可以看出來(lái)在bind函數(shù)中能先傳部分參數(shù)，運(yùn)行bind返回的函數(shù)時(shí)可以再傳入部分參數(shù)。
自己實(shí)現(xiàn)：

Function.prototype.Zbind = function (othis) {
    var originFunc = this;
    var partArgs = [].slice.call(arguments, 1);
    var func = function() {};
    var boundFunc = function () {
        var finalArgs = partArgs.concat([].slice.call(arguments));
        return originFunc.apply(othis, finalArgs);
    }

    return boundFunc;
}


var obj = {

}

function createAgumon(gender, age) {
    this.name = "agumon";
    this.gender = gender;
    this.age = age;
}

var createAgumonBind = createAgumon.Zbind(obj, "female");
createAgumonBind(22);
obj;// {name: "agumon", gender: "female", age: 22}

使用new來(lái)調(diào)用bind返回的函數(shù)時(shí)，會(huì)忽略bind傳入的this
new操作和普通的函數(shù)調(diào)用有哪些區(qū)別？
粗略的來(lái)講，例如new F()這樣的調(diào)用，有以下幾個(gè)步驟：

新建一個(gè)對(duì)象，var o = new Object()

設(shè)置原型鏈，o.__proto__ = F.prototype

把F函數(shù)體內(nèi)的this綁定為o，并且執(zhí)行F函數(shù)的代碼

判斷F的返回類型：
如果是值類型，則返回o
如果是引用類型，則返回該引用類型對(duì)象

開(kāi)始實(shí)現(xiàn)：

Function.prototype.Zbind = function (othis) {
    var originFunc = this;
    var partArgs = [].slice.call(arguments, 1);
    var func = function() {};
    var boundFunc = function () {
        var finalArgs = partArgs.concat([].slice.call(arguments));
        return originFunc.apply(this instanceof boundFunc ? this : othis, finalArgs);
    }


    return boundFunc;
}


var obj = {}

function createAgumon(gender, age) {
        this.name = "agumon";
        this.gender = gender;
        this.age = age;
}

var createAgumonBind = createAgumon.Zbind(obj, "female");
var newObj = new createAgumonBind(22);
obj // {}
newObj // {name: "agumon", gender: "female", age: 22}

關(guān)鍵的地方在于這里：this instanceof boundFunc ? this : othis，如果是new操作的話，此時(shí)this的__proto__已經(jīng)指向了boundFunc，所以使用instanceof可以檢測(cè)出是否在使用new操作

原型丟失
剛剛實(shí)現(xiàn)的Zbind方法有個(gè)小問(wèn)題：

Function.prototype.Zbind = function (othis) {
            var originFunc = this;
            var partArgs = [].slice.call(arguments, 1);
            var func = function() {};
            var boundFunc = function () {
                var finalArgs = partArgs.concat([].slice.call(arguments));
                return originFunc.apply(this instanceof boundFunc ? this : othis, finalArgs);
            }


            return boundFunc;
        }


        var obj = {

        }

        function createAgumon(gender, age) {
            this.name = "agumon";
            this.gender = gender;
            this.age = age;
        }
        createAgumon.prototype.college = "THU"
        var createAgumonBind = createAgumon.Zbind(obj, "female");
        var newObj = new createAgumonBind(22);
        console.log(newObj.college)// undefined

可以看出來(lái)原型鏈丟失了，newObj.college得是"THU"才行

修改：

Function.prototype.Zbind = function (othis) {
            var originFunc = this;
            var partArgs = [].slice.call(arguments, 1);
            var func = function() {};
            var boundFunc = function () {
                var finalArgs = partArgs.concat([].slice.call(arguments));
                return originFunc.apply(this instanceof boundFunc ? this : othis, finalArgs);
            }

            func.prototype = originFunc.prototype;
            boundFunc.prototype = new func();

            return boundFunc;
        }


        var obj = {

        }

        function createAgumon(gender, age) {
            this.name = "agumon";
            this.gender = gender;
            this.age = age;
        }
        createAgumon.prototype.college = "THU"
        var createAgumonBind = createAgumon.Zbind(obj, "female");
        var newObj = new createAgumonBind(22);
        console.log(newObj.college)// "THU"

為什么要使用func.prototype = originFunc.prototype;boundFunc.prototype = new func();，而不是直接用boundFunc.prototype = originFunc.prototype;是因?yàn)檫@樣寫的話，修改boundFunc.prototype會(huì)影響到原函數(shù)的prototype。

that"all

參考資料：
mdn-bind
javascript中，new操作符的工作原理是什么?