摘要：新開一個(gè)坑，起名為，自己造一些小輪子。之前貌似在知乎上看到一個(gè)問題是說(shuō)如何使用實(shí)現(xiàn)它原生的和方法，今天我來(lái)實(shí)現(xiàn)一番。但是，這樣等于說(shuō)只給傳了一個(gè)數(shù)組參數(shù)，并不能達(dá)到目的。同理來(lái)實(shí)現(xiàn)參考資料深入之和的模擬實(shí)現(xiàn)

新開一個(gè)坑，起名為【build your xxx】，自己造一些小輪子。
工作中不要重復(fù)造輪子，但是以學(xué)習(xí)的目的去造輪子卻意義重大。
之前貌似在知乎上看到一個(gè)問題是說(shuō)如何使用JavaScript實(shí)現(xiàn)它原生的call和apply方法，今天我來(lái)實(shí)現(xiàn)一番。

首先看看call是干什么的，從MDN上扒一張圖：

舉個(gè)例子

function showName(gender, age){
    console.log(this.name, " ", gender, " ", age)
}
var obj = {
    name: "亞古"
}
showName.call(obj, "female", 22)// 亞古   female   22

梳理思路
可以看出來(lái)Func.call(obj, arg1, arg2...)實(shí)現(xiàn)了這么幾件事：

以obj.Func的方式調(diào)用

把參數(shù)arg1, arg2 ...傳遞給Func

不對(duì)obj和Func造成副作用

實(shí)現(xiàn)

Function.prototype.Zcall = function (othis) {
    othis.fn = this;
    othis.fn();
}
showName.Zcall(obj) // 亞古   undefined   undefined

第一個(gè)步驟已經(jīng)實(shí)現(xiàn)了，但是很明顯的是這樣子會(huì)對(duì)傳入的othis造成副作用，即給othis對(duì)象無(wú)緣無(wú)故添加了一個(gè)方法，所以：

Function.prototype.Zcall = function (othis) {
    othis.fn = this;
    othis.fn();
    delete othis.fn;
}

副作用已經(jīng)消除了，接下來(lái)就是參數(shù)的問題，這里有個(gè)問題是參數(shù)個(gè)數(shù)是不定的，貌似可以使用一個(gè)數(shù)組來(lái)arr保存住arguments里面的參數(shù)，然后再執(zhí)行othis.fn(arr)。但是，這樣等于說(shuō)只給fn傳了一個(gè)數(shù)組參數(shù)，并不能達(dá)到目的。此時(shí)問題轉(zhuǎn)化為我們?nèi)绾螌?shí)現(xiàn)像 othis.fn(arguments[0], arguments[1], arguments[2] ...) 這樣的語(yǔ)句呢？
此時(shí)可以想起一個(gè)不怎么常用的方法eval

簡(jiǎn)單的說(shuō)就是可以把字符串解析為JavaScript語(yǔ)句來(lái)執(zhí)行。
借助eval，改寫Zcall方法：

Function.prototype.Zcall = function (othis) {
    othis.fn = this;
    let args = [];
    for(let i = 1, len = arguments.length;i < len;i++) {
        args.push("arguments[" + i + "]");
    }

    // othis.fn();
    eval("othis.fn(" + args + ")");
    delete othis.fn;
}

其實(shí)就是用args把a(bǔ)rguments用字符串的方式保存住，然后在eval方法中再把字符串重新解析為語(yǔ)句。

同理來(lái)實(shí)現(xiàn)apply：

Function.prototype.Zapply = function (othis) {
    othis.fn = this;
    let argsArr = arguments[1];
    if (!arguments[1]) {
        let args = [];
        for(let i = 0, len = arguments[1].length;i < len;i++) {
            args.push("arguments[1][" + i + "]");
        }

        eval("othis.fn(" + args + ")");
    }else{
        othis.fn();
    }
    
    delete othis.fn;
}

參考資料：
MDN-eval
MDN-apply
JavaScript深入之call和apply的模擬實(shí)現(xiàn)