将javascript继承从小白到高级，这一篇就够了！

2023-10-01 09:53:21

在javascript中实现继承是很多前端开发人员都要学习和掌握的内容。如果你想要成为一名合格的前端开发人员，那么你必须熟练掌握js继承的多种实现方式。这篇文章就将为你详细讲解这方面的内容，帮助你从小白快速晋升为高级。

ES6 之前，javascript 没有提供给我们 extends 继承，因此我们可以通过 构造函数 + 原型对象 模拟实现继承，称为 组合继承 。

核心思想 ：通过 call() 把父类型的 this 指向子类型的 this，这样就可以实现子类型继承父类型的属性。

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

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

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

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

const child = new Child('张三', 18);

console.log(child.getName()); // "张三"

组合继承的步骤：

使用call()或apply()方法调用父类构造函数，将父类构造函数的this指向子类构造函数的this。
通过Object.create()方法或new创建子类的原型对象，并将其指向父类的原型对象。
将子类构造函数的原型对象指向子类原型对象。

ES6 之后，javascript 引入了 class 和 extends 关键字，支持 类式继承 。

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

  getName() {
    return this.name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('张三', 18);

console.log(child.getName()); // "张三"