JavaScript的继承

本文主要是介绍JavaScript的继承，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

写在前面

今天开始，记录自己的生活和心得，包括生活、工作、学习等等。
养成习惯从今天开始！！！
2021年8月21日

此处为js继承，这一部分是最近学习，算是懂了一些继承相关的知识，记录下来，后续继续完善。
死记硬背真不是人干的事情，多学习多理解！

父类

  function Parent(hobby) {
    this.hobby = hobby

    this.getHobby = function() {
      return this.hobby
    }

    this.getAge = function() {
      return this.age
    }
  }
  Parent.prototype.age = '20'

一、原型继承

原理：子类的原型指向父类的实例
劣势：
1）不能实现super，不能传值给父类
2）来自父类原型对象的所有属性被所有实例共享

  function Child() {}

  Child.prototype = new Parent()
  Child.prototype.constructor = Child
  let child1 = new Child()
  let child2 = new Child()
  Parent.prototype.age = '19'

  console.log(child1.getAge(), child2.getAge()) // 19 19
  console.log(child1 instanceof Child) // true
  console.log(child2 instanceof Parent) // true

二、构造函数继承

原理： 在子类中执行父类的构造函数并改变父类的指针指向
劣势：
1）子类不能继承父类原型链上的属性， 只能继承父类构造函数的属性
2）无法实现父类构造函数的复用

 function Child(hobby) {
    Parent.call(this, hobby)
  }

  let child1 = new Child(['打乒乓球'])
  let child2 = new Child(['打篮球'])


  console.log(child1.getHobby(), child2.getHobby()) // ["打乒乓球"] ["打篮球"]
  console.log(child1 instanceof Child, child1 instanceof Parent) // true false
  console.log(child1.age) // undefined 

三、组合继承

原理： 在子类中执行父类的构造函数并改变父类的指针指向，并将子类的原型指向父类的实例
劣势：
1）调用了两次父类构造函数，生成了两份实例
2）每创建一个子类的实例时候，父类都要被new一次，占内存

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

  let child1 = new Child(['打乒乓球'])
  let child2 = new Child(['打篮球'])


  console.log(child1.getHobby(), child2.getHobby()) // ["打乒乓球"] ["打篮球"]
  console.log(child1 instanceof Child, child1 instanceof Parent) // true true
  console.log(child1.age) // 20 

四、寄生式继承

原理： 在子类中执行父类的构造函数并改变父类的指针指向，并将子类的原型指向父类的原型
劣势：
1）在子类的原型上增加属性，会影响到父类的原型

  Child.prototype = Parent.prototype
  Child.prototype.constructor = Child

  let child1 = new Child(['打乒乓球'])
  let child2 = new Child(['打篮球'])


  console.log(child1.getHobby(), child2.getHobby()) // ["打乒乓球"] ["打篮球"]
  console.log(child1 instanceof Child, child1 instanceof Parent) // true true
  console.log(child1.age) // 20
  Child.prototype.school = '衡阳一中'

  console.log((new Parent).school)  // 衡阳一中

五、寄生式组合继承

原理： 在子类中执行父类的构造函数并改变父类的指针指向，并将子类的原型指向父类的拷贝原型上
重点Child.prototype = Object.create(Parent.prototype)

Child.prototype = Object.create(Parent.prototype)
  Child.prototype.constructor = Child

  let child1 = new Child(['打乒乓球'])
  let child2 = new Child(['打篮球'])


  console.log(child1.getHobby(), child2.getHobby()) // ["打乒乓球"] ["打篮球"]
  console.log(child1 instanceof Child, child1 instanceof Parent) // true true
  console.log(child1.age) // 20 

  Parent.prototype.name = '李斯'
  console.log(child1.name, child2.name)
  Child.prototype.school = '衡阳一中'

  console.log((new Parent).school)  // undefined

六、类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
    }

    getAge() {
      return this.age
    }
  }

  let child1 = new Child('张三', 19)
  console.log(child1.getName(), child1.getAge())  // 张三 19
  console.log(child1 instanceof Parent) // true

  let child2 = new Child('张四', 16)
  console.log(child2.getName(), child2.getAge()) // 张四 16

这篇关于JavaScript的继承的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！