美文网首页
简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程

作者: 别人家的xiao孩 | 来源:发表于2018-07-03 08:24 被阅读0次

    简单粗暴点看原型链吧,想点与代码无关的事,比如人、妖以及人妖。
    1)人是人他妈生的,妖是妖他妈生的。人和妖都是对象实例,而人他妈和妖他妈就是原型。原型也是对象,叫原型对象。


    图片.png

    2)人他妈和人他爸啪啪啪能生出一堆人宝宝、妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗称造人。


    图片.png

    3)人他妈会记录啪啪啪的信息,所以可以通过人他妈找到啪啪啪的信息,也就是说能通过原型对象找到构造函数。

    4)人他妈可以生很多宝宝,但这些宝宝只有一个妈妈,这就是原型的唯一性。

    5)人他妈也是由人他妈他妈生的,通过人他妈找到人他妈他妈,再通过人他妈他妈找到人他妈他妈……,这个关系叫做原型链。


    图片.png

    6)原型链并不是无限的,当你通过人他妈一直往上找,最后发现你会发现人他妈他妈他妈……的他妈都不是人,也就是原型链最终指向null。

    7)人他妈生的人会有人的样子,妖他妈生的妖会有妖的丑陋,这叫继承。


    图片.png

    8)你继承了你妈的肤色,你妈继承了你妈他妈的肤色,你妈他妈……,这就是原型链的继承。

    9)你谈对象了,她妈让你带上房产证去提货,你若没有,那她妈会问你妈有没有,你妈没有那她妈会问你妈她妈有没有……这就是原型链的向上搜索。

    10)你会继承你妈的样子,但是你也可以去染发洗剪吹,就是说对象的属性可以自定义,会覆盖继承得到的属性。


    图片.png

    11)虽然你洗剪吹了染成黄毛了,但你不能改变你妈的样子,你妈生的弟弟妹妹跟你的黄毛洗剪吹没一点关系,就是说对象实例不能改动原型的属性。

    12)但是你家被你玩火烧了的话,那就是说你家你妈家你弟们家都被烧了,这就是原型属性的共享。

    13)你妈外号阿珍,邻居大娘都叫你阿珍儿,但你妈头发从飘柔做成了金毛狮王后,隔壁大婶都改口叫你包租仔,这叫原型的动态性。


    图片.png

    14)你妈爱美,又跑到韩国整形,整到你妈他妈都认不出来,即使你妈头发换回飘柔了,但隔壁邻居还是叫你金毛狮王子。因为没人认出你妈,整形后的你妈已经回炉再造了,这就是原型的整体重写。

    图片.png
    尼玛!你特么也是够了! Don't BB! Show me the code!
    function Mother () { }
    Mother.prototype = {    //Mother的原型
        age: 18,
        home: ['Beijing', 'Shanghai']
    };
    Person.prototype = new Mother(); //Person的原型为Mother
    
    //用chrome调试工具查看,提供了__proto__接口查看原型,这里有两层原型,各位还是直接看chrome好一点。
    var p1 = new Person('Jack'); //p1:'Jack'; __proto__:{__proto__:18,['Beijing','Shanghai']}
    var p2 = new Person('Mark'); //p2:'Mark'; __proto__:{__proto__:18,['Beijing','Shanghai']}
    
    p1.age = 20;  
    /* 实例不能改变原型的基本值属性,正如你洗剪吹染黄毛跟你妈无关
     * 在p1实例下增加一个age属性的普通操作,与原型无关。跟var o={}; o.age=20一样。
     * p1:下面多了个属性age,而__proto__跟 Mother.prototype一样,age=18。
     * p2:只有属性name,__proto__跟 Mother.prototype一样
     */
    
    p1.home[0] = 'Shenzhen'; 
    /* 原型中引用类型属性的共享,正如你烧了你家,就是烧了你全家的家
     * 这个先过,下文再仔细唠叨一下可好?
     * p1:'Jack',20; __proto__:{__proto__:18,['Shenzhen','Shanghai']}
     * p2:'Mark';    __proto__:{__proto__:18,['Shenzhen','Shanghai']}
     */
    
    p1.home = ['Hangzhou', 'Guangzhou']; 
    /* 其实跟p1.age=20一样的操作。换成这个理解: var o={}; o.home=['big','house']
     * p1:'Jack',20,['Hangzhou','Guangzhou']; __proto__:{__proto__:18,['Shenzhen','Shanghai']}
     * p2:'Mark';                             __proto__:{__proto__:18,['Shenzhen','Shanghai']}
     */
    
    delete p1.age;    
    /* 删除实例的属性之后,原本被覆盖的原型值就重见天日了。正如你剃了光头,遗传的迷人小卷发就长出来了。
     * 这就是向上搜索机制,先搜你,然后你妈,再你妈他妈,所以你妈的改动会动态影响你。
     * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{__proto__:18,['Shenzhen','Shanghai']}
     * p2:'Mark';                          __proto__:{__proto__:18,['Shenzhen','Shanghai']}
     */
    
    
    Person.prototype.lastName = 'Jin'; 
    /* 改写原型,动态反应到实例中。正如你妈变新潮了,邻居提起你都说你妈真潮。
     * 注意,这里我们改写的是Person的原型,就是往Mother里加一个lastName属性,等同于Mother.lastName='Jin'
     * 这里并不是改Mother.prototype,改动不同的层次,效果往往会有很大的差异。
     * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
     * p2:'Mark';                          __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
     */
    
    Person.prototype = { 
        age: 28, 
        address: { country: 'USA', city: 'Washington' }
    };
    var p3 = new Person('Obama'); 
    /* 重写原型!这个时候Person的原型已经完全变成一个新的对象了,也就是说Person换了个妈,叫后妈。
     * 换成这样理解:var a=10; b=a; a=20; c=a。所以b不变,变得是c,所以p3跟着后妈变化,与亲妈无关。
     * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
     * p2:'Mark';                          __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai']}
     * p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'}
     */
    
    
    Mother.prototype.no = 9527;
    /* 改写原型的原型,动态反应到实例中。正如你妈他妈变新潮了,邻居提起你都说你丫外婆真潮。
     * 注意,这里我们改写的是Mother.prototype,p1p2会变,但上面p3跟亲妈已经了无瓜葛了,不影响他。
     * p1:'Jack',['Hangzhou','Guangzhou']; __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai'],9527}
     * p2:'Mark';                          __proto__:{'jin',__proto__:18,['Shenzhen','Shanghai'],9527}
     * p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'}
     */
    
    Mother.prototype = { 
        car: 2, 
        hobby: ['run','walk']
    };
    var p4 = new Person('Tony');
    /* 重写原型的原型!这个时候Mother的原型已经完全变成一个新的对象了!人他妈换了个后妈!
     * 由于上面Person与Mother已经断开联系了,这时候Mother怎么变已经不影响Person了。
     * p4:'Tony';__proto__: 28 {country: 'USA', city: 'Washington'}
     */
     
    Person.prototype = new Mother(); //再次绑定
    var p5 = new Person('Luffy');
    // 这个时候如果需要应用这些改动的话,那就要重新将Person的原型绑到mother上了
    // p5:'Luffy';__proto__:{__proto__: 2, ['run','walk']}
    
    p1.__proto__.__proto__.__proto__.__proto__ //null,你说原型链的终点不是null?
    Mother.__proto__.__proto__.__proto__    //null,你说原型链的终点不是null?
    

    小结

    核心只有一个:属性共享和独立的控制,当你的对象实例需要独立的属性,所有做法的本质都是在对象实例里面创建属性。若不考虑太多,你大可以在Person里面直接定义你所需要独立的属性来覆盖掉原型的属性。总之,使用原型继承的时候,要对于原型中的属性要特别注意,因为他们都是牵一发而动全身的存在。

    相关文章

      网友评论

          本文标题:简单粗暴地理解js原型链--js面向对象编程

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