[JavaScript知识库]谈谈对于继承的理解

为什么需要继承?

主要是因为需要方便管理与复用,将多个构造函数,建立关联,实现复用

基础知识:

JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

大体关系如下

1.构造函数的prototype属性指向了构造函数原型对象
2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数

了解以上知识点后我们谈一下继承

?1?借用构造函数继承

在子构造函数内 调用父构造函数并且改变父构造函数this指向

function Father(str){
    this.str=str
}
function Son(name) {
    Father.call(this,'字符串')
    this.name = name 
}
const son = new Son('son');
console.log(son.name); // son
console.log(son.str); // '字符串'

优点

1. 解决了原型继承中子类实例共享父类引用属性的问题
2. 创建子类实例时，可以向父类传递参数

缺点?

只能继承父类实例的属性和方法，不能继承其原型上的属性和方法

2 原型继承

通过改造原型链,利用原型链的特征实现继承

让子构造函数的原型指向父构造函数的实例达到继承?

主要实现 继承方法

?关键代码 Student.prototype=new Person()

优点?

1. 简单 容易实现
2. 可以获取父构造函数上的属性与方法,原型上的方法,包括新增的方法

缺点

1. 当父构造函数的属性是引用类型时,一个子修改,其他子的值也会变
2. 给子原型添加方法时要在Student.prototype=new Person() 之后
3. ?创建子类实例时，无法向父构造函数传参

3?组合继承

是构造函数继承与原型继承的组合版本

function Person(name,age){
    this.name=name
    this.age=age
  }

    Person.prototype.sayHi=function(){
    console.log('灵活');
  }

  function Student(name,age,className){

   Person.call(this,name,age)
   this.className=className
  }


  
  const stu=new Student('zs',7,'1111')
  stu.sayHi()
  console.log(stu)

优点:解决了构造函数继承与原型继承的缺点

缺点:

1 调用了两次父类构造函数，生成了两份实例

2 原型上会有多余不必要的属性

?4?寄生组合式继承

主要借用了 Object.create(参数对象)

Object.create

1?会创建一个新对象,

2 并且将新对象的__proto__指向传入的参数

对象与组合继承区别不大只是将Student.prototype=new Person() 改造为Student.prototype=Object.create(Person.prototype)

  function Person(name,age){
    this.name=name
    this.age=age
  }

    Person.prototype.sayHi=function(){
    console.log('灵活');
  }

  function Student(name,age,className){

   Person.call(this,name,age)
   this.className=className
  }

  Student.prototype=Object.create(Person.prototype)
  
  const stu=new Student('zs',7,'1111')
  stu.sayHi()
  console.log(stu)

最完美的哈 就是实现有点复杂?

?5 es6-class实现继承 extends

首先了解一下class

class就是将原型与方法做了一个整合是一个语法糖

  // function Person(name,age){
      //   this.name=name
      //   this.age=age
      // }
      // Person.prototype.sayHi=function(){}
      // Person.prototype.jump=function(){}


      // class就是将原型与方法做了一个整合
    class Person{
      // 类似于之前的构造函数
      constructor(name,age){
        this.name=name
        this.age=age
      }

  //这俩个方法添加到Person.prototype上
      sayHi(){
        console.log('你好');
      }
      jump(){
        console.log('跳');
      }
    }

下面的class与上面注释调的函数是相等的

继承的实现如下 extends 会自动帮你完成继承

       class Teacher extends Person{
        // 如果没有提供构造函数,在继承时会默认自动借调父构造函数
       
      }
      const teacher=new Teacher()
      console.log(teacher);

当没有提供构造时 在继承时会默认自动自动借调父构造函数

?有构造函数必须有super()?

     class Teacher extends Person{
        // 如果没有提供构造函数,在继承时会默认自动借调父构造函数
        constructor(name,age,lesson){
          // 写了构造函数,就不会自动借调父构造函数
          super(name,age) // 触发调用父构造函数,进行实例化的属性初始化 
          this.lesson=lesson
        }
       wo(){
        console.log('你好wo');
      }
      }
      const teacher=new Teacher(18,12,12)
      teacher.sayHi()
      console.log(teacher);

?

?这个方法相对于寄生式组合更加便

extends会自动帮你完成原型链的改造 也就super()需要自己书写调用父构造函数