继承

继承的作用

面试谈及继承，在详细回答继承的几种方式之前，我们都应该先说明继承的作用是让子类的实例可以访问父类的实例属性和方法，这样有助于代码的模块化和组织，使代码结构更加清晰。

原型链继承

每个对象都有一个私有属性__proto__，指向它的原型对象（prototype），这个原型对象又有自己的原型，形成一个链条，直到某个对象的原型为null。这种原型链结构使得对象可以共享和继承属性和方法。

而原型链继承就是通过设置子类的原型为父类的一个实例，使子类能够访问父类的属性和方法。

function Parent() {
  this.name = "parent";
  this.like = [1, 2, 3];
}
function Child() {
  this.type = "child";
}

let child1 = new Child();
let child2 = new Child();

Child.prototype = new Parent();
console.log(child1.name); // parent

但是这种继承方式的缺点是所有子类实例共享父类的引用类型属性，这可能会导致一个实例修改了该属性，其他实例也会受到影响。

child1.like.push(4);
console.log(child2.like); // [1, 2, 3, 4]

构造函数继承

构造函数继承，主要通过在子类构造函数中调用父类构造函数来实现。它使用了call或apply方法，将父类构造函数的执行上下文绑定到子类实例上，从而实现属性的继承。

function Parent() {
  this.name = "parent";
  this.like = [1, 2, 3];
}

function Child() {
  Parent.call(this); // 调用父类构造函数，继承父类的属性
  this.type = "child";
}

// 创建子类实例
let child1 = new Child();
console.log(child1.name); // "parent"
console.log(child1.like); // [1, 2, 3]
console.log(child1.type); // "child"
child1.like.push(4);
console.log(child1.like); // [1, 2, 3, 4]

let child2 = new Child();
console.log(child2.like); // [1, 2, 3]

构造函数继承只能继承父类构造函数中的实例属性，而不能继承父类原型上的方法。而且每个子类实例相当于都会创建父类实例属性的副本，这可能会导致内存开销较大，特别是当父类有大量实例属性时。

Parent.prototype.getName = function() {
  console.log(this.name);
};

child1.getName(); //报错

组合继承

组合继承结合了原型链继承和构造函数继承的优点，使得子类既能继承父类的实例属性，又能继承父类的原型方法。这样每个子类实例都有独立的实例属性，不会共享引用类型属性。子类也可以访问父类原型上的方法。

function Parent() {
  this.name = "parent";
  this.like = [1, 2, 3];
}

Parent.prototype.getName = function() {
  console.log(this.name);
};

function Child() {
  Parent.call(this); // 调用 Parent 构造函数，继承实例属性
  this.type = "child";
}

// 继承父类的原型方法
Child.prototype = new Parent();

// 创建子类实例
let child1 = new Child();
let child2 = new Child();
console.log(child1.name); // parent
child1.like.push(4);
console.log(child1.like); // [1, 2, 3, 4]
console.log(child2.like); // [1, 2, 3]
child1.getName(); //"parent"

注意： 在JavaScript中，原型对象上有一个默认的constructor属性，指向该构造函数本身。

当我们设置Child.prototype为Parent的一个实例时，会发生以下变化：

Child.prototype = new Parent();

此时，Child.prototype继承了Parent的所有原型属性和方法，但也会继承Parent原型的constructor属性。Parent.prototype.constructor默认指向Parent，所以Child.prototype.constructor也会指向Parent。这就导致了Child的实例的constructor属性会错误地指向Parent，而不是Child。这会带来混淆和潜在的问题，特别是在涉及到instanceof检查或者依赖于constructor属性的逻辑中。

为了修正这一点，我们需要显式地将Child.prototype.constructor重新指向Child：

Child.prototype.constructor = Child;

这样做的目的是确保每个构造函数的原型对象的constructor属性正确地指向其构造函数本身。

这种继承方式的缺点则是父类构造函数被调用了两次，导致性能开销多了一点

原型式继承

原型式继承是一种创建对象的方式，使用一个现有的对象作为新对象的原型。通过这种方式，新的对象可以继承现有对象的属性和方法。

const parent = {
  name: "parent",
  like: [1, 2, 3],
  getName: function() {
    return this.name;
  }
};

// 创建一个以 parent 为原型的新对象
const child = Object.create(parent);
child.name = "child";

console.log(child.getName()); // "child"
console.log(child.like); // [1, 2, 3]

child.push(4);
console.log(child.like)// [1, 2, 3, 4]
console.log(parent.like) // [1, 2, 3, 4]

同样的，如果原型对象有引用类型的属性（如数组或对象），所有继承自它的对象共享这些属性。修改一个对象的引用类型属性，会影响到所有继承自同一原型的对象。

寄生式继承

寄生式继承是对原型式继承的一种增强，它通过创建一个新对象并增强这个对象来实现继承。具体来说，寄生式继承会在创建新对象的基础上添加新的属性和方法，然后返回这个增强后的对象。

let Parent = {
  name: "parent",
  age: 18,
  like: [1, 2, 3],
};

function clone(obj) {
  let clone = Object.create(obj);
  clone.getLike = function () {
    return this.like;
  };
  return clone;
}

let Child = clone(Parent);

console.log(Child.name); // "parent"
console.log(Child.age); // 18
console.log(Child.getLike()); // [1, 2, 3]

与原型式继承一样，引用类型属性依旧会被共享，可能会导致意外的修改。

寄生组合式继承

寄生组合继承它结合了寄生式继承和组合继承的优点，避免了它们各自的缺点。主要目的是避免在原型链上重复创建父类的实例，从而提高效率。

1. 借用构造函数（组合继承的部分） ：在子类构造函数中调用父类构造函数，从而实现父类属性的复制。

2. 寄生式继承：将子类的原型指向父类的原型，通过Object.create方法来创建一个新的对象，该对象的原型指向父类的原型。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  // 借用构造函数继承父类属性
  Parent.call(this, name);
  this.age = age;
}

// 寄生组合继承父类原型方法
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(this.age);
};


let child1 = new Child('Alice', 5);
child1.colors.push('yellow');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'yellow']
child1.sayName(); // 输出: Alice
child1.sayAge(); // 输出: 5

let child2 = new Child('Bob', 10);
console.log(child2.colors); // 输出: ['red', 'blue', 'green']
child2.sayName(); // 输出: Bob
child2.sayAge(); // 输出: 10

寄生组合继承被广泛认为是ES5中最合理和有效的继承方式。

extends继承

在ES6中，class语法引入了一种更加简洁和直观的方式来定义类和继承。

关键字：extends

extends关键字用于创建一个类，该类是另一个类的子类。通过extends关键字，可以让子类继承父类的属性和方法。

关键字：super

super关键字用于调用父类的构造函数和父类的方法。在子类的构造函数中，必须先调用super()，才能使用this关键字。这是因为子类没有自己的this对象，必须先调用父类的构造函数，从而获取父类的this对象并进行扩展。

class Parent {
  constructor(name) {
    this.name = name; 
  }

  getName() {
    return this.name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类的构造函数，并传递参数
    this.age = age; // 初始化子类自己的属性
  }

  getAge() {
    return this.age;
  }
}

let c = new Child('John', 18);
console.log(c.getName()); // 输出: John
console.log(c.getAge());  // 输出: 18

22. Class 的继承 - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStack