Merge pull request #7 from SecondDragon/master

9.4-面对对象-原型与原型链修改
overnote · Mar 4, 2024 · d0fadba · d0fadba
2 parents 791c979 + ed95424
commit d0fadba
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 9 deletions.
diff --git a/01-JavaScript基础语法/09.4-面向对象-原型与原型链.md b/01-JavaScript基础语法/09.4-面向对象-原型与原型链.md
@@ -4,12 +4,25 @@
 
 ### 1.1 原型对象
 
-创建的函数都会拥有一个 prototype 属性，该属性即是原型对象的引用，这样做可以让多个实例间通用方法使用同一个引用，减少空间占用！
+所有的函数（`当然也含构造函数`）都会拥有一个 `prototype` 属性，该属性即是原型对象的引用，我们称之为函数的**原型对象**，为了与对象的原型`__proto__`相区分也有人称为**显式原型对象**，
 
-而原型对象默认会获得两个属性：
+当执行`new Person()`时，返回的**实例对象** 除了手动创建的 `this.age=18` 的age属性外，默认还会创建`__proto__`属性 指向这个构造函数的**显式原型对象**
 
-- `constructor`：指向与原型对象关联的构造函数
-- `__proto__`：指向其构造函数的原型，默认是 Object。该属性不是标准属性，但是已经被各大浏览器接受并实现。
+`__proto__`属性指向的值一般称之为对象的隐式原型对象（为了与函数的`prototype`进行区分），
+
+这样做可以让多个**实例对象**间的通用方法来自同一个`__proto__`，减少空间占用！
+
+```js
+function Person(){
+   this.age=18
+}
+let p=new Person()
+```
+
+而**显式原型对象**默认会获得两个属性：
+
+- `constructor`：指向与**显式原型对象**关联的构造函数
+- `__proto__`：指向其构造函数的原型，默认（可以被修改）是 **构造函数Object**的**显示原型对象**。该属性不是标准属性，但是已经被各大浏览器接受并实现。
 
 其对应关系如图：
 

diff --git a/images/javascript/prototype-01.drawio b/images/javascript/prototype-01.drawio
@@ -1 +1,106 @@
-<mxfile host="Electron" modified="2023-04-22T09:51:31.369Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.8.16 Chrome/106.0.5249.199 Electron/21.4.0 Safari/537.36" etag="_RaxN0JaclLTAhzq_Ssp" version="20.8.16" type="device"><diagram id="Ed7ZIexu5s1mp6d3kqyb" name="Page-1">5Vlbb9sgGP01PLYyBt8e49RtN2lat05r9xQ5NnXQHBMR0iT79YMYx9c0aeqsl71EcMBgzjl8fDgADaerKx7OJl9YTFJgGvEKoAtgmp6F5a8C1jlgeSgHEk7jHIIlcEv/EA0aGl3QmMxrHQVjqaCzOhixLCORqGEh52xZ7/bA0vqsszAhLeA2CtM2ekdjMclR13RK/JrQZFLMDG0vb5mGRWe9kvkkjNmyAqEAoCFnTOSl6WpIUsVdwUv+3OWO1u2LcZKJQx6gP9Lk++zuEV9/dR3j3mFkjM/0Mh7DdKEXfD7jTDCxnhH92mJdcCHISs7kT8Q0lQCUxbng7DcZspRxiWQskz39B5qmDShMaZLJaiTflUjcfyRcUMnyQDdMaRyrafzlhApyOwsjNedSWkpinC2ymKhlGLLWXremQo1JVhVI83BF2JQIvpZddKttaE20KaGj68tSYltDk4q6hZShNlWyHbnkXRY09c+QwW3LIA0t2V1EQvL4YYWw3poQ0GsrMRpttsRo9HF1QHZDB+uVddguodQBBBYYBMALQICBHwDX3yCXwPdA4AIfggFUPLRUKtmCO/isCFjVCpjowY1IFLWElS1j18JWT/SbXp1+E7fph2YH//hk/Jsd/NuKfBeDwAOuAQaG4t91gH+xabKAb9wQPmdZrwrEFnFj3KWAa46RbfcUiMw3pwDq3AGu3AGXquDt2gF2qmLSWJ4adqJKuSZPHOsvUYdAqY/TpY5nOyg8kTruq4tjtcVp0kqyeKASUBXl03A+p1GdSbKi4l6F8HPLM3X9lw7pqnyxqlbWutLgfwzj+MHo4h8aDvKIflx6gMqVq5MmHzKTLOST20VVzQ3PDbk0DZQvsKmtq7XmgDtFnrMFj8gBkUaEPCHigA1B4lrG3jZNxRVWhykKjJM0FPSxnud3OUXPcMOoXFvpyUbMRl7DbPnK9VPVvLwxkA27zV2MkxPTGmfj2+2qX2Dl9hXgJVY+2MilBasG1CM8Yb8eA9B+bxY3znfmTdxM55wjvWk1vAmbCd+pzdmRjv8XFyOMG/lIx5GHT5SQR4GBv33+k/KfI5d9StZwhPlZRz7+3ChRJ2nX/neeGQAOyNCL8ASrwUlPtDM+/YuoYb6tqNHY7Mg4Mmo41p6jsb+o0enVjrtLT16Fda/uz5WKg7HmPPNp5/V4Aeox+4Jv2qvb+nO9itEe05/Yq+1bXkaWH/hca9C9PbD2fGhCpzrXcO+xYpsLY+hUtv32anXovj/kYCuvcdhwq7HpzDj2Jtd1XXxBfEHv8yxEDZ/CY293zS+rrW8SR8cXWS3/PMq7l//AoeAv</diagram></mxfile>
+<mxfile host="65bd71144e">
+    <diagram id="Ed7ZIexu5s1mp6d3kqyb" name="Page-1">
+        <mxGraphModel dx="546" dy="481" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="24" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;实例对象P&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
+                    <mxGeometry x="40" y="490" width="190" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="25" value="age:18" style="text;html=1;strokeColor=#9673a6;fillColor=#e1d5e7;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="107.5" y="520" width="55" height="20" as="geometry"/>
+                </mxCell>
+                <mxCell id="26" value="__proto__" style="text;html=1;strokeColor=#b85450;fillColor=#f8cecc;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="107.5" y="540" width="55" height="20" as="geometry"/>
+                </mxCell>
+                <mxCell id="27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=1;" parent="1" source="29" target="24" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="290" y="530"/>
+                            <mxPoint x="290" y="530"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="28" value="&lt;font style=&quot;font-size: 15px;&quot;&gt;new&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="27" vertex="1" connectable="0">
+                    <mxGeometry x="0.144" y="14" relative="1" as="geometry">
+                        <mxPoint y="-14" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="29" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;构造函数Person&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
+                    <mxGeometry x="340" y="490" width="190" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="30" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;构造函数原型对象&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
+                    <mxGeometry x="340" y="310" width="190" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="31" value="" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=1;entryDx=0;entryDy=0;" parent="1" source="26" target="30" edge="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="280" y="440" as="sourcePoint"/>
+                        <mxPoint x="330" y="390" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="32" value="指向" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="31" vertex="1" connectable="0">
+                    <mxGeometry x="0.0899" y="-2" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="33" value="constructor" style="text;html=1;strokeColor=#d79b00;fillColor=#ffe6cc;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="405" y="360" width="60" height="20" as="geometry"/>
+                </mxCell>
+                <mxCell id="34" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="33" target="29" edge="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="400" y="340" as="sourcePoint"/>
+                        <mxPoint x="450" y="290" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="35" value="__proto__" style="text;html=1;strokeColor=#b85450;fillColor=#f8cecc;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="405" y="340" width="60" height="20" as="geometry"/>
+                </mxCell>
+                <mxCell id="36" value="" style="endArrow=classic;html=1;rounded=0;exitX=1;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=1;entryDx=0;entryDy=0;" parent="1" source="35" target="39" edge="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="560" y="220" as="sourcePoint"/>
+                        <mxPoint x="630" y="190" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="38" target="30" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="38" value="&lt;font style=&quot;font-size: 18px;&quot;&gt;构造函数Object&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
+                    <mxGeometry x="580" y="310" width="190" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="39" value="" style="rounded=1;whiteSpace=wrap;html=1;verticalAlign=middle;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
+                    <mxGeometry x="580" y="180" width="190" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="41" target="38" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="41" value="constructor" style="text;html=1;strokeColor=#d79b00;fillColor=#ffe6cc;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="645" y="220" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" parent="1" source="43" target="44" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="43" value="__proto__" style="text;html=1;strokeColor=#b85450;fillColor=#f8cecc;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="645" y="200" width="60" height="20" as="geometry"/>
+                </mxCell>
+                <mxCell id="44" value="&lt;font style=&quot;font-size: 19px;&quot;&gt;null&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;verticalAlign=middle;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
+                    <mxGeometry x="580" y="30" width="190" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="47" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.389;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="45" target="30" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="45" value="prototype" style="text;html=1;strokeColor=#b85450;fillColor=#f8cecc;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="384" y="530" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="46" value="prototype" style="text;html=1;strokeColor=#b85450;fillColor=#f8cecc;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+                    <mxGeometry x="620" y="350" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="48" value="" style="endArrow=classic;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.336;entryY=1.009;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="46" target="39">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="655" y="540" as="sourcePoint"/>
+                        <mxPoint x="705" y="490" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>