美文网首页
javascript 对象继承

javascript 对象继承

作者: 水墨小龙虾 | 来源:发表于2017-03-14 14:08 被阅读0次
    构造函数
    var Book=function(id,name,price){
        var a=1;
        this.id=id;
        this.name=name;
        this.price=price;
        this.getPirce=function(){
            return this.price
        }
    }
    Book.prototype.display=function(){//展示这本书}
    var book1=new Book(1,'js设计',100);
    var book2=new Book(2,'nodejs指南',50);
    Book.isChinese=true //类静态公有属性(实例化对象不能访问)
    
    //打印book1
    //Book
        getPirce:function()
        id:1
        name:"js设计"
        price:100
        __proto__:Object
            constructor:function(id,name,price)
            display:function()
            __proto__:Object
    
    子类的原型对象-类式继承

    缺点,如果父类公有属性是引用类型如数组,就会被所有子类的实例公有,其中一个实例更改公有数据会直接影响到其他子类

    function Father(){
        this.fVal=true;
    }
    Father.prototype.getFatherVal=function(){
        return this.fVal
    }
    function Children(){
        this.cVal=false;
    }
    Children.prototype=new Father();
    Children.prototype.getChildVal=function(){
        return this.cVal
    }
    var instance=new Children();
    
    打印instance:
            cVal:false
            __proto__:Father
                fVal:true
                getChildVal:function()
                __proto__:Object
                    constructor:function Father()
                    getFatherVal:function()
                    __proto__:Object
    
    创建即继承-构造函数继承

    缺点:父类的原型方法不会被子类继承

    //申明父类
    function Father(id){
        //值类型共有属性
        this.id=id
        //引用类型共用属性
        this.books=['Javascript','nodejs','css']
    }
    Father.prototype.showBooks=function(){
        return this.books
    }
    //申明子类
    function Children(id){
        Father.call(this,id)   //call改变函数的作用环境,子类继承父类的共有属性和方法。
    }
    var instance1=new Children(10);
    var instance2=new Children(12);
    instance1.books.push('设计模式')
    console.log(instance1.id,instance1.books)  //10,["Javascript", "nodejs", "css", "设计模式"]
    console.log(instance1.id,instance2.books)  //12,["Javascript", "nodejs", "css"]
    instance1.showBooks() //TypeError
    
    组合继承

    缺点:构造函数式继承执行一遍父类的构造函数,子类原型的类方式继承又调用一次父类的构造函数

    //申明父类的构造函数
    function Father(id){
        //值类型共有属性
        this.id=id
        //引用类型共用属性
        this.books=['Javascript','nodejs','css']
    }
    //父类申明原型方法
    Father.prototype.getId=function(){
        console.log(this.id)
    }
    //申明子类
    function Children(id,price){
        //构造函数式继承父类id属性和books
        Father.call(this,id);
        //子类新增共用属性
        this.price=price
    }
    Children.prototype=new Father();
    Children.prototype.getPrice=function(){
        console.log(this.price)
    }
    
    var instance1=new Children(10,50.00)
    instance1.books.push('设计模式');
    
    var instance2=new Children(12,65.00);
    
    打印instance1
        id:10
        books:['Javascript','nodejs','css','设计模式']
        price:50,
        __proto__:Father
            id:undefind
            books:['Javascript','nodejs','css']
            getPrice:function()
            __proto__:Object
                constructor:function Father(id)
                getId:function()
                __proto__:Object
    
    洁净的继承者-原型式继承

    缺点:同类式继承

    function inhertObject(o){
        //过渡函数对象
        function F(){}
        //过渡对象原型继承父对象
        F.prototype=o
        //返回过渡对象的一个实例,该实例原型继承父对象
        return new F()
    }
    var books={
        name:'js book',
        alikebook:['css','html']
    }
    var book1=inhertObject(books);
    book1.name='ajax book'
    book1.alikebook.push('xml')
    
    var book2=inhertObject(books);
    book2.name='flash book'
    book2.alikebook.push('actionscript')
    
    终极组合继承
    function inhertObject(o){
            //过渡函数对象
            function F(){}
            //过渡对象原型继承父对象
            F.prototype=o
            //返回过渡对象的一个实例,该实例原型继承父对象
            return new F()
        }
        function inhertProto(children,father){
            //复制一份父类的原型副本保存在变量中
            var p=inhertObject(father.prototype)
            //修正因为改写子类导致子类的constructor熟悉被修改
            p.constructor=children;
            //修改子类的原型
            children.prototype=p;
        }
        //申明父类的构造函数
        function Father(id){
            //值类型共有属性
            this.id=id
            //引用类型共用属性
            this.books=['Javascript','nodejs','css']
        }
        //父类申明原型方法
        Father.prototype.getId=function(){
            console.log(this.id)
        }
        //申明子类
        function Children(id,price){
            //构造函数式继承父类id属性和books
            Father.call(this,id);
            //子类新增共用属性
            this.price=price
        }
        //Children.prototype=new Father();
        inhertProto(Children,Father);
        Children.prototype.getPrice=function(){
            console.log(this.price)
        }
    
        var instance1=new Children(10,50.00)
        instance1.books.push('设计模式');
    
        var instance2=new Children(12,65.00);
    
    打印instance1
            id:10
            books:['Javascript','nodejs','css','设计模式']
            price:50,
            __proto__:Father
                constructor:function Children(id,price)
                getPrice:function()
                __proto__:Object
                    constructor:function Father(id)
                    getId:function()
                    __proto__:Object
    

    相关文章

      网友评论

          本文标题:javascript 对象继承

          本文链接:https://www.haomeiwen.com/subject/qbocnttx.html