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

javascript原型链多层级继承需让子类prototype指向父类实例并修正constructor，调用父构造函数初始化属性，避免原型上引用类型共享；es6 class本质相同但更简洁。

javascript 中怎么用原型链实现多层级的继承结构

JavaScript 中用原型链实现多层级继承，核心是让子类的 prototype 指向父类的一个实例，并逐级向上链接。关键在于正确设置构造函数指向、避免共享引用属性、并在每层调用父类构造函数初始化实例属性。

基础写法：手动链接 prototype

要实现 A → B → C 的三层继承（C 继承 B，B 继承 A），需分步设置原型链：

先让 B.prototype = Object.create(A.prototype)，再补上 B.prototype.constructor = B
再让 C.prototype = Object.create(B.prototype)，同样修正 C.prototype.constructor = C
在 B 和 C 的构造函数中，分别用 A.call(this, ...) 和 B.call(this, ...) 初始化父级实例属性

示例：

function A(name) { this.name = name; }
A.prototype.say = function() { return 'Hi, I\'m ' + this.name; };

function B(name, age) {
  A.call(this, name); // 调用上一级构造函数
  this.age = age;
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
B.prototype.info = function() { return `${this.say()}, ${this.age} years old`; };

function C(name, age, job) {
  B.call(this, name, age); // 调用直接父类构造函数
  this.job = job;
}
C.prototype = Object.create(B.prototype);
C.prototype.constructor = C;
C.prototype.work = function() { return `${this.info()}, working as ${this.job}`; };

避免引用类型属性被共享

如果在父类 prototype 上定义了数组或对象，所有子类实例会共享该引用——这是原型链继承的经典陷阱。

Alibabacloud Sdk Client Initialization For Java

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

下载

❌ 错误：在 A.prototype.data = [] —— 所有 C 实例共用一个数组
✅ 正确：把实例专属数据放在构造函数里（如 this.data = []），或在方法中按需创建新对象
若必须复用逻辑，可用工厂函数返回新副本：this.data = getEmptyArray()

现代替代方案：class + extends（底层仍是原型链）

ES6 的 class 语法更简洁，但本质没变，仍基于原型链：

class A { constructor(name) { this.name = name; } say() { return `Hi, I'm ${this.name}`; } }
class B extends A { constructor(name, age) { super(name); this.age = age; } info() { return `${this.say()}, ${this.age} years old`; } }
class C extends B { constructor(name, age, job) { super(name, age); this.job = job; } work() { return `${this.info()}, working as ${this.job}`; } }

注意：extends 自动处理 prototype 链接和 constructor 修正；super() 确保正确调用父类构造函数。