利用 JavaScript 中的 call 实现继承

理解 call 方法与继承原理

call() 方法是 Function.prototype 上的一个方法，它的主要作用是调用一个函数，并指定该函数内部 this 的指向（即执行上下文）。当我们在子类构造函数中调用 父类.call(this) 时，意味着：

• 以子类的实例对象作为 this 执行父类的构造函数。
• 父类中通过 this.xxx = ... 定义的公有属性和方法，会被直接添加到子类的实例对象中。
• 这是实现“类式继承”最简单的方式之一，常用于构造函数模式的继承实现。

准备条件：定义父类与子类

首先，我们需要构建一个简单的父类和一个继承自该父类的子类。注意区分公有成员（通过 this 定义）和私有成员（通过局部变量定义）。

function Father() {
    // 私有变量：仅在构造函数内部可见，通过闭包保留，不会被继承
    var privateVar = "I am private";
    
    // 公有属性与方法：通过 this 绑定到实例，可以被继承
    this.publicName = "Father";
    this.sayHello = function() {
        console.log("Hello from " + this.publicName);
    };
}

第1步：使用 call 实现单继承

在子构造函数中，通过 Father.call(this) 来执行父构造函数。这一步会将父类的所有逻辑在当前子类的实例上下文中运行一次。

function Son() {
    // 关键步骤：将 Father 的 this 指向当前 Son 实例
    Father.call(this);
    
    // Son 特有的属性
    this.sonProp = "son only";
}

验证继承结果

创建一个 Son 实例，检查它是否拥有父类的公有属性和方法：

var sonInstance = new Son();
console.log(sonInstance.publicName); // 输出: "Father"
sonInstance.sayHello();              // 输出: "Hello from Father"
// console.log(sonInstance.privateVar); // undefined，私有变量不可访问

第2步：实现多重继承（链式调用）

如果需要实现类似多重继承的效果，可以在子构造函数中依次调用多个父类的 call 方法。后面调用的父类会覆盖前面同名属性的冲突项。

function ParentB() {
    this.color = "red";
}

function Child() {
    // 先继承 ParentA
    Father.call(this);
    // 再继承 ParentB
    ParentB.call(this);
}

注意事项与局限性

1. 仅能继承公有成员：父类中用 var 或形参定义的私有变量和私有函数，无法被子类直接访问或继承，因为它们不属于 this 对象。
2. 无法复用原型方法：call 继承只复制构造函数内的属性。如果希望共享方法以减少内存消耗，通常还需要配合原型链继承（Prototype Chain）或组合继承模式。
3. 不能传递参数给父类默认值：如果父类构造函数有固定参数，子类需要通过 arguments 或其他机制进行透传。

总结

利用 call 方法改变执行上下文，是 JavaScript 传统构造函数实现继承的核心技巧。虽然现代前端开发更多使用 ES6 Class 语法，但理解这一机制对于处理兼容性问题及深入理解 JS 原型系统依然至关重要。 以上就是利用javascript中的call实现继承的详细内容，更多关于JavaScript继承机制的资料请关注本站其它相关文章！