JavaScript 中怎么用原型链实现多级继承-js教程-PHP中文网

javascript多级继承通过逐层设置prototype实现，如parent→student→graduatestudent；需用object.create()构建原型链并修复constructor，避免引用属性共享或参数错误。

javascript 中怎么用原型链实现多级继承

JavaScript 中用原型链实现多级继承，核心是让子构造函数的 prototype 指向父构造函数的一个实例，再让更下一级的构造函数指向它的实例，逐层向上链接。关键在于避免直接赋值父类原型（会共享引用类型属性），同时确保构造函数指向正确。

一级继承：基础原型链设置

先让子类 B 继承父类 A：

创建 B 的 prototype 为 new A()，从而获得 A 的实例属性和方法
手动修正 B.prototype.constructor，否则它会指向 A

示例：

function A(name) { this.name = name; }
A.prototype.sayHello = function() { console.log('Hello from A'); };

function B(name, age) { 
  A.call(this, name); // 借用构造函数继承实例属性
  this.age = age;
}
B.prototype = Object.create(A.prototype); // 推荐写法，避免调用 A 构造函数
B.prototype.constructor = B;
B.prototype.sayAge = function() { console.log(`I'm ${this.age}`); };

二级继承：C 继承 B（即多级）

继续让 C 继承 B，就自然继承了 A —— 因为 B.prototype 已经连到 A.prototype：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

C.prototype = Object.create(B.prototype)，此时 C 实例能访问 B 和 A 的原型方法
必须重设 C.prototype.constructor = C，否则它会指向 B
构造函数内部仍需用 B.call(this, ...) 来初始化父级实例属性

示例：

function C(name, age, city) {
  B.call(this, name, age); // 先初始化 B 的部分
  this.city = city;
}
C.prototype = Object.create(B.prototype);
C.prototype.constructor = C;
C.prototype.sayCity = function() { console.log(`I'm from ${this.city}`); }; 

// 验证
const c1 = new C('Alice', 25, 'Beijing');
c1.sayHello(); // ✅ Hello from A
c1.sayAge();   // ✅ I'm 25
c1.sayCity();  // ✅ I'm from Beijing

注意事项与常见陷阱

多级原型链容易出错，尤其在属性查找和 constructor 指向上：

不要用 B.prototype = new A()，它会执行 A 的构造逻辑，可能产生副作用或意外状态
每次设置 prototype = Object.create(...) 后，必须手动恢复 constructor，否则 instanceof 和类识别会异常
只通过原型链继承方法；实例属性（如对象、数组）必须在子构造函数中用 call/apply 初始化，防止被多个实例共享
可通过 Object.getPrototypeOf(c1) === C.prototype、Object.getPrototypeOf(C.prototype) === B.prototype 等逐级验证链是否完整

现代替代方案（补充说明）

ES6 的 class + extends 本质仍是原型链，但语法更清晰、自动处理 constructor 和 super：

class A { constructor(name) { this.name = name; } sayHello() { console.log('Hello from A'); } }
class B extends A { constructor(name, age) { super(name); this.age = age; } sayAge() { console.log(`I'm ${this.age}`); } }
class C extends B { constructor(name, age, city) { super(name, age); this.city = city; } sayCity() { console.log(`I'm from ${this.city}`); } }

底层依然靠 Object.setPrototypeOf(C.prototype, B.prototype) 等实现多级原型连接，只是引擎帮你封装了细节。