JavaScript的继承

2021/8/21 11:05:56

本文主要是介绍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的继承的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程