JS 继承方法汇总，把握真谛，随心写就灵动代码
2024-02-02 14:45:58
JavaScript 继承方法：掌握对象的继承艺术
原型继承：基础的继承之路
原型继承是 JavaScript 中最基本的继承方式，也是实现继承最简单的方法。在这种模式下，子对象直接继承父对象的原型，从而获得父对象的所有属性和方法。让我们用一个示例来理解：
function Parent() {
this.name = '父对象';
}
function Child() {
this.age = 18;
}
// 将 Child 的原型设置为 Parent 的一个新实例
Child.prototype = new Parent();
// 创建一个 Child 实例
const child = new Child();
// 访问继承的属性和方法
console.log(child.name); // 输出：父对象
console.log(child.age); // 输出：18
在上面的示例中，Child 子类继承了 Parent 父类的 name 属性，并添加了自己的 age 属性。
构造函数继承：通过调用实现继承
构造函数继承通过调用父对象的构造函数来实现继承。子对象的构造函数接收父对象构造函数作为参数，并在内部调用它。这种方法可用于继承父对象的属性和方法，但也带来了一些局限性。
function Parent(name) {
this.name = name;
}
function Child(name, age) {
// 调用 Parent 构造函数，将 name 传递给它
Parent.call(this, name);
this.age = age;
}
// 创建一个 Child 实例
const child = new Child('子对象', 18);
// 访问继承的属性和方法
console.log(child.name); // 输出：子对象
console.log(child.age); // 输出：18
在上面的示例中，Child 子类继承了 Parent 父类的 name 属性，并通过构造函数调用添加了自己的 age 属性。
组合继承：融合原型和构造函数
组合继承结合了原型继承和构造函数继承的优点，允许子类继承父类的属性和方法，包括实例属性和方法。
function Parent(name) {
this.name = name;
}
function Child(name, age) {
// 调用 Parent 构造函数，将 name 传递给它
Parent.call(this, name);
this.age = age;
}
// 设置 Child 的原型为 Parent 的一个新实例
Child.prototype = new Parent();
// 创建一个 Child 实例
const child = new Child('子对象', 18);
// 访问继承的属性和方法
console.log(child.name); // 输出：子对象
console.log(child.age); // 输出：18
在这个示例中，Child 子类继承了 Parent 父类的 name 属性，并通过构造函数调用添加了自己的 age 属性。同时，Child 的原型也被设置为 Parent 的一个新实例，从而继承了父类的所有方法。
寄生组合继承：进一步优化
寄生组合继承是对组合继承的改进，它不仅可以继承父类的属性和方法，还可以避免构造函数继承的缺点。这种方法涉及创建一个中间构造函数，用于设置子类的实例属性，然后将中间构造函数的原型设置为父类的实例。
function Parent(name) {
this.name = name;
}
function Child(name, age) {
// 创建一个中间构造函数
function Intermediate() {
this.age = age;
}
// 设置中间构造函数的原型为 Parent 的实例
Intermediate.prototype = new Parent();
// 调用中间构造函数，将 age 传递给它
Intermediate.call(this);
this.name = name;
}
// 创建一个 Child 实例
const child = new Child('子对象', 18);
// 访问继承的属性和方法
console.log(child.name); // 输出：子对象
console.log(child.age); // 输出：18
在上面的示例中，Child 子类继承了 Parent 父类的 name 属性，并通过创建中间构造函数 Intermediate 添加了自己的 age 属性。中间构造函数的原型被设置为 Parent 的实例，从而继承了父类的所有方法。
类继承：ES6 的现代方式
ES6 引入了类继承，提供了一种简洁且现代的方式来继承对象。类继承使用 class 和 extends 来定义类及其继承关系。
class Parent {
constructor(name) {
this.name = name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
}
// 创建一个 Child 实例
const child = new Child('子对象', 18);
// 访问继承的属性和方法
console.log(child.name); // 输出：子对象
console.log(child.age); // 输出：18
在上面的示例中，Child 子类使用 extends 关键字继承了 Parent 父类。子类的构造函数调用父类的构造函数，并添加自己的 age 属性。
JavaScript 继承的注意事项：
- 原型继承和构造函数继承无法继承父对象的私有属性和方法。
- 组合继承和寄生组合继承可以继承父对象的私有属性和方法，但组合继承的代码比较复杂，寄生组合继承需要使用中间构造函数。
- 类继承可以继承父对象的私有属性和方法，并且代码比较简洁。
- 在实际开发中，根据具体情况选择合适的继承方法。
常见问题解答：
-
为什么需要继承？
继承允许我们创建新的对象，这些对象共享现有对象的特性和行为，从而避免重复代码并促进代码重用。 -
什么是多重继承？
JavaScript 不支持多重继承，即一个子类不能同时继承多个父类。 -
什么是抽象类？
抽象类是不能被实例化的类，它主要用于定义子类必须实现的接口或抽象方法。 -
如何防止子类覆盖父类的方法？
可以使用final关键字将父类方法标记为最终方法，从而防止子类覆盖它们。 -
如何在 JavaScript 中实现 mixin？
Mixin 是一种用于将多个对象的功能组合到一个对象中的技术。在 JavaScript 中，可以使用对象合并或代理模式来实现 mixin。
