JavaScript 原型继承与函数调用机制详解

在 JavaScript 的面向对象编程体系中，原型继承 （Prototype Inheritance）是其核心机制之一。不同于传统语言如 Java 或 C++ 使用的类继承模型，JavaScript 通过原型链实现对象之间的属性和方法共享。本文将围绕原型继承、call 与 apply 方法的作用、构造函数继承、中介空对象模式等关键概念展开深入解析，并结合实际代码示例帮助读者理解这一灵活而强大的继承机制。

一、函数调用中的 this 指向：call 与 apply

在 JavaScript 中，函数是第一类对象，这意味着函数可以作为参数传递、赋值给变量，也可以拥有自己的属性和方法。其中，call 和 apply 是所有函数都具备的两个内置方法，用于显式指定函数执行时的 this 上下文。

1.1 call 与 apply 的基本用法

fn.call(thisArg, arg1, arg2, ...) ：第一个参数为 this 的绑定对象，其余参数逐个传入。
fn.apply(thisArg, [arg1, arg2, ...]) ：第一个参数同样为 this 的绑定对象，但后续参数以数组形式传入。

两者的核心区别仅在于参数传递方式 ，功能完全一致：立即执行函数并绑定指定的 this。

javascript 复制代码

javascript
编辑
function greet(greeting) {
  console.log(`${greeting}, I'm ${this.name}`);
}

const person = { name: 'Alice' };
greet.call(person, 'Hello');   // Hello, I'm Alice
greet.apply(person, ['Hi']);   // Hi, I'm Alice

1.2 在构造函数继承中的应用

在模拟"类继承"时，子类构造函数常需调用父类构造函数以初始化实例属性。此时，call 或 apply 被用来将父类构造函数的 this 绑定到子类实例上：

ini 复制代码

javascript
编辑
function Animal(name, age) {
  this.name = name;
  this.age = age;
}

function Cat(color, name, age) {
  // 将 Animal 的 this 指向当前 Cat 实例
  Animal.apply(this, [name, age]); // 或 Animal.call(this, name, age);
  this.color = color;
}

这样，Cat 实例不仅拥有自己的 color 属性，还通过父类构造函数获得了 name 和 age。

二、原型继承：共享方法的关键

仅仅通过构造函数继承属性是不够的------方法若定义在构造函数内部，会导致每个实例都拥有独立副本，浪费内存。因此，方法应定义在原型（prototype）上，通过原型链实现共享。

2.1 直接赋值原型的问题

一种看似简单的继承方式是：

ini 复制代码

javascript
编辑
Cat.prototype = Animal.prototype;

但这会导致父子类共享同一个原型对象 。一旦修改 Cat.prototype（如添加新方法），Animal.prototype 也会被污染：

javascript 复制代码

javascript
编辑
Cat.prototype.meow = function() { console.log('Meow!'); };
// 此时 Animal.prototype 也拥有了 meow 方法！

这显然违背了封装原则。

2.2 使用空对象作为中介（寄生组合式继承）

为解决上述问题，业界普遍采用"中介空对象"模式（也称寄生组合式继承）：

javascript 复制代码

javascript
编辑
function extend(Parent, Child) {
  var F = function() {};          // 创建空构造函数
  F.prototype = Parent.prototype; // 将其原型指向父类原型
  Child.prototype = new F();      // 子类原型 = 空函数实例
  Child.prototype.constructor = Child; // 修正 constructor 指向
}

为什么有效？

F 是一个空函数，其实例 new F() 几乎不携带额外属性。
new F() 的 __proto__ 指向 Parent.prototype，形成原型链。
修改 Child.prototype 不会影响 Parent.prototype，因为它们是不同的对象。

最终原型链结构如下：

javascript 复制代码

text
编辑
cat.__proto__ → new F() → Animal.prototype → Object.prototype

三、完整继承示例分析

结合上述技术，我们可以构建一个健壮的继承体系：

ini 复制代码

javascript
编辑
function Animal(name, age) {
  this.name = name;
  this.age = age;
}
Animal.prototype.species = '动物';
Animal.prototype.breathe = function() { console.log('呼吸'); };

function Cat(name, age, color) {
  Animal.apply(this, [name, age]); // 构造函数继承属性
  this.color = color;
}

// 原型继承方法
function extend(Parent, Child) {
  var F = function() {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.prototype.constructor = Child;
}
extend(Animal, Cat);

// 扩展子类特有方法
Cat.prototype.eat = function() { console.log("eat jerry"); };

const cat = new Cat('加菲猫', 2, '黄色');
console.log(cat.species); // 动物（来自 Animal.prototype）
cat.eat();                // eat jerry
cat.breathe();            // 呼吸

此模式实现了：

属性继承 ：通过 apply/call 复用父类构造逻辑；
方法继承：通过中介原型链共享父类方法；
隔离性：子类扩展不影响父类。

四、动态语言特性：属性遮蔽（Shadowing）

JavaScript 是动态语言，对象属性可在运行时修改。当实例属性与原型属性同名时，实例属性会"遮蔽"原型属性：

javascript 复制代码

javascript
编辑
function Cat() {}
Cat.prototype.species = '猫科动物';

const cat = new Cat();
console.log(cat.species); // 猫科动物

cat.species = 'hello';    // 在实例上创建新属性
console.log(cat.species); // hello
console.log(Cat.prototype.species); // 仍是 猫科动物

这体现了 JavaScript 的属性查找机制：先查自身，再沿原型链向上查找。

五、总结：JavaScript 继承的最佳实践

尽管 ES6 引入了 class 语法糖，但其底层仍基于原型链。理解传统继承机制对掌握 JavaScript 本质至关重要。推荐使用以下组合模式：

构造函数继承属性 ：使用 Parent.apply(this, arguments)；
原型继承方法 ：通过空函数中介实现 Child.prototype = new F()；
修正 constructor ：确保 Child.prototype.constructor === Child。

这种"寄生组合式继承"兼顾效率与安全性，是 ES5 时代最成熟的继承方案。

随着现代开发转向 ES6+，我们虽可直接使用 class extends，但其背后仍是上述原理的封装。唯有深入理解原型、this、call/apply 及原型链，才能真正驾驭 JavaScript 的面向对象编程。

提示：在实际项目中，除非需要兼容老旧环境，否则建议优先使用 class 语法，它更简洁且不易出错。但面试或底层框架开发中，原型继承知识仍不可或缺。

通过本文的系统梳理，相信你已对 JavaScript 原型继承机制有了更清晰的认识。掌握这些基础，将为你在前端工程化、框架原理理解乃至算法设计中打下坚实根基。