JavaScript中的常见继承总结

以下是关于“JavaScript中的常见继承总结”的完整攻略：

什么是继承

继承是面向对象编程中的一种重要概念，它使得子类（或派生类）能够“继承”父类（或基类）的属性和方法。子类可以在继承的基础上增加新的方法，或者重写自己的方法。继承的目的是实现代码的复用，减少冗余代码。

JavaScript中的继承

在JavaScript中，继承可以通过原型链和构造函数实现。下面是两种常见的继承方式：

原型链继承

原型链继承是指子类通过原型继承父类的属性和方法。具体实现方式是将子类的原型对象指向父类的实例化对象，如下所示。

function Parent() {
  this.name = 'parent';
}

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

function Child() {}

Child.prototype = new Parent(); // 原型继承

const child = new Child();
child.sayHello(); // 'Hello from parent'

在上面的代码中，Child构造函数的原型对象被赋值为一个Parent实例，这样Child就继承了Parent的属性和方法，包括name和sayHello函数。

缺点：父类的属性如果是引用类型，子类修改该属性会影响到其他子类实例和父类实例，因为它们共享了引用类型属性的实例。

构造函数继承

构造函数继承是指子类通过调用父类的构造函数来获取父类的属性和方法。具体实现方式是在子类的构造函数中调用父类的构造函数并传递适当的参数，如下所示。

function Parent(name) {
  this.name = name;
}

function Child(name) {
  Parent.call(this, name); // call调用
}

const child = new Child('child');
console.log(child.name); // 'child'

在上面的代码中，Child构造函数中使用Parent的构造函数，并且通过call方法将this指向Child实例，这样Child就可以获取到Parent的属性和方法。

缺点：父类的方法无法被子类继承，只能调用父类的方法。

示例说明

下面是两个示例，分别使用原型链继承和构造函数继承来实现继承的功能。

原型链继承示例

function Animal(type) {
  this.type = type;
}

Animal.prototype.sayType = function() {
  console.log('type is ' + this.type);
}

function Dog(name) {
  this.name = name;
}

Dog.prototype = new Animal('dog'); // 原型继承

const dog = new Dog('Bobby');
dog.sayType(); // 'type is dog'

在上面的代码中，Animal是父类，Dog是子类。Dog构造函数的原型对象被赋值为一个Animal实例，这样Dog就继承了Animal的属性和方法，包括type和sayType函数。创建Dog实例时，实例中的type属性被初始化为'dog'，这是因为Dog的原型对象是一个Animal实例，并且在实例化Animal时传递了类型参数'dog'。

构造函数继承示例

function Shape() {
  this.color = 'red';
}

Shape.prototype.showColor = function() {
  console.log('color is ' + this.color);
}

function Rectangle() {
  Shape.call(this); // call调用
  this.width = 10;
  this.height = 20;
}

const rect = new Rectangle();
console.log(rect.color); // 'red'

在上面的代码中，Shape是父类，Rectangle是子类。通过构造函数继承的方式，Rectangle调用了Shape的构造函数，并且将this指向了Rectangle实例，这样Rectangle就可以获取到Shape的属性和方法。创建Rectangle实例时，实例中的color属性被初始化为'red'，这是因为通过call方法调用Shape的构造函数时，将this指向了当前的Rectangle实例。

以上是对“JavaScript中的常见继承总结”的完整攻略，希望对你有所帮助。