详解JavaScript实现继承的五种经典方式(附图解)

function Parent() {
  this.property = "parentProperty";
}
Parent.prototype.say = function () {
  console.log("Parent say");
};
function Child() {
  this.childProperty = "childProperty";
}
// 修改 Child 的 prototype 属性指向 Parent 实例对象，那么 Child 实例对象的 __proto__ 就会指向其构造函数 Child 的 prototype 属性（即Parent 实例对象）
// 修改了 Child.prototype 的指向后，那么原来 Child.prototype 指向的对象由于被没有引用，就会被回收。
Child.prototype = new Parent();
const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
childInstance.say();

console.log(Child.prototype.constructor); // 输出：[Function: Parent], 即是 Parent 构造函数，这是由于 Child.prototype 自身没有，就会沿着 __proto__ 寻找，因此找到 Parent。这明显是不对的
console.log(Child.prototype.constructor === Child); // 输出：false, 这明显也是不对的

Child.prototype = new Parent();
+Child.prototype.constructor = Child;

function Parent() {
  this.property = "parentProperty";
}
Parent.prototype.say = function () {
  console.log("Parent say");
};
function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}
// 方式一：直接指向
// Child.prototype.__proto__ = Parent.prototype;
// 方式二：使用 Object.create()，这是 es5 的方法
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
let childInstance = new Child();
console.log(childInstance.property);
childInstance.say();

function Parent() {
  this.property = "parentProperty";
}
Parent.prototype.say = function () {
  console.log("Parent say");
};
function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}
const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
// childInstance.say() // 报错：childInstance.say is not a function

function Parent() {
  this.property = "parentProperty";
}
Parent.prototype.say = function () {
  console.log("Parent say");
};
function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}
Child.prototype = new Parent();
// 注意：修改其原型对象之后，同时必须得修改 constructor 的指向
Child.prototype.constructor = Child;
const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
childInstance.say();

function mockExtend(Parent, Child) {
  function Fn() {}
  /**
   * 1. 修改了 Fn.prototype 的指向后，那么原来的 Fn.prototype 没有被引用，则会被回收
   * 2. 那么Fn的实例对象的 __proto__ 就指向其构造函数的 prototype
   */
  Fn.prototype = Parent.prototype;
  Child.prototype = new Fn();
  // 注意：修改了原型对象之后，同时必须得修改 constructor 的指向
  Child.prototype.constructor = Child;
}
// =============================== 使用 ==================================
function Parent() {
  this.property = "parentProperty";
}
Parent.prototype.say = function () {
  console.log("Parent say");
};
function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}
mockExtend(Parent, Child);
const childInstance = new Child();
console.log(childInstance.property);
childInstance.say();

class Parent {
  constructor() {
    this.property = "parentProperty";
  }
  say() {
    console.log("Parent say");
  }
}
class Child extends Parent {
  constructor() {
    super();
    this.childProperty = "childProperty";
  }
}
const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
childInstance.say();