成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【build your own xxx】實現(xiàn)你自己的call和apply

qpal / 1919人閱讀

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

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

call

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

舉個例子

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

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

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

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

不對obj和Func造成副作用

實現(xiàn)

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

第一個步驟已經(jīng)實現(xiàn)了,但是很明顯的是這樣子會對傳入的othis造成副作用,即給othis對象無緣無故添加了一個方法,所以:

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

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

簡單的說就是可以把字符串解析為JavaScript語句來執(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;
}

其實就是用args把arguments用字符串的方式保存住,然后在eval方法中再把字符串重新解析為語句。

apply

同理來實現(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的模擬實現(xiàn)

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/107898.html

相關(guān)文章

  • build your own xxx實現(xiàn)自己bind函數(shù)

    今天來實現(xiàn)JavaScript的bind函數(shù)。首先看MDN的bind函數(shù)描述: 從上面可以看出來,var A = B.bind(this)函數(shù)其實干了這幾件事情: 返回一個函數(shù),且這個函數(shù)后面運行時的this就是bind(this)傳入的this 接收參數(shù),這些參數(shù)(如果有的話)作為bind()的第二個參數(shù)跟在this(或其他對象)后面,之后它們會被插入到目標函數(shù)的參數(shù)列表的開始位置,傳遞給綁定...

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

qpal

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<