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

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

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

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

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

首先實現(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"}

第二步考慮傳參的問題，首先看看原生的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);

可以看出來在bind函數(shù)中能先傳部分參數(shù)，運(yùn)行bind返回的函數(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來調(diào)用bind返回的函數(shù)時，會忽略bind傳入的this
new操作和普通的函數(shù)調(diào)用有哪些區(qū)別？
粗略的來講，例如new F()這樣的調(diào)用，有以下幾個步驟：

新建一個對象，var o = new Object()

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

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

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

開始實現(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操作的話，此時this的__proto__已經(jīng)指向了boundFunc，所以使用instanceof可以檢測出是否在使用new操作

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

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

可以看出來原型鏈丟失了，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;是因為這樣寫的話，修改boundFunc.prototype會影響到原函數(shù)的prototype。

that"all

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