JavaScript 深入之 call 和 apply 的模拟实现

邱勇发布于2019-08-23 14:05 / 532人阅读

摘要：第一版首先要获取调用的函数，用可以获取的指向为，因为是的实例相当于把挂载到上，所以可以取到测试一下但是第一版不可以传递多个参数第二版这里会自动调用这个方法。

// 第一版
Function.prototype.call2 = function(context) {
    // 首先要获取调用call的函数，用this可以获取
    // this的指向为bar，因为bar是Funciton的实例
    context.fn = this;
    context.fn();
    // 相当于把bar挂载到foo上，所以bar可以取到value
    delete context.fn;
}

// 测试一下
var foo = {
    value: 1
};

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

bar.call2(foo); // 1

但是第一版不可以传递多个参数

// 第二版
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 会自动调用 Array.toString() 这个方法。
    //这里eval函数输出的是：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 参数可以传 null，当为 null 的时候，视为指向 window2.函数是可以有返回值的！

// 第三版
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 的实现跟 call 类似，在这里直接给代码，代码来自于知乎 @郑航的实现：

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...

GPU云服务器云服务器 js中的call和apply JS中bind、call和apply的作 apply与call的区别 javascript call

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100066.html

JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
JavaScript深入之call和apply的模拟实现

摘要：深入系列第十篇，通过和的模拟实现，带你揭开和改变的真相一句话介绍方法在使用一个指定的值和若干个指定的参数值的前提下调用某个函数或方法。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 JavaScript深入系列第十篇，通过call和apply的模拟实现，带你揭开call和apply改变this的真相 call 一句话介绍 call： call() 方法在使用一个指定的 this...

miya 2019-08-22 11:03 评论0 收藏0
JavaScript深入之new的模拟实现

摘要：深入系列第十二篇，通过的模拟实现，带大家揭开使用获得构造函数实例的真相一句话介绍运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂，我们在模拟之前，先看看实现了哪些功能。 JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具...

tianlai 2019-08-20 16:17 评论0 收藏0
JavaScript深入系列15篇正式完结！

摘要：写在前面深入系列共计篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺底层知识的系列。深入系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 深入系列共计 15 篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺 JavaScript 底层知识的系列。重点讲解了如原型、作用域、执行上下文、变量对象、this、...

fxp 2019-08-20 16:50 评论0 收藏0
【进阶3-3期】深度解析 call 和 apply 原理、使用场景及实现

摘要：之前文章详细介绍了的使用，不了解的查看进阶期。不同的引擎有不同的限制，核心限制在，有些引擎会抛出异常，有些不抛出异常但丢失多余参数。存储的对象能动态增多和减少，并且可以存储任何值。这边采用方法来实现，拼成一个函数。之前文章详细介绍了 this 的使用，不了解的查看【进阶3-1期】。 call() 和 apply() call() 方法调用一个函数, 其具有一个指定的 this 值和分...

godlong_X 2019-08-23 14:31 评论0 收藏0