JavaScript系列：再鞏固-原型鏈

時間 2019-11-17

原文原文鏈接

圖

1.實例：‘對象（實例）’有屬性__proto__,指向該對象（實例）的‘構造函數的原型對象’。
2.方法：‘構造函數’除了有屬性__proto__,全部構造函數方法的__proto__指向Function.prototype，Function.prototype的__proto__指向Function.prototype，Function.prototype的__proto__指向Object.prototype，Object.prototype的__proto__指向null。
         還有屬性prototype，構造函數方法的prototype指向該'構造方法的原型對象'，構造方法的原型對象又指向Function.prototype，而後__proto__..走上述。

做者：doris
連接：https://www.zhihu.com/question/34183746/answer/58155878
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

首先，要明確幾個點：
1.在JS裏，萬物皆對象。方法（Function）是對象，方法的原型(Function.prototype)是對象。所以，它們都會具備對象共有的特色。
即：對象具備屬性__proto__，可稱爲隱式原型，一個對象的隱式原型指向構造該對象的構造函數的原型，這也保證了實例可以訪問在構造函數原型中定義的屬性和方法。

2.方法(Function)
方法這個特殊的對象，除了和其餘對象同樣有上述_proto_屬性以外，還有本身特有的屬性——原型屬性（prototype），這個屬性是一個指針，指向一個對象，這個對象的用途就是包含全部實例共享的屬性和方法（咱們把這個對象叫作原型對象）。原型對象也有一個屬性，叫作constructor，這個屬性包含了一個指針，指回原構造函數。

好啦，知道了這兩個基本點，咱們來看看上面這副圖。
1.構造函數Foo()
構造函數的原型屬性Foo.prototype指向了原型對象，在原型對象裏有共有的方法，全部構造函數聲明的實例（這裏是f1，f2）均可以共享這個方法。

2.原型對象Foo.prototype
Foo.prototype保存着實例共享的方法，有一個指針constructor指回構造函數。

3.實例
f1和f2是Foo這個對象的兩個實例，這兩個對象也有屬性__proto__，指向構造函數的原型對象，這樣子就能夠像上面1所說的訪問原型對象的全部方法啦。

另外：
構造函數Foo()除了是方法，也是對象啊，它也有__proto__屬性，指向誰呢？
指向它的構造函數的原型對象唄。函數的構造函數不就是Function嘛，所以這裏的__proto__指向了Function.prototype。
其實除了Foo()，Function(), Object()也是同樣的道理。

原型對象也是對象啊，它的__proto__屬性，又指向誰呢？
同理，指向它的構造函數的原型對象唄。這裏是Object.prototype.

最後，Object.prototype的__proto__屬性指向null。


總結：
1.對象有屬性__proto__,指向該對象的構造函數的原型對象。
2.方法除了有屬性__proto__,還有屬性prototype，prototype指向該方法的原型對象。

調試代碼

<html>
<head>
    <title></title>
</head>
<script type="text/javascript">

//對應上面的圖，咱們只用到了實例---》構造函數---》構造函數的原型---》Object.prototype---》null

//原型鏈：a1對象（實例對象）還讓A.prototype對象（原型對象）之間的鏈接，叫作原型鏈
//2個對象。之間有一個連接 _proto_

//a1下是沒有num1（A中沒有this.num1=20），會繼續經過a1._proto_找num1。
//a1下有num1（A中沒有this.num1=20），再也不會繼續經過a1._proto_找num1，
//即便A.prototype.num1 = 10; alert(a1.num1);依然是20

//....
//原型鏈最外層：Object.prototype
function A(){
    //this.num1=20

}
//A.prototype.num1 = 10;
        /*Function.prototype.num1 = 30;*/不對
Object.prototype.num1 = 40;
/*A.prototype.num1 = 60*/
A.prototype.fun = function() {
    alert(this.num1)//原型中的this和構造方法的this是同一個，指向實例a1
};
var a1=new A();
a1.fun();
alert(a1.num1);
</script>
<body>

</body>
</html>

增長:`數組的原型鏈Array._proto_=Function.prototype`和`數組的原型Array.prototype=[]`

總結

JavaScript中有內置(build-in)構造器/對象共計12個（ES5中新加了JSON），這裏列舉了可訪問的8個構造器。
剩下如Global不能直接訪問，Arguments僅在函數調用時由JS引擎建立，Math，JSON是以對象形式存在的，無需new。javascript

prototype

Object.prototype--》Object {}
console.log(typeof Object.prototype)   // object

String.prototype--》String {length: 0, [[PrimitiveValue]]: ""}
console.log(typeof String.prototype)   // object

Number.prototype--》Number {[[PrimitiveValue]]: 0}
console.log(typeof Number.prototype)   // object

Boolean.prototype--》Boolean {[[PrimitiveValue]]: false}
console.log(typeof Boolean.prototype)  // object

Error.prototype--》 D…r.aV {name: "Error", message: ""}
console.log(typeof Error.prototype)    // object

Date.prototype--》  Invalid Date
console.log(typeof Date.prototype)     // object

RegExp.prototype  --》 /(?:)/
console.log(typeof RegExp.prototype)   // object

Array.prototype  --》  []  //！！最重要的是 Array.prototype  --》  []
console.log(typeof Array.prototype)    // object

Function.prototype--》function(){} //！！全部構造器函數的__proto__都指向這個，它是一個空函數（Empty function）
console.log(typeof Function.prototype) // function

Math.prototype-->undefined
JSON.prototype-->undefined
Global不能直接訪問

http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html#3412281html