zoukankan      html  css  js  c++  java
  • js类式继承

    将原型链作为实现继承的主要方法。其基本事项就是利用原型让一个引用类型继承另一个引用类型的属性和方法。

    实现的基本方式就是,让子类原型对象,等于父类对象的一个实例。

      *每个实例都包含指向一个指向原型对象的指针。
         * 我们让原型对象等于另一个类型的实例
         **/
    
        function SuperType(){
            this.property = true;
        }
    
        SuperType.prototype.getSuperValue = function(){
            return this.property;
        };
    
        function SubType(){
            this.subproperty = false;
        }
    
        //继承SuperType
    /*让SubType的原型等于SuperType的实例,SuperType对象的实例属性[[prototype]],又指向
    SuperType的原型.所以顺着原型链,SubType的实例可以访问,SuperType的原型。
    
    */
    /*所有函数的默认原型都是Object的实例。因此默认原型都会包含一个内部指挣,指向Object.prototype
    * */
        SubType.prototype = new SuperType();
    
        SubType.prototype.getSubValue = function(){
                return this.subproperty;
        };
    
        var instance = new SubType();
        alert(instance.getSuperValue());

    也会出现点小问题,如下例:

    unction Aaa(){
        this.name = [1,2,3];
    }
        Aaa.prototype.showName = function(){
            alert(this.name);
        };
        function Bbb(){ //子类
        }
        Bbb.prototype = new Aaa();
        Bbb.prototype.constructor = Bbb;
    
        var b1 = new Bbb();
        var b2 = new Bbb();
       b1.name.push(4);
       console.log(b2.name);  //结果b2里也有4

    改进方法:

     //要做属性和方法继承的时候。要分开继承
    function Aaa(){
        this.name = [1,2,3];
    }
        Aaa.prototype.showName = function(){
            alert(this.name);
        };
        function Bbb(){
            //继承父类的属性
            Aaa.call(this);
        }
    
        var F = function(){};     //创建这个da大F的作用是只继承方法,不继承属性
        F.prototype = Aaa.prototype;
        Bbb.prototype = new F();
        Bbb.prototype.constructor = Bbb;
    
        var b1 = new Bbb();   //然后你每次new Bbb()的时候, 都相当于重新new  Aaa(),所以是两个不同的对象,因此 this.name不会被影响。
        var b2 = new Bbb();
       b1.name.push(4);
       console.log(b2.name);  
  • 相关阅读:
    es6新增特性,数组的操作方法
    导航钩子有哪几种,如何将数据传入下一个点击的路由页面
    父组件如何获取子组件数据,子组件如何获取父组件数据,父子组件如何传值
    watch和computed的区别
    vue页面中定时器的使用
    table表格,顶端对齐
    计算机组成原理8-FPGA、ASIC、TPU、虚拟机
    vue中使用socket连接后台
    计算机组成原理7-CISC和RISC、GPU
    计算机组成原理6-流水线、多发射和超标量、SIMD、异常
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/8065599.html
Copyright © 2011-2022 走看看