美文网首页
继承方式

继承方式

作者: 巫路赛 | 来源:发表于2020-11-04 21:59 被阅读0次

es6的继承:

class Super{
    constructor(name){
        this.name=name;
    }

    getName(){
      return this.name;
  }
}

class Sub extends Super{}
let inst1 = new Sub('inst1'); 
let inst2 = new Sub('inst2');
// inst1和inst2的name属性不共享,getName方法是在原型链的上游,被共享

es6的继承写法简洁方便,十分直观。

es5的继承:(只推荐组合继承--最常用)

组合继承

function Super(name){
    this.name = name;
    this.con = function(){
    };
}
Super.prototype.getName = function(){}

function Sub(name, age){
    Super.call(this, name); //  这里等Sub实例化的时候在执行一次
    this.age = age;
}
Sub.prototype = new Super('父类'); // 父类执行了一次
// 思考为什么这里不直接 Sub.prototype = Super.prototype   ???
Sub.prototype.constructor = Sub;
 // 修复Sub原型constructor的指向,
var inst1 = new Sub('子类');

除了Super会执行2次损耗一点点性能,几乎完美的继承

Sub.prototype = Super.prototype 可以实现功能,去掉一层继承链,但是子类和父类共用了原型,这样子类在原型增加属性和方法,父类也会受影响,而且还修改了原型的constructor指向,所以不能这么干。

知道了努力的方向那么我们可以把
Sub.prototype = new Super('父类'); 修改为Sub.prototype = Object.create(Super.prototype)

var a = Object.create(b) ; a.__proto__ === b  //b需要是一个对象

就是说Sub.prototype不能直接等于Super.prototype,要引入一个中间商,a就是一个中间商,这个中间商不是以new Super创建出来的,这样Super.prototype上添加的属性inst1可以直接使用,而Sub.prototype === a ;在a上添加属性又不会影响到Super;完美的解决方案。

相关文章

  • 原型继承

    原型链的继承 1.第一种继承方式(原型链继承) 2.第二种继承方式(第二种继承方式) 3.第三种继承方式(组合继承)

  • 继承方式

    原型链继承: Child()的原型作为Parent()的实例来继承Parent()的方法属性 因为所有实例都继承原...

  • 继承方式

    1.简单原型链 优点:简单,易于实现缺点: 修改sub1.arr后sub2.arr也变了,因为来自原型对象的引用属...

  • 继承方式

    js继承的6种方式 想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一、原型链继承 重点:让新实例的原型等...

  • 继承方式

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

  • js对象的继承方式

    es6的继承方式 原型链继承方式 实例继承 此类继承方式比较简单直接 把 new的 对象直接付给新的变量就是可以了...

  • JavaScript如何实现继承?

    JS 中的继承主要分为两种:原型继承和非原型继承,非原型继承又分为寄生方式继承、借用或伪造构造函数方式继承、组合方...

  • 第十三章 类继承(4)c++的三种继承方式

    (四)c++的三种继承方式 c++有三种继承方式,分别是公有继承,私有继承和保护继承。 (1)公有继承 这是最常用...

  • js中的继承

    继承 对象冒充的方式实现继承 弊端:只能继承构造函数里面的属性/方法。原型链上的无法继承 原型链的方式实现继承 弊...

  • 前端 | JS | 面试中不得不知道的JS 继承的五种方式

    目录: JS中继承的概念 为什么要使用继承? 继承的第一种方式:原型链继承1 继承的第二种方式:原型链继承2 继承...

网友评论

      本文标题:继承方式

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