1.基于原型的继承（ES5）

对象.__proto__===其构造函数.prototype

构造函数继承

  1. function SuperType(){
  2.     this.color = "red"
  3. }
  4. function SubType(){
  5.     SuperType.call(this) // 继承父类的 this
  6. }
  7. let a = new SubType()
  8. console.log(a.color) // red

原型继承-本质就是重写原型对象

组合形式

  1. function Person1(name,age){
  2.   this.name = name;
  3.   this.age = age
  4. } // 创建构造函数
  5. Person1.prototype.sayHi = function(){
  6.   console.log('你好，我是'+this.name)
  7. }
  8. function Person2(name,age,sex){
  9.     Person1.call(this,name,age) // 原型继承，Person1的原型继承给Person2
  10.     this.sex = sex
  11. }
  12. let person1 = new Person1('frank', 18)
  13. // 构造函数继承；person1 原型上就也有了 sayHi 属性
  14. let person2 = new Person2('frank', 18)
  15. console.log(person1) // person1没有sex但原型上有sayHi这个函数
  16. console.log(person2) // person2有sex，但原型中没有sayHi函数

image.png

2.基于 class 的继承（ES6）

  • constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为 “constructor”的特殊方法
  • 一个构造函数可以使用 super关键字来调用一个父类的构造函数

  • super()之后才能调用this

    1. class Person1 {
    2. constructor(name, age) { // 用于创建和初始化一个由class创建的对象
    3.   this.name = name
    4.   this.age = age
    5. }
    6. sayHi() {
    7.   console.log('你好，我是' + this.name)
    8. }
    9. }
    10. class Person2 extends Person1 { // extends 创建子类，Person2是Person1的子类
    11. constructor(name, age, sex) {
    12.   super(name, age) // super() 是用来调用父类的构造函数
    13.   this.sex = sex // 子类中定义了构造函数，必须先调用 super() 才能使用 this
    14. }
    15. }
    16. let person1 = new Person1('frank', 18)
    17. console.log(person1) // person1没有sex，原型上有sayHi这个函数
    18. let person2 = new Person2('frank', 18, '男')
    19. console.log(person2) // person2有sex，原型中没有sayHi函数

    image.png

    总结：

    1、函数声明和类声明的区别

  • 函数声明会提升，类声明不会

首先需要声明你的类，然后访问它，否则像下面的代码会抛出一个ReferenceError

2、ES5继承和ES6继承的区别

  • ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.call(this)）
  • ES6的继承有所不同，实质上是先创建父类的实例对象this，然后再用子类的构造函数修改this。子类没有自己的this对象，所以必须先用super()调用父类的构造函数，才能使用this，否则新建实例报错。