美文网首页
javaScript 实现继承

javaScript 实现继承

作者: webmrxu | 来源:发表于2019-11-03 18:25 被阅读0次

    继承是面向对象编程中三大特点之一。

    为了方便描述,下面文章中,P 指代父类,parent,C 指代子类,child。

    那么如何使用继承呢?java中可以用extends关键字来继承父类。
    如P类与C类,当写继承语句时, class C类 extends P类{ } 其中C类是子类,P类是父类。

    继承的特点

    • 子类拥有父类的特征
    • 子类可以重写父类方法
    • 子类可以重载父类方法

    继承的优点

    • 父类代码重用,DRY 原则
    • 子类的多态,同一个父类,但子类可以通过重写和重构实现多态
    • 子类的可扩展性高,子类可以添加自有属性和方法

    继承的缺点

    • 继承的层级深度导致代码调试和修改变的复杂,偶合度太高。
    • 继承导致父类修改变的困难,因为修改会影响子类

    javaScript 实现继承

    1 使用原型prototype实现继承

    子类原型指向父类实例

    function P() {
    }
    function C() {
    }
    C.prototype = new P()
    
    2 使用实例实现继承
    function P () {
    }
    function C() {
      let p = new P()
      p.name = 'tom'
      p.getName = function() {}
    }
    let c = new C() // 该实例为父类实例
    

    3 拷贝父类实例属性到子类原型中实现继承

    function P () {
    }
    function C() {
      var p = new P();
      for(var key in p){
        C.prototype[key] = p[key];
      }
      C.prototype.name = name || ‘Tom’;
      C.prototype.getName = function() {}
    }
    let c = new C()
    

    缺点:父类原型链断了

    4 构造继承
    function P () {
    }
    function C() {
       P.call(this) // 可以实现多继承
       this.name = 'tom'
       this.getName = function() {}
    }
    
    5 组合继承
    function P() {
    }
    function C() {
         P.call(this)
    }
    C.prototype = new P()
    C.prototype.constructor = C
    let c = new C()
    
    6 寄生组合继承

    待更新

    使用ES6 类实现继承
    class P {
        //构造函数
        constructor(props) {
          this.name = props.name
        }
    
        getName() {
          alert(this.name)
        }
     }
    
    //class继承
    class C extends P {
        //构造函数
        constructor(props) {
          //调用实现父类的构造函数
          super(props);
          this.name = props.name
        }
      }
    var c = new P({
        name: 'tom'
    })
    c.getName()  // tom
    
    

    总结

    • 在声明一个函数同时,就会生成一个空的对象,该函数的prototype指向该空对象。
    • 每个对象/实例对象都会有一个proto属性,指向该对象的构造函数原型,如果该对象不是使用new Fn() 生成的实例,那么该对象的proto 会指向Object.prototype。

    参考

    https://segmentfault.com/a/1190000017935023

    相关文章

      网友评论

          本文标题:javaScript 实现继承

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