当前位置：首页 > backend >正文

JavaScript 实现继承及 Class 本质详解

backend 2025/5/13 21:10:08

JavaScript 实现继承及 Class 本质详解

一、实现继承的 6 种方式

JavaScript 的继承基于原型链，以下是常见的继承实现方法及其优缺点：

1. 原型链继承

核心：子类的原型指向父类的实例。
示例：

function Parent() {this.name = 'Parent';
}
Parent.prototype.say = function() {console.log(this.name);
};function Child() {}
Child.prototype = new Parent(); // 原型链继承const child = new Child();
child.say(); // 输出: "Parent"

缺点：

所有子类实例共享父类引用类型属性（如数组、对象）。
无法向父类构造函数传参。

2. 构造函数继承

核心：在子类构造函数中调用父类构造函数。
示例：

function Parent(name) {this.name = name;this.colors = ['red', 'blue'];
}function Child(name) {Parent.call(this, name); // 构造函数继承
}const child1 = new Child('Child1');
child1.colors.push('green');
console.log(child1.colors); // ["red", "blue", "green"]const child2 = new Child('Child2');
console.log(child2.colors); // ["red", "blue"]

优点：

解决引用类型共享问题。
支持向父类传参。
缺点：
无法继承父类原型上的方法（如 Parent.prototype.say）。

3. 组合继承（原型链 + 构造函数）

核心：结合原型链继承和构造函数继承。
示例：

function Parent(name) {this.name = name;this.colors = ['red'];
}
Parent.prototype.say = function() {console.log(this.name);
};function Child(name) {Parent.call(this, name); // 构造函数继承（第二次调用 Parent）
}
Child.prototype = new Parent(); // 原型链继承（第一次调用 Parent）
Child.prototype.constructor = Child;const child = new Child('Child');
child.say(); // 输出: "Child"

缺点：

父类构造函数被调用两次（性能问题）。

4. 原型式继承

核心：基于现有对象创建新对象（类似 Object.create）。
示例：

function createObject(obj) {function F() {}F.prototype = obj;return new F();
}const parent = { name: 'Parent' };
const child = createObject(parent);
console.log(child.name); // 输出: "Parent"

应用场景：

适合不需要构造函数的简单对象继承。

5. 寄生式继承

核心：在原型式继承基础上增强对象。
示例：

function createEnhancedObject(obj) {const clone = Object.create(obj);clone.say = function() {console.log(this.name);};return clone;
}const parent = { name: 'Parent' };
const child = createEnhancedObject(parent);
child.say(); // 输出: "Parent"

缺点：

方法无法复用（每个实例都创建新方法）。

6. 寄生组合继承（最优方案）

核心：避免组合继承中重复调用父类构造函数。
示例：

function inheritPrototype(Child, Parent) {const prototype = Object.create(Parent.prototype); // 创建父类原型的副本prototype.constructor = Child; // 修复 constructorChild.prototype = prototype; // 赋值给子类原型
}function Parent(name) {this.name = name;
}
Parent.prototype.say = function() {console.log(this.name);
};function Child(name) {Parent.call(this, name); // 构造函数继承
}inheritPrototype(Child, Parent); // 寄生组合继承const child = new Child('Child');
child.say(); // 输出: "Child"

优点：

只调用一次父类构造函数。
原型链保持干净，无多余属性。

二、ES6 Class 的本质

ES6 的 class 是语法糖，底层仍基于原型链和构造函数。

1. Class 转换为 ES5 代码

示例：

// ES6 Class
class Parent {constructor(name) {this.name = name;}say() {console.log(this.name);}static staticMethod() {console.log('Static');}
}// 转换为 ES5
function Parent(name) {this.name = name;
}
Parent.prototype.say = function() {console.log(this.name);
};
Parent.staticMethod = function() {console.log('Static');
};

核心规则：

constructor 对应构造函数。
类方法绑定到原型（Parent.prototype）。
静态方法绑定到构造函数本身（Parent.staticMethod）。

2. 继承的实现

示例：

class Child extends Parent {constructor(name, age) {super(name); // 调用父类构造函数this.age = age;}run() {console.log(`${this.name} is running`);}
}// 转换为 ES5
function Child(name, age) {Parent.call(this, name); // 构造函数继承this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 原型链继承
Child.prototype.constructor = Child;
Child.prototype.run = function() {console.log(this.name + ' is running');
};

关键点：

super 在构造函数中调用父类构造函数（等价于 Parent.call(this)）。
extends 自动设置原型链（Child.prototype.__proto__ = Parent.prototype）。

3. 静态方法与继承

示例：

class Parent {static staticMethod() {console.log('Parent static');}
}class Child extends Parent {static childStaticMethod() {super.staticMethod(); // 调用父类静态方法console.log('Child static');}
}Child.childStaticMethod(); // 输出: "Parent static" → "Child static"

底层原理：

静态方法继承通过 Child.__proto__ = Parent 实现。

三、核心知识点总结

特性	说明
原型链	对象通过 `__proto__` 向上查找属性和方法，形成链式结构。
构造函数	用于初始化实例属性，通过 `new` 调用。
Class 本质	语法糖，基于原型链和构造函数，提供更清晰的面向对象语法。
super	在子类构造函数中调用父类构造函数，或在方法中调用父类方法。
静态方法	通过 `static` 定义，绑定到类本身而非实例。
最优继承方案	寄生组合继承（ES5）或直接使用 `class` + `extends`（ES6）。