JSFiddle - React, Tailwind, and code Playground

by etianqq

HTML

<p>
原型链检索只会在属性检索的时候启用，并不会在更新属性时启用。因此，对基础类型的属性进行更新时，不会更新父对象的属性。
但是，如果是对象类型的属性更新，会更新父对象的属性。
</p>
<p>
c.a:<span id='result1'></span>
</p>
<p>
c.obj.aa:<span id='result2'></span>
</p>
<p>
---------- update -----------
</p>
<p>
c.a:<span id='result3'></span>
</p>
<p>
c.obj.aa:<span id='result4'></span>
</p>
<p>
p_obj.a:<span id='result5'></span>
</p>
<p>
p_obj.obj.aa:<span id='result6'></span>
</p>
<p>

JavaScript

function P(){
        this.a = 1;
        this.obj = {aa:1}
    }

    function C(){
        this.c = 4;
    }

    var p_obj = new P();
    C.prototype = p_obj;

    var c_obj = new C();
    $('#result1').text(c_obj.a);
    $('#result2').text(c_obj.obj.aa);
    console.log("c.a:"+c_obj.a);
    console.log("c.obj:"+c_obj.obj.aa);

    c_obj.a = 2;
    c_obj.obj.aa = 2;
    console.log("---------- update -----------");
    $('#result3').text(c_obj.a);
    $('#result4').text(c_obj.obj.aa);
    
    $('#result5').text(p_obj.a);
    $('#result6').text(p_obj.obj.aa);
    
    console.log("---------- update -----------");
    console.log("c.a:"+c_obj.a);
    console.log("c.obj:"+c_obj.obj.aa);

    console.log("p_obj.a:"+p_obj.a);
    console.log("p_obj.obj:"+p_obj.obj.aa);