zoukankan      html  css  js  c++  java
  • 4.Javascript中实现继承的几种方法及其优缺点

    要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链;每一个构造函数都有prototype属性(显示原型),用来显示修改对象的原型,实例.__proto__=构造函数.prototype=原型。原型链的特点就是:通过实例.__proto__查找原型上的属性,从子类一直向上查找对象原型的属性,继而形成一个查找链即原型链。

    1.原型链继承

        我们使用原型继承时,主要利用sub.prototype=new super,这样连通了子类-子类原型-父类。

     1 //父类,带属性  
     2 function Super(){  
     3     this.flag = true;  
     4 }  
     5 //为了提高复用性,方法绑定在父类原型属性上  
     6 Super.prototype.getFlag = function(){  
     7     return this.flag;  
     8 }  
     9 //来个子类  
    10 function Sub(){  
    11     this.subFlag = false;  
    12 }  
    13 //实现继承  
    14 Sub.prototype = new Super;  
    15 //给子类添加子类特有的方法,注意顺序要在继承之后  
    16 Sub.prototype.getSubFlag = function(){  
    17     return this.subFlag;  
    18 }  
    19 //构造实例  
    20 var es5 = new Sub;

    缺点:构造函数原型上的属性在所有该构造函数构造的实例上是共享的,即属性没有私有化,原型上属性的改变会作用到所有的实例上。

    2.构造函数继承

       在构造子类构造函数时内部使用call或apply来调用父类的构造函数

    function Super(){  
        this.flag = true;  
    }  
    function Sub(){  
        Super.call(this)  //如果父类可以需要接收参数,这里也可以直接传递  
    }  
    var obj = new Sub();  
    obj.flag = flase;  
    var obj_2 = new Sub();  
    console.log(obj.flag)  //依然是true,不会相互影响  

    优缺点:实现了属性的私有化,但是子类无法访问父类原型上的属性。

    3.组合继承

       利用构造函数和原型链的方法,可以比较完美的实现继承

    function Super(){  
        this.flag = true;  
    }  
    Super.prototype.getFlag = function(){  
        return this.flag;     //继承方法  
    }  
    function Sub(){  
        this.subFlag = flase  
        Super.call(this)    //继承属性  
    }  
    Sub.prototype = new Super;  
    var obj = new Sub();  
    Sub.prototype.constructor = Sub;  
    Super.prototype.getSubFlag = function(){  
        return this.flag;  
    }

    注:

    这里还有个小问题,Sub.prototype = new Super; 会导致Sub.prototype的constructor指向Super;然而constructor的定义是要指向原型属性对应的构造函数的,Sub.prototype是Sub构造函数的原型,所以应该添加一句纠正:Sub.prototype.constructor = Sub;

    4.寄生继承

    即将sub.prototype=new super改为sub.prototype=Object.creat(supper.prototype),避免了组合继承中构造函数调用了两次的弊端。

    转:https://blog.csdn.net/qq_25461519/article/details/81060130

  • 相关阅读:
    nginx路径详解
    负载均衡
    http中消息头的安全配置及工作原理
    Tomcat的ErrorPage实现原理分析及阀门ErrorReportValve
    Tomcat中Logger组件
    NIO在Tomcat中的应用
    vue中强制生效css样式
    k8s中的Ingress
    xhr.withCredentials与 CORS 什么关系
    Redis Cluster集群
  • 原文地址:https://www.cnblogs.com/xiaole9924/p/11836609.html
Copyright © 2011-2022 走看看