美文网首页
ES5、ES6继承

ES5、ES6继承

作者: caiyiii | 来源:发表于2021-03-29 11:26 被阅读0次

ES5、ES6继承方式

继承的目标:

  • 父类公有属性和方法为子类公有属性和方法
  • 父类私有属性和方法为子类私有属性和方法

1. ES5继承

  • 原型继承
  // 定义父类
  function Parent(){
    this.familyName = "Corleone"
  }

  Parent.prototype.skill = ()=>{
    return "保护家人"
  }

  // 定义子类
  function Child(){
    this.name = "Michael"
  }

  // 将子类原型指向父类实例
  Child.prototype = new Parent()
  Child.prototype.constructor = Child

  // 注意:定义子类原型方法要在改变原型指向之后再定义
  Child.prototype.ability = ()=>{
    return "有勇有谋"
  }

  let michey = new Child()
  console.log(michey.name, michey.familyName, michey.skill(), michey.ability())
  // Michael Corleone 保护家人 有勇有谋

原型继承是将子类原型指向父类实例从而继承父类公有和私有的属性、方法。缺陷是父类公有和私有都变成了子类公有。

  • .call() 寄生继承
  // 定义父类
  function Parent(){
    this.familyName = "Corleone"
  }

  Parent.prototype.skill = ()=>{
    return "保护家人"
  }

  // 定义子类
  function Child(){
    this.name = "Michael"
    // 将父类构造函数当做普通函数来执行,同时改变this 指向
    Parent.call(this)
  }

  // 注意:定义子类原型方法要在改变原型指向之后再定义
  Child.prototype.ability = ()=>{
    return "有勇有谋"
  }

  let michey = new Child()
  console.log(michey.name, michey.familyName, michey.skill(), michey.ability())
  // Michael Corleone 保护家人 有勇有谋

寄生继承是在子类构造函数内将父类构造函数当做普通函数执行,同时改变this 指向,指向子类完成继承。缺陷是父类的公有和私有属性、方法均为子类私有。

  • 组合式继承(.call() + Object.create)

Object.create() 方法创建一个空对象,第一个参数会把创建的空对象的__proto__指向传入的参数对象

  // 定义父类
  function Parent(){
    this.familyName = "Corleone"
  }

  Parent.prototype.skill = ()=>{
    return "保护家人"
  }

  // 定义子类
  function Child(){
    this.name = "Michael"
    // 将父类构造函数当做普通函数来执行,同时改变this 指向
    Parent.call(this)
  }

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

  // 注意:定义子类原型方法要在改变原型指向之后再定义
  Child.prototype.ability = ()=>{
    return "有勇有谋"
  }

  let michey = new Child()
  console.log(michey.name, michey.familyName, michey.skill(), michey.ability())
  // Michael Corleone 保护家人 有勇有谋

父类公有属性和方法为子类公有属性和方法,父类私有属性和方法为子类私有属性和方法

2. ES6类继承

  class Parent{
    constructor(name, generation){
      this.name = name
      this.generation = generation
    }
    info(){
      return `${this.name} Corleone,是第${this.generation}代教父`
    }
  }

  class Child extends Parent{
    constructor(name, generation, end){
      super(name, generation)
      this.end = end
    }
    skill(){
      return "除暴安良"
    }
  }

  let vito = new Child('Vito', 1, '黑')
  let michey = new Child('Michael', 2, '白')

相关文章

  • 构造函数

    es5 es6 继承

  • JavaScript的多态和封装

    在之前的文章中我们已经介绍了JavaScript的继承包含了ES5和ES6的版本。 ES5继承 传送门 ES6继承...

  • ES5 和 ES6 继承比较:

    ES5构造函数和继承: ES6构造函数和继承:

  • 用ES5和ES6实现继承

    ES5 prototype实现继承 ES6 写法

  • es5 es6静态方法、类、单例模式

    es5中的类和静态方法 es5继承 es6中的类 es6里面的继承 es6里面的静态方法 es6单例模式 转载:h...

  • 继承方式

    es6的继承: es6的继承写法简洁方便,十分直观。 es5的继承:(只推荐组合继承--最常用) 组合继承 除了S...

  • 前端常见面试题(八)@郝晨光

    ES5/ES6 的继承除了写法以外还有什么区别? ES5寄生组合式继承(只是列举一个方法,ES5继承还有很多实现方...

  • JS 继承的两种写法

    ES5 ES6 两种方法都能实现继承,本质上ES6继承是ES5继承的语法糖,会更简单些,但是假如要添加一个非函数的...

  • JavaScript的继承

    前言 忘了整理的理一理。 ES5继承 先不涉及ES6的继承,后面会涉及。这里主要是ES5的继承: 原型链继承 构造...

  • ES5和ES6中继承的不同之处

    ES5和ES6中继承的不同之处 1、JS中视没有继承的,不过可以通过构造函数或是原型等实现继承,ES5实现继承的方...

网友评论

      本文标题:ES5、ES6继承

      本文链接:https://www.haomeiwen.com/subject/datbhltx.html