当前位置：首页 > JavaScript

js 实现call

2026-02-01 22:19:31JavaScript

JavaScript 实现 call 方法

在 JavaScript 中，call 方法是函数原型上的一个方法，用于显式绑定函数的 this 值，并立即执行该函数。以下是手动实现 call 方法的核心思路和代码示例。

核心实现原理

将函数作为上下文对象的一个属性调用，这样函数内的 this 自然指向该上下文。
通过参数解构传递调用时的参数。
调用完成后删除临时添加的属性，避免污染上下文对象。

代码实现

Function.prototype.myCall = function(context, ...args) {
    // 如果 context 为 null 或 undefined，默认指向全局对象（浏览器中为 window）
    context = context || window;

    // 将当前函数（this）作为 context 的一个属性
    context.fn = this;

    // 调用函数并传入参数
    const result = context.fn(...args);

    // 删除临时添加的属性
    delete context.fn;

    // 返回函数执行结果
    return result;
};

使用示例

function greet(message) {
    console.log(`${message}, ${this.name}!`);
}

const person = { name: 'Alice' };

// 原生 call 方法
greet.call(person, 'Hello'); // 输出: Hello, Alice!

// 自定义 myCall 方法
greet.myCall(person, 'Hi'); // 输出: Hi, Alice!

边界情况处理

原始值绑定：如果 context 是原始值（如数字、字符串），JavaScript 的 call 会自动将其转换为对象。可以通过 Object(context) 实现：
```
context = context ? Object(context) : window;
```
函数无返回值：如果函数没有返回值，result 会是 undefined，不影响逻辑。

完整代码（含边界处理）

Function.prototype.myCall = function(context, ...args) {
    context = context ? Object(context) : window;
    context.fn = this;
    const result = context.fn(...args);
    delete context.fn;
    return result;
};

通过以上实现，可以模拟原生 call 方法的功能，理解其底层逻辑。