apply 和 call的模拟实现

最新推荐文章于 2025-02-10 17:01:24 发布

weixin_34112900

最新推荐文章于 2025-02-10 17:01:24 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d073d1f51882548ac439c60

该博客主要围绕apply和call的模拟实现展开，虽内容仅给出转载链接，但可推测重点在于介绍如何模拟实现这两个方法，这在JavaScript编程中是重要的技术点，能帮助开发者更好地理解函数调用机制。

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

// call的作用，改变this的指向
function add(c, d) {
    return this.a + this.b + c + d
}
const obj = {
    a: 1,
    b: 2
}
console.log(add.call(obj, 3, 4))

// 原本add的this指向window 但是现在指向了obj这个对象

const obj2 = {
    a: 1,
    b: 2,
    add2: function (c, d) {
        return this.a + this.b + c + d
    }
}

obj2.add2(3, 4)

// 这段代码和上面得到的结果是一样的

// call主要是改变了this的指向，所以通过上面代码的比较 我们可以三部分
// 1.obj中添加add2这个属性 2.执行add2  3.删掉add2（不能改变原对象的属性）


Function.prototype.callMock = function (context) {
    // 防止context为null
    var content = context || window
    // this调用对象 function add
    content.fn = this
    var args = []
    for (var i = 1, len = arguments.length ; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('content.fn('+args+')');
    delete content.fn;
    return result;
}
add.callMock(obj, 3, 4)

// apply的作用，改变this的指向
function add(c, d) {
    return this.a + this.b + c + d
}
const obj = {
    a: 1,
    b: 2
}
console.log(add.apply(obj, [3, 4]))
Function.prototype.myApply = 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;
}
console.log(add.myApply(obj))
复制代码