• javascript 高级编程系列


    1. 原型链继承 (缺点:子类继承父类的引用类型的属性值会在各个实例中共享,创建子类实例时无法向父类构造函数传递参数)

    // 定义父类构造函数
    function SuperClass(father, mother){
        this.father = father;
        this.mother = mother;
        this.brothers = ['jack', 'mike'];
    }
    // 给父类中添加方法
    SuperClass.prototype.getFather = function(){
        return this.father;
    }
    
    // 定义子类构造函数
    function SubClass(name, age){
        this.name = name;
        this.age = age;
    }
    // 继承父类
    SubClass.prototype = new SuperClass('perter','nancy');
    
    // 添加新方法
    SubClass.prototype.getName = function(){
        return this.name;
    };
    // 重写父类中的方法
    SubClass.prototype.getFather = function(){
        return null;  
    }
    
    // 实例化子类
    var obj = new SubClass('leon', 30);

     2. 借用构造函数继承(优点:子类继承的数据不会共享,可以在实例化子类时对父类进行传参;缺点:方法需要在构造函数中定义,以及重写)

    // 定义父类构造函数
    function SuperClass(father, mother){
        this.father = father;
        this.mother = mother;
        this.brothers = ['jack', 'mike'];
        this.getFather = function(){  // 需要子类继承的方法一定得在构造函数中定义
            return this.father;
        }
    }
    
    // 定义子类构造函数, 并调用父构造函数实现继承
    function SubClass(name, age,father, mother){
        SuperClass.call(this, father, mother); 
        this.name = name;
        this.age = age;
        this.getFather = function(){  // 只能在构造函数中重写父类中的方法  
            return null;
        }
    }
    // 添加新方法
    SubClass.prototype.getName = function(){
        return this.name;
    };

    // 实例化子类
    var obj = new SubClass('leon', 30, 'peter', 'nancy');

     3. 组合继承 (融合原型链继承与借用构造函数继承)

    // 定义父类构造函数
    function SuperClass(father, mother){
        this.father = father;
        this.mother = mother;
        this.brothers = ['jack', 'mike'];
    }
    // 添加父类方法
    SuperClass.prototype.getFather = function(){ 
        return this.father;
    };
    
    // 定义子类构造函数, 并调用父构造函数实现属性继承
    function SubClass(name, age,father, mother){
        SuperClass.call(this, father, mother); 
        this.name = name;
        this.age = age;
    }
    
    // 通过实例化父类作为子类原型对象,实现方法继承
    SubClass.prototype = new SuperClass();
    SubClass.prototype.constructor = SubClass;
    
    // 添加新方法
    SubClass.prototype.getName = function(){
        return this.name;
    };
    // 重写父类中的方法 SubClass.prototype.getFather = function(){ return null; }; // 实例化子类 var obj = new SubClass('leon', 30, 'peter', 'nancy');

    4. 原型式继承 (基于一个给定的对象,创建一个相似的对象, 相当于es5中的Object.create() 方法)

    // 实现继承的函数
    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    
    // 定义基础对象
    var baseObj = {
        name: 'john',
        age: 20,
        getName: function(){
           return this.name;
        }
    }
    
    // 创建新对象
    var newObj = object( baseObj);
    newObj.name = 'leon';
    newObj.getName();

    5. 寄生式继承 (封装原型式继承,并为新创建对象添加新的属性和方法,缺点:新添加的方法无法共享)

    // 实现继承的函数
    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    
    // 封装继承过程的函数
    function createObj(obj){
        var newObj = object(obj);
        newObj.getAge = function(){
             return this.age;
        }
        return newObj;
    }
    
    // 定义基础对象
    var baseObj = {
        name: 'john',
        age: 20,
        getName: function(){
           return this.name;
        }
    }
    
    // 创建新对象
    var obj = createObj( baseObj);
    obj.name = 'leon';
    obj.getName();
    obj.getAge();

    6. 寄生组合式继承 (改进组合式继承,将原型方法的继承改为利用寄生式继承的方法进行继承,避免了在prototype上产生不必想的属性值,以及多次调用父类构造函数的情况)

    // 定义父类构造函数
    function SuperClass(father, mother){
        this.father = father;
        this.mother = mother;
        this.brothers = ['jack', 'mike'];
    }
    // 添加父类方法
    SuperClass.prototype.getFather = function(){ 
        return this.father;
    };
    
    // 定义子类构造函数, 并调用父构造函数实现属性继承
    function SubClass(name, age,father, mother){
        SuperClass.call(this, father, mother); 
        this.name = name;
        this.age = age;
    }
    
    // 继承原型的函数
    function inheritPrototype(SubClass, SuperClass){
        var prototype = object(SuperClass.prototype);
        prototype.constructor = SubClass;
        SubClass.prototype = prototype;
    }
    
    // 通过调用原型继承函数,实现方法继承
    inheritPrototype(SubClass, SuperClass);
    
    // 添加新方法
    SubClass.prototype.getName = function(){
        return this.name;
    };
    
    // 重写父类中的方法
    SubClass.prototype.getFather = function(){  
        return null;
    };
    
    // 实例化子类 
    var obj = new SubClass('leon', 30, 'peter', 'nancy');
  • 相关阅读:
    34.页面刷新 Walker
    32.标题栏图标 Walker
    44.相对路径 Walker
    白乔原创:实战软件DIY
    白乔原创:VC之美化界面篇
    白乔原创:在公司里,你会是什么样的程序员?
    白乔原创:程序员的路该怎么走?
    白乔原创:VC之控件篇
    08年5月份培训的照片一张
    关于resin的认证框架
  • 原文地址:https://www.cnblogs.com/xiaodi-js/p/5927800.html
Copyright © 2020-2023  润新知