JavaScript 继承百花齐放：从原型链到 ES6 类
JavaScript 的继承机制是其一大特点，随着语言的发展，它的继承方式也经历了多次演变，从最初的原型链继承到 ES6 引入的类（Class）语法，构建了多种灵活的继承模式。这篇文章将对这几种继承方式进行探讨，并给出代码示例以加深理解。
一、原型链继承
原型链继承是指通过将子类的原型设置为父类的实例，从而实现继承。这是一种简单而直观的继承方式。
function Parent() {
this.name = 'Parent';
}
Parent.prototype.getName = function() {
return this.name;
};
function Child() {
this.age = 10;
}
// 设置 Child 的原型为 Parent 的实例
Child.prototype = new Parent();
Child.prototype.getAge = function() {
return this.age;
};
const child = new Child();
console.log(child.getName()); // Output: Parent
console.log(child.getAge()); // Output: 10
在这个例子中，Child 通过原型链继承了 Parent 的方法。这样，child 实例可以访问 Parent 的 getName 方法。
二、构造函数继承
构造函数继承是将父类的属性和方法在子类的构造函数中调用的一种方式。这种方式可以避免原型链继承中的某些问题，比如多个子类实例共享父类实例属性的问题。
function Parent() {
this.name = 'Parent';
}
Parent.prototype.getName = function() {
return this.name;
};
function Child() {
Parent.call(this); // 在子类构造函数中调用父类构造函数
this.age = 10;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.getAge = function() {
return this.age;
};
const child = new Child();
console.log(child.getName()); // Output: Parent
console.log(child.getAge()); // Output: 10
在这个例子中，通过 Parent.call(this) 在 Child 的构造函数中调用 Parent 的构造函数，确保每个实例都有自己的 name 属性。
三、组合继承
组合继承是结合了原型链和构造函数继承的优势，避免了两者的缺陷。具体来说，就是先调用父类构造函数继承属性，再将父类的原型赋值给子类。
function Parent() {
this.name = 'Parent';
}
Parent.prototype.getName = function() {
return this.name;
};
function Child() {
Parent.call(this); // 继承父类属性
this.age = 10;
}
Child.prototype = Object.create(Parent.prototype); // 继承父类方法
Child.prototype.constructor = Child;
Child.prototype.getAge = function() {
return this.age;
};
const child = new Child();
console.log(child.getName()); // Output: Parent
console.log(child.getAge()); // Output: 10
四、ES6 类语法
ES6 引入了类的语法，使得继承更加直观。在 ES6 中，使用 class 关键字定义类，使用 extends 关键字实现继承，这种方式更加符合面向对象编程的习惯。
class Parent {
constructor() {
this.name = 'Parent';
}
getName() {
return this.name;
}
}
class Child extends Parent {
constructor() {
super(); // 调用父类构造函数
this.age = 10;
}
getAge() {
return this.age;
}
}
const child = new Child();
console.log(child.getName()); // Output: Parent
console.log(child.getAge()); // Output: 10
在 ES6 的示例中，super() 调用父类的构造函数，确保子类可以正确初始化父类的属性。代码更加简洁和易读。
总结
JavaScript 的继承机制从原型链到 ES6 类，展示了语言发展中的灵活性和多样性。原型链继承和构造函数继承各有优劣，而组合继承作为一种折中方案则更受欢迎。如今，随着 ES6 的普及，类的语法使得继承更加直观明了，提供了更好的可读性和可维护性。在实际开发中，根据需求选择合适的继承方式，能够帮助我们更好地组织代码，提升代码的复用性和可扩展性。
