JS高级继承方法

前言:

    上篇文章说了下,原型链继承    临时构造器继承!
    下面我们来说说继承其它的方法例如:属性拷贝,对象之间继承……等。
一、属性拷贝

    属性拷贝也是继承的一种方式。属性拷贝是子对象会继承父对象原型链上所有的自身属性。但是,属性拷贝有一个问题,该方法只针对于对于基本数据类型有效,JS中对象的传递大多数是引用传递,仅仅是传递对象的地址,子对象修改, 父对象中也相应的会改变。
如下图:

属性拷贝2.png

属性拷贝代码:

function extend2(Child,Parent){
            var c = Child.prototype;
            var p = Parent.prototype;
            // 循环遍历 Parent中的属性,复制给Child
            for(var i in p){
                c[i] = p[i];
            }
            // uber  实现子级属性能找到父级的属性
            Child.uber = Parent.prototype;
        }

例:

function Person(){}
        Person.prototype.age = 0;
        Person.prototype.description = "人类";
        Person.prototype.hoby = ["权利","金钱"];
        Person.prototype.say = function(){
            return "我的年龄" + this.age;
        };
function Student(){}
        // 实现继承关系
        extend2(Student,Person);
        Student.prototype.description = "学生";
       // 实例化一个学生对象
        var stu = new Student();
        stu.hoby.pop();
        console.log(stu.description);
        console.log(stu.hoby);

        var stu1 = new Person();    
        console.log(stu1.description);
        console.log(stu1.hoby);

就代码而言,需要更改constructor属性吗? 答案:当然不用 。
通过extend2(Student,Person);代码,所以Student中没有的属性都可以从Person中拷贝过来,因此这就是属性拷贝。但是有一个问题就是如果你修改Student中的方法、对象、数组。那就会把Person中的也改掉,所以这种方法也属于浅拷贝。这个问题一会会在深拷贝中解决。

二.对象之间的继承

到目前来说,我们都是通过构造函数实现的继承关系,其实,我们完全可以不使用构造函数就可以实现继承关系直接使用对象完成继承关系的建立。

对象代码:
function extend3(parent,child){
         // 如果实参第二个参数传递了,那么child就是实参的值
         // 如果实参第二个参数没有传递,那么child就是个空对象
            child = child || {};
            for(var i in paren  ){
                child[i] = parent[i];
            }
            child.uber = parent;
            return child;
        }

例:

var per = {
            description:"人类",
            age:0,
            hoby:["权利","金钱"],
            say:function(){
                return this.age;
            }   
        };

function Student(){}
var stu = new Student();
//建立继承关系(让一个已知的对象继承自per对象)
        extend3(per,stu);
        stu.description = "学生";
        console.log(stu.age);

        stu.hoby.pop();      
        console.log(stu.hoby);
        console.log(per.hoby);

        // 子对象访问父对象中的description属性
        console.log(stu.uber.description);

        // 创建一个继承per对象的对象
        var t = extend3(per);
        console.log(t.description);

对象继承也属于浅拷贝。对象继承也会有一个与属性拷贝类似的bug,也会用深拷贝来解决!!!

深拷贝:内存拷贝,将内存完整的拷贝一份
浅拷贝:引用拷贝,只复制对象地址
说了这么多方法,深拷贝终于来了!!!!

三、深拷贝

        function  deepCopy(parent,child){
            child = child || {};
            // 遍历父对象属性
            for(var i in parent){
                // 判断是否是自身属性
                if(parent.hasOwnProperty(i)){
                     if(/*是对象类型*/typeof parent[i] === "object"){
                        // 判断是属性是否是数组([])还是对象({})
                        child[i] = Array.isArray(parent[i])?[]:{};
                        //把parent[i]里的属性赋值给child[i]里面去
                        deepCopy(parent[i],child[i]);
                    }else{
                        // 基本数据类型
                        child[i] = parent[i];
                    }
                }
            }
            return child;
        }
        var per = {
            description:"人类",
            age:0,
            hoby:["权利","金钱"],
            say:function(){
                return this.age;
            }   
        };
        // 对象t继承自对象per
        var t = deepCopy(per);
        t.hoby.pop();
        console.log(t.hoby);
        console.log(per.hoby);
        console.log(t.description);

用深拷贝就可以看出如果修改方法、数组、对象就不会对父对象产生变化。
四、原型继承与属性拷贝的混合应用

写段代码来表示,如下:

var per = {
            description:"人类",
            age:0,
            hoby:["权利","金钱"],
            say:function(){
                return this.age;
            },  
        };

        var base = {
            name:"zhang",
            height:180,
            weight:70,
        };

        function extend(p1,p2){
            var child;
            var F = function(){};
            F.prototype = p1;
            child = new F();

            for(var i in p2){
                child[i] = p2[i];
            }
            return child;
        }
        var t = extend(per,base);
        console.log(t)

五、多重继承

        var per1 = {
            name:"zhang",
        }
        var per3 = {
            age:"16",
        }
        var per5 = {
            name:"kun",
            height:"180",
        }
        var per6 = {
            weight:"70",
        }
        
        function muli(){
            var child = {};
                for(var i = 0 ;i <arguments.length ;i++){
                    arguments[i];
                    for(var j in arguments[i]){
                        child[j] = arguments[i][j];
                    }
                }
            return child;
        }
        // 对象t继承子对象per1,per3,per5,per6
        // 注意:如果父对象中存在相同的属性,参数后面对象中的属性
        //      会覆盖掉前面参数对象中的属性
        var t = muli(per1,per3,per5,per6);
        console.log(t);

JS高级理清楚面向对象、继承、闭包还是挺重要的。
继承的方法就先写到这里!!!后面会陆续更新!!!Loading...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容

  • js中的继承: Object是所有对象的父级/父类型/超类型,js中所有的对象都直接或间接的继承自Object. ...
    doudouY075阅读 465评论 0 2
  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,403评论 3 12
  • 1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...
    Yuann阅读 899评论 0 1
  • 你为什么写诗呢 受什么刺激吗 看破红尘了 有点傻吧 写诗能赚钱吗 不知为什么 当今的人们 见了一个写诗的人 居然会...
    徐一村阅读 350评论 3 4
  • 他们说,深爱,请陌生…… 年轻的心总是看得远的,也不容易满足,当有一天,我们因为珍惜而靠近对方,便渐渐明白昔日,过...
    麦迪大猩猩阅读 246评论 0 0