JavaScript中bind方法的實(shí)現(xiàn)

dackel 發(fā)布于2019-08-26 13:29 / 962人閱讀

摘要：新函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器，提供的值被忽略。說(shuō)明綁定后的新函數(shù)被實(shí)例化之后，需要繼承原函數(shù)的原型鏈方法，且綁定過(guò)程中提供的被忽略繼承原函數(shù)的對(duì)象，但是參數(shù)還是會(huì)使用。

在討論bind方法前，我們可以先看一個(gè)例子：

var getElementsByTagName = document.getElementsByTagName;
getElementsByTagName("body");

這樣在瀏覽器(這里使用的是chrome)執(zhí)行會(huì)報(bào)錯(cuò)：

原因也顯而易見(jiàn)：上面的getElementsByTagName方法是document.getElementsByTagName的引用，但是在執(zhí)行時(shí)this指向了global或window對(duì)象，而不是document對(duì)象。

解決辦法也很簡(jiǎn)單，使用call或bind方法來(lái)改變this：

var getElementsByTagName = document.getElementsByTagName;
getElementsByTagName.call(document, "body");

或

var getElementsByTagName = document.getElementsByTagName;
getElementsByTagName.bind(document)("body");

上述兩種解決辦法也可以看出call和bind的區(qū)別：call方法是直接執(zhí)行，而bind方法是返回一個(gè)新函數(shù)。

實(shí)現(xiàn)

由于bind方法是從ES5才開(kāi)始引入的，不是所有瀏覽器都支持，為了實(shí)現(xiàn)兼容，需要自己實(shí)現(xiàn)bind方法。

我們先來(lái)看看bind方法的定義：

bind方法會(huì)創(chuàng)建一個(gè)新函數(shù)。當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，bind的第一個(gè)參數(shù)將作為它運(yùn)行時(shí)的this(該參數(shù)不能被重寫(xiě)), 之后的一序列參數(shù)將會(huì)在傳遞的實(shí)參前傳入作為它的參數(shù)。
新函數(shù)也能使用new操作符創(chuàng)建對(duì)象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器，提供的this值被忽略。

初步思路

因?yàn)?b>bind方法不是立即執(zhí)行函數(shù)，需要返回一個(gè)待執(zhí)行的函數(shù)，這里可以利用閉包：return function(){}；

作用域綁定：可以使用apply或call方法來(lái)實(shí)現(xiàn)；

參數(shù)傳遞：由于參數(shù)的不確定性，需要用apply傳遞數(shù)組；

根據(jù)上述思路，我們先來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的customBind方法；

Function.prototype.customBind = function (context) {
    var self = this,
        /**
         * 由于參數(shù)的不確定性，我們用 arguments 來(lái)處理
         * 這里的 arguments 只是一個(gè)類(lèi)數(shù)組對(duì)象，可以用數(shù)組的 slice 方法轉(zhuǎn)化成標(biāo)準(zhǔn)格式數(shù)組
         * 除了作用域?qū)ο?self 以外，后面的所有參數(shù)都需要作為數(shù)組進(jìn)行參數(shù)傳遞
         */
        args = Array.prototype.slice.call(arguments, 1);
    // 返回新函數(shù)
    return function() {
        // 作用域綁定
        return self.apply(context, args);
    }
};

測(cè)試初版

var testFn = function(obj, arg) {
    console.log("作用域?qū)ο髮傩灾担? + this.value);
    console.log("綁定函數(shù)時(shí)參數(shù)對(duì)象屬性值：" + obj.value);
    console.log("調(diào)用新函數(shù)參數(shù)值：" + arg);
}
var testObj = {
    value: 1
};
var newFn = testFn.customBind(testObj, {value: 2});
newFn("hello world");

// 執(zhí)行結(jié)果：
// 作用域?qū)ο髮傩灾担?
// 綁定函數(shù)時(shí)參數(shù)對(duì)象屬性值：2
// 調(diào)用新函數(shù)參數(shù)值：undefined

從測(cè)試執(zhí)行結(jié)果可以看出，上面已經(jīng)實(shí)現(xiàn)了作用域綁定，但是返回新函數(shù)newFn不支持傳參，只能在testFn綁定時(shí)傳參。
因?yàn)槲覀冏罱K需要使用的是newFn，所以我們需要讓newFn支持傳參。

動(dòng)態(tài)參數(shù)

我們來(lái)繼續(xù)改造

Function.prototype.customBind = function (context) {
    var fn = this,
        args = Array.prototype.slice.call(arguments, 1);
    return function() {
        // 將新函數(shù)執(zhí)行時(shí)的參數(shù) arguments 全部數(shù)組化，然后與綁定時(shí)傳參 arg 合并
        var newArgs = Array.prototype.slice.call(arguments);
        return fn.apply(context, args.concat(newArgs));
    }
};

測(cè)試動(dòng)態(tài)參數(shù)

var testFn = function(obj, arg) {
    console.log("作用域?qū)ο髮傩灾担? + this.value);
    console.log("綁定函數(shù)時(shí)參數(shù)對(duì)象屬性值：" + obj.value);
    console.log("調(diào)用新函數(shù)參數(shù)值：" + arg);
}
var testObj = {
    value: 1
};
var newFn = testFn.customBind(testObj, {value: 2});
newFn("hello world");

// 執(zhí)行結(jié)果：
// 作用域?qū)ο髮傩灾担?
// 綁定函數(shù)時(shí)參數(shù)對(duì)象屬性值：2
// 調(diào)用新函數(shù)參數(shù)值：hello world

可以看出，綁定時(shí)傳的參數(shù)和新函數(shù)執(zhí)行時(shí)傳的參數(shù)是合并在一起形成完整參數(shù)的。

原型鏈

我們?cè)倩氐?b>bind方法的定義第二條：新函數(shù)也能使用new操作符創(chuàng)建對(duì)象。
說(shuō)明綁定后的新函數(shù)被new實(shí)例化之后，需要繼承原函數(shù)的原型鏈方法，且綁定過(guò)程中提供的this被忽略（繼承原函數(shù)的this對(duì)象），但是參數(shù)還是會(huì)使用。所以我們需要一個(gè)中轉(zhuǎn)的函數(shù)將原型鏈傳遞下去。

首先我們需要明確new實(shí)例化過(guò)程，比如說(shuō)var a = new b()：

創(chuàng)建一個(gè)空對(duì)象a = {}，并且this變量引用指向到這個(gè)空對(duì)象a；

繼承被實(shí)例化函數(shù)的原型：a.__proto__ = b.prototype；

被實(shí)例化方法b的this對(duì)象的屬性和方法將被加入到這個(gè)新的this引用的對(duì)象中：b的屬性和方法被加入的a里面；

新創(chuàng)建的對(duì)象由this所引用：b.call(a)；

接下來(lái)我們實(shí)現(xiàn)原型鏈。

Function.prototype.customBind = function (context) {
    var self = this,
        args = Array.prototype.slice.call(arguments, 1);
    // 創(chuàng)建中轉(zhuǎn)函數(shù)
    var cacheFn = function() {};
    var newFn =  function() {
        var newArgs = Array.prototype.slice.call(arguments);
        /**
         * 這里的 this 是指調(diào)用時(shí)的執(zhí)行上下文
         * 如果是 new 操作，需要綁定 new 之后作用域，this 指向新的實(shí)例對(duì)象
         */
        return self.apply(this instanceof cacheFn ? this : context, args.concat(newArgs));
    };

    // 中轉(zhuǎn)原型鏈
    cacheFn.prototype = self.prototype;
    newFn.prototype = new cacheFn();

    return newFn;
};

測(cè)試原型鏈

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function() {
  return this.x + "," + this.y;
};

var YAxisPoint = Point.customBind({}, 0);
var axisPoint = new YAxisPoint(5);
axisPoint.toString();   // "0,5"

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new Point(1, 2) instanceof YAxisPoint; // true