美文网首页
JS继承方式总结

JS继承方式总结

作者: 雪中一匹狼 | 来源:发表于2018-08-07 13:35 被阅读0次

    1、构造函数绑定方式

    function A(){
            this.a = 1;
    }
    
    function B(){
            A.apply(this, arguments);
            this.b = 2;    
    }
    var b = new B();
    b.a; //1
    

    优点:简单易懂
    缺点:无法继承父类A的原型里的属性和方法

    2、原型模式

    function A(){
             this.a = 1;
    }
    
    A.prototype.aa = 11;
    
    function B(){
            his.b = 2;
    }
    
    B.prototype = new A();
    
    B.prototype.constructor = B;
    
    var b = new B();
    
    b.a; //1
    
    b.aa; //11
    

    优点:子类可以继承父类A的原型里的属性和方法

    缺点:创建子类实例需要多次创建父类对象,消耗内存

    3、直接继承prototype

    function A(){
        this.a = 1;
    }
    A.prototype.aa = 11;
    
    function B(){
        this.b = 2;
    }
    
    B.prototype = A.prototype;
    B.prototype.constructor = B;
    
    var b = new B();
    b.a; //1
    b.aa; //11
    

    优点:子类可以继承父类A的原型里的属性和方法,无需创建父类对象

    缺点:父类A的原型对象被修改,其constructor属性指向了子类B

    4、原型链继承

    function A(){
        this.a = 1;
    }
    A.prototype.aa = 11;
    
    function B(){
        A.apply(this, arguments);
        this.b = 2;
    }
    
    B.prototype.__proto__ = A.prototype;
    //或者
    //Object.setPrototypeOf(B.prototype, A.prototype);
    
    var b = new B();
    b.a; //1
    b.aa; //11
    

    优点:具有上述其他方式的优点

    缺点:需要高版本的浏览器支持

    相关文章

      网友评论

          本文标题:JS继承方式总结

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