深入理解 JavaScript call() 函数的原理与应用

一颗松果

发布时间：2026-10-15 | 4人浏览过

原创

本文深入解析JavaScript中call()函数的核心机制，重点讲解如何利用它改变函数执行时的this指向，并通过实例展示在方法借用、属性继承及参数传递中的实际应用。

理解 this 的指向规则

在使用 call() 之前，必须首先明确 JavaScript 中 this 关键字的绑定逻辑。this 的值取决于函数被调用的方式，主要遵循以下四种规则：

第1步：全局或默认引用

在非严格模式下，当函数作为普通函数直接调用时，this 指向全局对象（浏览器环境中通常为 window）。

var name = '小红';
function foo() {
    console.log(this.name); // 输出: 小红
}
foo(); // 直接调用，this 指向 window

第2步：对象方法调用

当函数作为对象的方法被调用时，this 指向该对象。

var name = '小红';
var obj = {
    name: '李白',
    foo: function() {
        console.log(this.name); // 输出: 李白
    }
};
obj.foo(); // obj 调用 foo，this 指向 obj

第3步：构造函数调用

使用 new 关键字调用函数创建实例时，this 指向新创建的实例对象。

function Person() {
    this.name = '小白';
    console.log(this.name); // 输出: 小白
}
var fn = new Person(); // this 指向实例 fn

简单总结：this 通常指向“谁”调用当前函数。

call() 函数的核心原理

call() 是 Function.prototype 上的一个方法，允许显式指定函数执行时的 this 上下文。其基本语法为：

fun.call(thisArg[, arg1[, arg2[, ...]]])

其中，第一个参数用于指定 this 的值，后续参数将传递给原函数。

示例：改变 this 指向

假设有一个添加属性的方法和一个包含属性的对象，我们希望通过 call 借用方法：

function addProperty(val) {
    this.test = val;
    console.log(this.test);
}

// 定义目标对象
var target = {};

// 使用 call 借用 addProperty，此时 this 指向 target
addProperty.call(target, 444); 
// 输出: 444
console.log(target.test); // 输出: 444

在此例中，addProperty 内部的 this 被强制指向了 target 对象，从而实现了属性的动态添加。如果没有使用 call，而是直接调用 addProperty(444)，在浏览器环境中 this 会指向 window，导致无法直接在 target 上操作。

通俗记忆法

为了方便理解，可以将其类比为“借用能力”：

场景：马云会赚钱，我也想赚钱。
代码映射：MingYun.makeMoney.call(Me())
解释：我借用了马云赚钱的逻辑，在这个逻辑里，this 指向我（Me），因此赚到的钱归我所有。

常见应用场景

1. 模拟继承

call 最经典的用途是实现原型继承的简化版。父类构造函数中的属性和方法可以被子类共享。

function Parent(name) {
    this.name = name || 'Parent';
    this.colors = ['red', 'blue'];
}

function Child(name) {
    // 关键步骤：调用 Parent 构造函数，并将 this 绑定到 Child 实例
    Parent.call(this, name);
}

var child1 = new Child('Child1');
var child2 = new Child('Child2');

child1.colors.push('green');
console.log(child1.colors); // 输出: ['red', 'blue', 'green']
console.log(child2.colors); // 输出: ['red', 'blue'] (互不影响)

2. 数组方法的借用

许多类数组对象（如 arguments 或 NodeList）没有 push 或 pop 方法，但可以借用数组的方法来操作它们。

function logArgs() {
    // 借用数组的 push 方法向 arguments 添加元素（虽然通常不推荐修改 arguments，但展示了借用原理）
    Array.prototype.push.call(arguments, 'extra');
    console.log(arguments.length); // 长度增加
}