我要懂系列1-call和apply

Stardustsky 發(fā)布于2019-08-21 17:28 / 3138人閱讀

摘要：和相同點(diǎn)改變指向可以傳參立即調(diào)用區(qū)別接收一個(gè)數(shù)組參數(shù)，直接接收參數(shù)的性能會(huì)比差，因?yàn)橐獙?duì)數(shù)組參數(shù)進(jìn)行判斷和解構(gòu)模擬實(shí)現(xiàn)傳遞的如果是或者，那么就是，否則傳遞進(jìn)來的就是要指向的從第二個(gè)參數(shù)開始就是要調(diào)用時(shí)用到參數(shù)的第二個(gè)參數(shù)為數(shù)組，數(shù)組中的元素

call和apply

fn.call(isThis, arg1, arg2, ....)

fn.apply(isThis, [arg1, arg2, ....])

相同點(diǎn)：

改變 this 指向

可以傳參

立即調(diào)用

區(qū)別：

apply 接收一個(gè)數(shù)組參數(shù)，call 直接接收參數(shù)

apply 的性能會(huì)比call差，因?yàn)橐獙?duì)數(shù)組參數(shù)進(jìn)行判斷和解構(gòu)

模擬實(shí)現(xiàn)：

Function.prototype.callLike = function (isThis) {
    //...
}

Function.prototype.applyLike = function (isThis) {
    //...
}

傳遞的 isThis 如果是 undefined 或者 null，那么 this 就是 window，否則傳遞進(jìn)來的就是要指向的this

call 從第二個(gè)參數(shù)開始就是要調(diào)用時(shí)用到參數(shù)

apply 的第二個(gè)參數(shù)為數(shù)組，數(shù)組中的元素就是調(diào)用時(shí)用到參數(shù)

第一個(gè)條件很簡(jiǎn)單，判斷下 isThis 的類型即可

isThis = typeof isThis === "undefined" || isNull(isThis) ? window : isThis;


function isNull (value) {
    return typeof value === "object" && !value === true
}

第二個(gè)條件和第三個(gè)條件是一樣的，call 的參數(shù)我們需要處理下，因?yàn)槲覀冾A(yù)期不到它的參數(shù)個(gè)數(shù)

我們從第二個(gè)參數(shù)開始遍歷一遍 arguments，然后放到一個(gè)數(shù)組里面去

var args = [];
for (var i = 1, l = arguments.length; i< l; i++) {
    args.push(arguments[i]);
}

但是最關(guān)鍵的調(diào)用怎么辦呢，怎么改變 this 的指向，一般來說誰調(diào)用誰就是 this，我們要想改變 this，那么就要用傳遞進(jìn)來的 isThis 來調(diào)用

isThis.fn = this;
isThis.fn();
delete isThis.fn;

這樣的話就改變了 this 的指向，之后再 delete 掉，就 ok 了，但是這里會(huì)有一個(gè)問題，如果傳遞進(jìn)來的是值類型呢，值類型我們是不能給它添加屬性和方法的，所以 isThis.fn() 肯定會(huì)提示 isThis.fn is not a function，這里我們可以想一想值類型也是可以像對(duì)象一樣有屬性和方法的，并且可以添加屬性和方法，但是為什么賦值完后就找不到呢

這里要說下包裝類型了，值類型按理說是不可能有自己的屬性和方法的，但是考慮到有時(shí)候需要處理下雜七雜八的瑣事，所以當(dāng)我們?cè)L問或者賦值的時(shí)候，它會(huì)臨時(shí)給我們創(chuàng)建一個(gè)對(duì)應(yīng)的包裝對(duì)象，在我們?cè)L問或者賦值結(jié)束后那么這個(gè)包裝對(duì)象就會(huì)被清理掉，那么我們就可以這樣做，來模擬下包裝對(duì)象

var valueType = typeof isThis;
if (valueType === "string") {
    isThis = new String(isThis)
}else if (valueType === "number") {
    isThis = new Number(isThis)
}else if (valueType === "boolean") {
    isThis = new Boolean(isThis)
}else if (valueType === "symbol") {
    isThis = Object(isThis)
}

恩，這樣一來就差不多了，接下來看看傳參，args 的元素才是我們想要的參數(shù)，所以怎么拆開

var result = eval("isThis.fn(" + args.join() + ")");

使用 eval，得益于 eval 強(qiáng)大的能力，我們可以把字符串當(dāng)做 js 代碼來執(zhí)行，并且可以得到返回值，完美

但是這里會(huì)有一個(gè)問題，如果參數(shù)是個(gè)對(duì)象，那么 eval 對(duì)參數(shù) toString 后我們我們就得不到想要的參數(shù)了，所以這里改造下，因?yàn)?eval 可以動(dòng)態(tài)的改變作用域

var args = [];
for (var i = 1, l = arguments.length; i< l; i++) {
    args.push("arguments[" + i  + "]");
}
var result = eval("isThis.fn(" + args.join() + ")");

這里我們用 args 存放著 arguments[1] arguments[1]... 這樣的字符串，那么 eval 執(zhí)行的時(shí)候會(huì)在上下文查找并綁定所需要的變量，這樣就可以實(shí)現(xiàn)參數(shù)傳遞了

完整代碼：

Function.prototype.callLike = function (isThis) {
    isThis = typeof isThis === "undefined" || isNull(isThis) ? window : isThis;

    var valueType = typeof isThis;
    if (valueType === "string") {
        isThis = new String(isThis)
    }else if (valueType === "number") {
        isThis = new Number(isThis)
    }else if (valueType === "boolean") {
        isThis = new Boolean(isThis)
    }else if (valueType === "symbol") {
        isThis = Object(isThis)
    }
    
    isThis.fn = this;

    var args = [];
    for (var i = 1, l = arguments.length; i< l; i++) {
        args.push("arguments[" + i  + "]");
    }

    var result = eval("isThis.fn(" + args.join() + ")");
    delete isThis.fn;

    function isNull (value) {
        return typeof value === "object" && !value === true
    }

    return result;
}

Function.prototype.applyLike = function (isThis, args) {
    isThis = typeof isThis === "undefined" || isNull(isThis) ? window : isThis;

    var valueType = typeof isThis;
    if (valueType === "string") {
        isThis = new String(isThis)
    }else if (valueType === "number") {
        isThis = new Number(isThis)
    }else if (valueType === "boolean") {
        isThis = new Boolean(isThis)
    }else if (valueType === "symbol") {
        isThis = Object(isThis)
    }
    
    isThis.fn = this;

    var args = [];
    for (var i = 1, l = arguments.length; i< l; i++) {
        args.push("arguments[" + i  + "]");
    }
    
    var result = eval("isThis.fn(" + args.join() + ")");
    delete isThis.fn;

    function isNull (value) {
        return typeof value === "object" && !value === true
    }

    return result;
}