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

    1.对象继承

    (1)把父亲对象赋值给孩子对象的原型

    //要继承的对象
    var parent = {name:'Lily',age:23};
    //新对象
    var child = object(parent);
    
    function object(P){
        function F(){}
        F.prototype = P;
        return new F();
    }
    console.log(child.name);//Lily

    (2) 使用ES5的Object.create(object,propertiesObject)方法代替上面的object函数

    //要继承的对象
    var parent = {name:'Lily',age:23};
    //新对象
    var child = Object.create(parent);
    
    console.log(child.name);//Lily

    (3)把父亲对象的属性复制给子对象

    a.浅拷贝

    //浅拷贝函数
    function extend(parent,child){
        var i;
        child = child || {};
        for(i in parent){
            if(parent.hasOwnProperty(i)){
                child[i] = parent[i];
            }
        }
        return child;
    }
    var parent = {name:'Lily',info:{age:23}};
    var child = extend(parent);
    console.log(child.info.age);//23
    child.info.age = 30;
    console.log(child.info.age);//30
    console.log(parent.info.age);//30

    b.深拷贝

            //深拷贝函数
            function deepExtend(parent,child){
                var i,
                    toStr = Object.prototype.toString,
                    asStr = "[object Array]";
                child = child || {};
                for(i in parent){
                    if(parent.hasOwnProperty(i)){
                        if(typeof parent[i] === 'object'){
                            child[i] = (toStr.call(parent[i]) === asStr) ? [] : {};
                            deepExtend(parent[i],child[i]);
                        }else{
                            child[i] = parent[i];
                        }
                    }
                }
                return child;
            }
            var parent = {name:'Lily',info:{age:23}};
            var child = deepExtend(parent);
            console.log(child)
            console.log(child.info.age);//23
            child.info.age = 30;
            console.log(child.info.age);//30
            console.log(parent.info.age);//23            

     (4)借助方法

         var parent = {
                name: 'Lily',
                age: 23
            };
            var child = {
                getInfo: function(){
                    console.log('name:'+this.name+';age:'+this.age);//name:Lily;age:23
                }
            }
            child.getInfo.apply(parent);

     2.类式继承

    (1)子对象的原型指向new的父对象

    此方式只是通过原型链继承new出来的对象,子对象自己不能拥有和父函数一样的属性。

            function Parent(){
                this.name = 'Lily';
                this.age = 23;
            }
            function Child(){
    
            }
            Child.prototype = new Parent();
            var child = new Child();
            console.log(child.name);//Lily        

    (2)使用构造函数

    子对象只是拥有父函数的属性,而不能继承父函数的原型。

         function Parent(){
                this.name = 'Lily';
                this.age = 23;
            }
            function Child(){
                Parent.apply(this);
            }
            var child = new Child();
            console.log(child.name);//Lily

    (3)把上面的(1)和(2)结合使用

    子对象自己拥有父函数的属性,同时也会继承父函数的原型,但是从父函数直接继承过来的自己的属性与new的父对象的属性重合。

         function Parent(){
                this.name = 'Lily';
                this.age = 23;
            }
            Parent.prototype.run = function(){
                console.log('running');
            }
            function Child(){
                Parent.apply(this);
            }
            Child.prototype = new Parent();
            var child = new Child();
            console.log(child.name);//Lily
            child.run();//running

    (4)把Parent的原型赋值给Child的原型

         function Parent(){
                this.name = 'Lily';
                this.age = 23;
            }
            Parent.prototype.run = function(){
                console.log('running');
            }
            function Child(){
                Parent.apply(this);
            }
            Child.prototype = Parent.prototype;
            var child = new Child();
            console.log(child.name);//Lily
            child.run();//running

    [1]javascript模式

  • 相关阅读:
    golang html/template template.ParseFiles(filenames) 相对路径问题
    深入理解jvm jdk1,7(19)
    深入理解jvm jdk1,7(18)
    深入理解jvm jdk1,7(17)
    深入理解jvm jdk1,7(16)
    深入理解jvm jdk1,7(15)
    深入理解jvm jdk1,7(14)
    hugo 制作个人博客总结
    后台管理系统总结
    pageHelper(分页插件的使用)
  • 原文地址:https://www.cnblogs.com/fe-huahai/p/5656864.html
Copyright © 2011-2022 走看看