關於javascript中原型和原型鏈的理解

  對於js中的原型以及原型鏈，筆者一直覺得有些迷惑，對於其中的概念是大致理解的，但是如果讓筆者說出來就感覺比較難以清晰的表達出來，所以就在這里做一下總結，有疑問的時候再翻出來回顧一下

  首先，我們看一段代碼

 function Person() {

 }

 var person = new Person();

 console.log(person);
 console.log(Person);
 console.log(Object)

 console.log(person.prototype);
 console.log(Person.prototype);
 console.log(Object.prototype);

 console.log(person.constructor);
 console.log(Person.constructor);
 console.log(Object.constructor);

 console.log(person.__proto__);//注意此處前后各是兩個下划線，以下同理
 console.log(Person.__proto__);
 console.log(Object.__proto__)

 console.log(person.__proto__ === Person.prototype );
 console.log(Person.__proto__ === Object.prototype); 

看到這里，如果你對上面的輸出沒有任何疑問，並且回答的准確無誤，那么閣下可以優雅的關掉這個頁面，該忙啥忙啥吧，大佬就不要在這湊熱鬧啦，如果你有什么疑問的話還請你繼續看下去

首先我們針對上面的代碼明確以下幾個概念

1、prototype，原型，那什么是原型呢？你可以這樣理解：每一個JavaScript對象(null除外)在創建的時候就會與之關聯另一個對象，這個對象就是我們所說的原型，每一個對象都會從原型"繼承"屬性。（在js中有這么一個概念：萬物皆對象。請大家記住這個概念，在es6中體現的尤為明顯）

2、__proto__，這是每一個JavaScript對象(除了 null )都具有的一個屬性，叫__proto__，這個屬性會指向該對象的原型。

3、constructor，每個原型都有一個 constructor 屬性指向關聯的構造函數。

然后我們引入原形鏈的概念：當讀取實例的屬性時，如果找不到，就會查找與對象關聯的原型中的屬性，如果還查不到，就去找原型的原型，一直找到最頂層為止。

接下來我們看下上面的代碼的輸出：

 function Person() {

 }

 var person = new Person();

 console.log(person);//Person {}
 console.log(Person);//[Function: Person]
 console.log(Object)//[Function: Object]

 console.log(person.prototype);//undefined
 console.log(Person.prototype);//Person {}
 console.log(Object.prototype);//{}

 console.log(person.constructor);//[Function: Person]
 console.log(Person.constructor);//[Function: Function]
 console.log(Object.constructor);//[Function: Function]

 console.log(person.__proto__);//Person {}
 console.log(Person.__proto__);//[Function]
 console.log(Object.__proto__)//Function

 console.log(person.__proto__ === Person.prototype );//true
 console.log(Person.__proto__ === Object.prototype); //false  ？？這里筆者有一點不是很理解，如果有大佬可以解釋下的話就再好不過了
 console.log(Object.getPrototypeOf(person) === Person.prototype) // true

 console.log(Object.getPrototypeOf(Object) == Person.__proto__) //true

 console.log({Object}.prototype,'123') // {}

然后我們可以用一張圖來表示下之前梳理的關系

 

順便還要說一下，圖中由相互關聯的原型組成的鏈狀結構就是原型鏈，也就是藍色的這條線。

 本篇知識點部分來自於https://github.com/mqyqingfeng/Blog/issues/2，大家有興趣的可以去看看，作者寫的js系列還是很棒棒的