手写实现call方法和apply方法

最新推荐文章于 2024-04-29 09:43:58 发布

Huang_JunJun

最新推荐文章于 2024-04-29 09:43:58 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： javascript vue.js react.js

本文链接：https://blog.csdn.net/qq_41765147/article/details/124285645

前端学习专栏收录该内容

13 篇文章

订阅专栏

本文解析了JavaScript中call和apply方法的区别，主要在于call接收参数列表，apply接收参数数组。通过实例代码展示了如何手动实现这两个方法，适合开发者了解它们在实际中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过查MDN文档我们可以发现，call和apply只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。
在这里插入图片描述
这里是手动实现代码

function person(a, b, c, d) {
    return {
        name: this.name,
        a: a,
        b: b,
        c: c,
        d: d
    }
}

const egg = {
    name: '小蛋',
}

Function.prototype.newCall = function(obj, ...arguments) {
    // 给默认值window
    const object = obj || window
    object.p = this
    const argumentsList = []
    for (let i = 0; i < arguments.length; i++) {
        argumentsList.push(arguments[i])
    }

    const result = object.p(...argumentsList)
    delete object.p
     
    return result
}

Function.prototype.newApply = function(obj, arr) {
    
    const object = obj || window
    object.p = this
    if(!arr) {
        return obj.p()
    } else {
        const argumentsList = []
        for (let i = 0; i < arr.length; i++) {
            argumentsList.push(arr[i])
        }
    
        const result = object.p(...argumentsList)
        delete object.p
         
        return result
    }
}