• ECMAScript面向对象(三)——之继承


    1.原型链方式

    主要利用原型对象,让引用类型A的的prototype属性指向另一个引用类型的实例,从而继承另一个引用类型的属性和方法。

    问题
    1.无法在创建子类的时候向父类的构造函数传递参数
    2.父类中有引用类型的属性的话,只要子类实例中有操作,所有的都会受到影响

     function Annimal(c){
         this.annimalClass=c;
         this.eat=function(){
             console.log('eatting.....');
         };
       this.runing=function(){
           console.log('runing.............');
       };
     }
    
    // sub
    function Felidae(ftype){
        this.Ftype=ftype;
    }
    
    // 先继承
    Felidae.prototype=new Annimal("Felidae");
    
    // 再添加或重写父类的方法
    Felidae.prototype.like=function(h){
        console.log(h);
    }
    
    // 使用
    
    var cat=new Felidae("cat");
    
    // 从父类继承了runing方法
    cat.runing();  

      2.借用构造函数

    利用函数的父函数call方法实现继承。

    问题:
    1.子类可以继承父类在构造函数中定义的属性和方法,但是方法无法复用 2.但是父类在原型中定义的属性和方法对子类是不可见的
    // 借用构造函数
    function SuperType(){
        this.arr=[1,2,3];
    }
    
    SuperType.prototype.show=function(){
        console.log(this.arr);
    }
    
    function SubType(){
        SuperType.call(this);
    }
    
     var sub1=new SubType();
     sub1.arr.pop();
     console.log(sub1.arr);//[1,2]
     var sub2=new SubType();
      sub2.arr.push(20);
     console.log(sub2.arr);//[1,2,3,20]
    
     // 子类可以继承父类在构造函数中定义的属性和方法
     // 但是父类在原型中定义的属性和方法对子类是不可见的
     sub1.show();//sub1.show is not a function
    
     var sup1=new SuperType();
     sup1.show();//[1,2,3]

    3.组合继承(原型链+构造)

    function SuperType(fname){
        this.fileName=fname;
        this.arr=[1,2,3];
    }
    
    SuperType.prototype.show=function(){
        console.log(this.arr);
    }
    
    // 继承
    function SubType(fname,size){
        SuperType.call(this,fname);//构造函数
        this.size=size;
    }
    
    // 原型继承
    SubType.prototype = new SuperType();
    SubType.prototype.constructor=SubType;
    //添加新方法
    SubType.prototype.showF=function(){
     console.log("name:"+this.fileName+"
    "+"size:"+this.size+"kb");
    };
    
    var sub1=new SubType("todo.txt",512);
       sub1.show();
       sub1.showF();
    
      console.log(sub1 instanceof SubType);//true
      console.log(sub1 instanceof SuperType);//true
      console.log(sub1 instanceof Object);//true

    4.原型式继承

    使用一个已存在的实例对象作为,子类的原型对象。

    // 原型式继承
    // 用于在一个已有的对象实例上拓展新的方法
     function object(o){
        function F(){}
         F.prototype=o;
         F.prototype.show=function(){
             for ( var agr in o){
                 console.log(agr);
             }
         }
         return new F();
     }
     var p={
         arr:[1,2,3],
         name:"done"
     }
    
    var p1=object(p);
     p1.show();
    
     var p2=object(p);
     p2.arr.pop();
     console.log(p2.arr);
     console.log(p1.arr);

    5.寄生继承

    // 寄生式继承
     function createAn(o){
    
         var onew = object(o);//沿用上面的原型式继承的object函数
         onew.show1=function(){//添加自己的方法
             console.log("show1......");
         };
    
         return onew;
     }
    
    var a1=createAn(p);
        a1.show1();

    6.寄生组合继承(寄生+构造+原型链)

    使用寄生式继承来继承超类的原型,然后将结果指定给子类的原型。

    // 寄生组合式继承
    //与原型构造组合类似,知识这里使用了一个寄生函数来实现原型链继承
    //
    // 用寄生的方式将【原型构造组合】下面的包装起来,使用的时候用下面的函数替换掉组合继承里面的代码即可
    // SubType.prototype = new SuperType();
    // SubType.prototype.constructor=SubType;
    
     inheritProto(SubType,SuperType)
     {
          var proto=object(SuperType.prototype);//用父类的原型创建一个新的对象
           proto.prototype.constructor=SubType;
           SubType.prototype=proto;
     }
  • 相关阅读:
    机器学习技法笔记:16 Finale
    机器学习技法笔记:15 Matrix Factorization
    机器学习技法笔记:14 Radial Basis Function Network
    机器学习技法笔记:13 Deep Learning
    机器学习技法笔记:Homework #7 Decision Tree&Random Forest相关习题
    [HTML] 条件注释判断浏览器
    [ligerUI] grid行编辑示例
    [ligerUI] grid封装调用方法
    [MVC.NET] Asp.Net MVC3 简单入门第一季
    [HTML5] 飞龙天惊-HTML5学习系列
  • 原文地址:https://www.cnblogs.com/fanglylu/p/6824564.html
Copyright © 2020-2023  润新知