• js 中的五种继承方法


    正式发布的ES6中已经封装实现了其他OO语言中的继承形式,Class Extends,这里主要记录js的原型继承和借用构造函数继承

    一、原型链继承

    function Super(){
       
         
         
        this.name="小明";
    }
    Super.prototype.sayName = function(){
       
         
         
        alert(this.name)
    };
    function Sub(){
       
         
         }
    
    Sub.prototype = new Super();
    var instance = new Sub();
    instance.sayName();//小明
    

    原型链继承的问题

    //当超类中包含引用类型属性值时,其中一个子类的多个实例中,只要其中一个实例引用属性只发生修改一个修改,其他实例的引用类型属性值也会立即发生改变
    //原因是超类的属性变成子类的原型属性
    function Super(){
       
         
         
    this.name="小明";
        this.friends = ['小红','小强'];
    }
    Super.prototype.sayName = function(){
       
         
         
        alert(this.name)
    };
    function Sub(){
       
         
         }
    
    Sub.prototype = new Super();
    var instance1 = new Sub();
    var instance2 = new Sub();
    instance1.friends.push('张三');
    console.log(instance1.friends);//["小红", "小强", "张三"]
    console.log(instance2.friends);//["小红", "小强", "张三"]
    

    二、借用构造函数继承

    function Super(){
       
         
         
    this.name="小明";
        this.friends = ['小红','小强'];
    }
    Super.prototype.sayName = function(){
       
         
         
        alert(this.name)
    };
    function Sub(){
       
         
         
        Super.call(this);
    }
    
    var instance1 = new Sub();
    var instance2 = new Sub();
    instance1.friends.push('张三');
    console.log(instance1.friends);//["小红", "小强", "张三"]
    console.log(instance2.friends);//["小红", "小强"]
    

    借用构造函数的问题

    单独使用借用构造函数,没办法继承超类中的原型属性和方法

    三、组合式继承(原型继承+借用构造函数继承)

    组合式继承也是实际开发中最常用的继承方式

    function Super(){
       
         
         
    this.name="小明";
        this.friends = ['小红','小强'];
    }
    Super.prototype.sayName = function(){
       
         
         
        alert(this.name)
    };
    function Sub(){
       
         
         
        Super.call(this);
    }
    
    Sub.prototype = new Super();
    var instance1 = new Sub();
    var instance2 = new Sub();
    instance1.friends.push('张三');
    console.log(instance1.friends);//["小红", "小强", "张三"]
    console.log(instance2.friends);//["小红", "小强"]
    instance1.sayName();//小明
    instance2.sayName();//小明
    

    组合式继承的问题

    //组合式继承中,超类的构造函数将被调用两次
    function Super(){
       
         
         
    this.name="小明";
        this.friends = ['小红','小强'];
    }
    Super.prototype.sayName = function(){
       
         
         
        alert(this.name)
    };
    function Sub(){
       
         
         
        Super.call(this);//第二次调用
    }
    
    Sub.prototype = new Super();//第一次调用
    var instance = new Sub();
    

    四、寄生式继承

    //在主要考虑对象而不是自己定义类型和构造函数的情况下,寄生式继承是一种有用的模式,但无法做到函数的复用    
    function createAnother(original){
       
         
         
        var clone = Object(original);//创建一个新对象,original的副本
        clone.sayName = function(){
       
         
          //对象的增强,添加额外的方法
            alert('hi');
        }
        return clone;
    }
    var person = {
        name:'小明',
        friends:['小红','小强']
    }
    var person1 = createAnother(person);
    var person2 = createAnother(person);
    person1.friends.push('张三');
    console.log(person.friends);//["小红", "小强", "张三"]
    console.log(person1.friends);//["小红", "小强", "张三"]
    console.log(person2.friends);//["小红", "小强", "张三"]
    

    寄生组合式继承

    //寄生组合式继承解决了组合式继承调用两次超类构造函数的问题
    function inheritPrototype(sub,superr){
       
         
         
    var prototype = Object.create(superr.prototype);//ES5中创建对象副本的方法
        prototype.constructor = superr; //弥补重写原型失去的默认constructor属性
        sub.prototype = prototype;
    }
    function Super(name){
       
         
         
        this.name = name;
        this.friends = ['小红','小强'];
    }
    Super.prototype.sayName = function(){
       
         
         
        alert(this.name);
    }
    function Sub(name){
       
         
         
        Super.call(this,name);
    }
    inheritPrototype(Sub,Super);
    var person1 = new Sub('小明');
    var person2 = new Sub('小华');
    person1.friends.push('张三');
    console.log(person1.friends);//["小红", "小强", "张三"]
    console.log(person2.friends);//["小红", "小强"]
    console.log(person1.sayName());//小明
    console.log(person2.sayName());//小华
    
  • 相关阅读:
    剑指offer-第二章排序之年龄排序
    剑指offer—第二章算法之快速排序
    java小程序(课堂作业02)
    关于java的一些小知识(课程作业01)
    Java从命令行接受多个数字并求和
    《大道至简》第一章读后感及伪代码
    大道至简读后感
    GCPC 2013_A Boggle DFS+字典树 CSU 1457
    Aizu 2155 Magic Slayer 背包DP
    UVALive 4255 Guess
  • 原文地址:https://www.cnblogs.com/hustshu/p/15594644.html
Copyright © 2020-2023  润新知