JavaScript 深入之 call 和 apply 的模擬實(shí)現(xiàn)

邱勇發(fā)布于2019-08-23 14:05 / 579人閱讀

摘要：第一版首先要獲取調(diào)用的函數(shù)，用可以獲取的指向?yàn)?，因?yàn)槭堑膶?shí)例相當(dāng)于把掛載到上，所以可以取到測試一下但是第一版不可以傳遞多個(gè)參數(shù)第二版這里會(huì)自動(dòng)調(diào)用這個(gè)方法。

// 第一版
Function.prototype.call2 = function(context) {
    // 首先要獲取調(diào)用call的函數(shù)，用this可以獲取
    // this的指向?yàn)閎ar，因?yàn)閎ar是Funciton的實(shí)例
    context.fn = this;
    context.fn();
    // 相當(dāng)于把bar掛載到foo上，所以bar可以取到value
    delete context.fn;
}

// 測試一下
var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call2(foo); // 1

但是第一版不可以傳遞多個(gè)參數(shù)

// 第二版
Function.prototype.call2 = function(context) {
    context.fn = this;
    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push("arguments[" + i + "]");
    }
    eval("context.fn(" + args +")");
    //這里 args 會(huì)自動(dòng)調(diào)用 Array.toString() 這個(gè)方法。
    //這里eval函數(shù)輸出的是：context.fn(arguments[1],arguments[2])
    delete context.fn;
}

// 測試一下
var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}

bar.call2(foo, "kevin", 18);
// kevin
// 18
// 1

第二版的問題是，1.this 參數(shù)可以傳 null，當(dāng)為 null 的時(shí)候，視為指向 window2.函數(shù)是可以有返回值的！

// 第三版
Function.prototype.call2 = function (context) {
    var context = context || window;
    context.fn = this;

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

    var result = eval("context.fn(" + args +")");
    delete context.fn
    return result;
}

// 測試一下
var value = 2;

var obj = {
    value: 1
}

function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name: name,
        age: age
    }
}

bar.call2(null); // 2

console.log(bar.call2(obj, "kevin", 18));
// 1
// Object {
//    value: 1,
//    name: "kevin",
//    age: 18
// }

es6 版

Function.prototype.call2 = function (context, ...args) {
    context = context || window
    context.__fn__ = this
    let result = context.__fn__(...args)
    delete context.__fn__
    return result
}

apply 的實(shí)現(xiàn)跟 call 類似，在這里直接給代碼，代碼來自于知乎 @鄭航的實(shí)現(xiàn)：

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;

    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push("arr[" + i + "]");
        }
        result = eval("context.fn(" + args + ")")
    }

    delete context.fn
    return result;
}

文章參考來源：https://github.com/mqyqingfen...