美文网首页
JS实现继承的方式

JS实现继承的方式

作者: 醉月梦仙 | 来源:发表于2020-09-08 08:32 被阅读0次

    假设有如下父类

    function Parent(name){
      this.name = name
      this.show = function(){
        console.log(this.name)
      }
    }
    Parent.prototype.age = 10
    

    1. 构造函数继承

    /*
    * 构造函数继承
    */
    function Child(name){
      Parent.apply(this, arguments)   //重点
    }
    
    var c = new Child('xiaoming')
    c.show()   // xiaoming
    console.log(c.age) // undefined
    
    • 重点:
      .call().apply()父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))
    • 特点:
      1. 只继承了父类构造函数的属性,没有继承父类原型的属性
      2. 可以继承多个构造函数属性(call多个)
      3. 在子实例中可向父实例传参
    • 缺点:
      1. 只能继承父类构造函数的属性,没有继承父类原型的属性
      2. 无法实现构造函数的复用(每次用每次都要重新调用)
      3. 每个新实例都有父类构造函数的副本,臃肿

    2. 原型继承

    /*
    * 原型继承
    */
    function Child(name){
      this.name = name
    }
    
    for(var i in Parent.prototype){
      Child.prototype[i] = Parent.prototype[i];  // 重点
    }
    
    let c = new Child('xiaoming')
    c.show()   // 报错,父构造函数无法继承
    console.log(c.age) // 10
    
    • 重点:遍历父类的原型赋值给子类
    • 优点:简单,方便,可以继承原型身上的方式和属性
    • 缺点:只能继承原型,不方便传参

    3. 原型链继承

    /*
    * 原型链继承
    */
    function Child(name){
      //无法向父类传参name
      this.name = name
    }
    
    Child.prototype = new Parent() //重点
    
    let c = new Child('xiaoming')
    c.show()   // xiaoming
    console.log(c.age) // 10
    
    • 重点:让新实例的原型等于父类的实例
    • 特点:
      既能继承原型,又能继承构造函数
    • 缺点:
      1. 新实例无法向父类构造函数传参
      2. 继承单一,无法多继承
      3. 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)

    4. 组合继承

    组合继承(组合原型链继承构造函数继承)(常用)

    /*
    * 组合继承
    */
    function Child(name){
      Parent.apply(this, arguments) //重点
    }
    
    Child.prototype = new Parent() //重点
    
    let c = new Child('xiaoming')
    c.show()   // xiaoming
    console.log(c.age) // 10
    
    • 重点:结合了两种模式的优点,传参和复用
    • 特点:
      1. 既能继承构造函数又能继承原型,方便传参,多继承
      2. 每个新实例引入的构造函数属性是私有的
    • 缺点:
      调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。

    5. 寄生继承(Object.create()的原理)

    /*
    * 寄生继承(Object.create()的原理)
    */
    function createChild(obj){
      function F(){}
      F.prototype = obj
      return new F()   // 返回一个实例,实例的原型是传入的obj
    }
    
    function create(obj, name){
      let child = createChild(obj)  // 重点
      child.name = name
      return child
    }
    
    let p = new Parent()  // 获取一个Parent实例
    let child = create(p, 'xiaoming')
    
    console.log(child.name) // xiaoming
    console.log(child.age) // 10 通过原型找到
    
    • 重点:就是给原型链继承外面套了个壳子
    • 优点:没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象
    • 缺点:没用到原型,无法复用

    6. ES6 class继承

    extends 使用关键字继承
    super 调用父类构造函数

    • 特点:
      ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。如果子类没有定义constructor方法,这个方法会被默认添加。也就是说,不管有没有显式定义,任何一个子类都有constructor方法。
    • 注意:
      在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super方法才能调用父类实例。
    • 优点:简单方便易操作,语法层面的继承,属性和方法都能继承,参数很好处理
    • 缺点:兼容性

    相关文章

      网友评论

          本文标题:JS实现继承的方式

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