JavaScript面試題總結系列（四）

4.JavaScript原型和原型鏈

4.1 概念介紹

• 原型和原型對象
  原型也是對象，叫原型對象。因此，原型和原型對象是一回事，只不過有人說的簡潔，有人說的是全稱。
   
• 原型鏈
  原型(原型對象)、構造函數和(對象)實例構成了原型鏈。原型鏈的核心就是依賴對象的__proto__指向，當檢索依賴對象自己不存在的屬性時，就會一層一層地向上去查找建立對象的構造函數，一直找到Object，就沒有__proto__的指向了。
   

• 構造函數
  首字母大寫的函數。例如：

  function Person() {
  
  }

   

• 對象實例
  對象有兩種：

  • 函數對象：經過 new Function(); 建立的對象；
  • 普通對象：除了函數對象以外的全部對象；

4.2 概念之間的關係

• 每個函數都有一個prototype屬性；
• 每個JavaScript對象(null除外)都具備一個屬性，叫作__proto__，這個屬性指向該對象的原型(prototype)；
• 每個原型都有一個 constructor 屬性指向關聯的構造函數，

4.3 示例

1. 使用構造函數建立對象：
    

   function Person() {
   
   }
   
   var person = new Person();
   person.name = "Kevin";
   
   console.log(person.name); // "Kevin"

   Person就是一個構造函數，咱們使用 new 建立了一個實例對象 person。
    

2. prototype
   每一個函數都有一個prototype屬性
    
   每個JavaScript對象(null除外)在建立的時候就會與之關聯另外一個對象，這個對象就是咱們說的原型，每個對象都會從原型「繼承」屬性。
    

   function Person() {
   
   }
   
   //注意：prototype是函數纔會有的屬性
   // 而__proto__是對象纔會有的屬性
   Person.prototype.name = "Kevin";
   var person1 = new Person();
   var person2 = new Person();
   
   console.log(person1.name); // "Kevin"
   console.log(person2.name); // "Kevin"

3. proto
    

   function Person() {
   
   }
   var person = new Person();
   console.log( person.__proto__ === Person.prototype ); // true

4. constructor
    

   function Person() {
   
   } 
   console.log( Person === Person.prototype.constructor ); // true

4.4 總結

理解原型和原型鏈的前提是，弄清楚這裏面一共有多少個概念，以及概念和概念之間的關係。

這裏面涉及到的概念有：原型、原型對象、構造函數、對象(實例)、prototype、proto、constructor。

他們之間的關係是怎樣的呢?

• 首先，當咱們建立一個大寫字母開頭的函數的時候，這個函數就是構造函數；
• 當咱們new 一個這個構造函數的實例對象的時候，這個實例就是咱們說的對象(實例)，它具備 proto 屬性；
• 原型和原型對象是一回事，他們是基於構造函數new出來的對象，也就是函數對象而存在的，它具備prototype屬性；
• 原型和原型對象也有一個contructor屬性（或者叫作指針），它指向關聯的構造函數。
• 每個對象都有一個 proto 屬性指向原型對象，這個原型對象還能夠有它本身的原型，以此類推，造成了一個原型鏈。當查找特定屬性的時候，先去這個對象裏面查找，若是沒有找到，那麼就去它的原型對象裏面找，若是仍是沒有，再去原型對象的原型對象裏面去查找。這個操做被委託在整個原型鏈上，也就是咱們所說的原型鏈了。

---

參考連接：
https://www.jianshu.com/p/be7c95714586
https://blog.csdn.net/xiaotao_css/article/details/72782416
https://blog.csdn.net/shuixiou1/article/details/81048816
http://www.javashuo.com/article/p-ewefmcnc-bv.html
http://www.javashuo.com/article/p-btstweuf-bs.html
https://www.jianshu.com/p/08c07a953fa0
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
https://blog.csdn.net/lyt_angularjs/article/details/100729591
http://www.javashuo.com/article/p-xihyuaei-ek.html
http://www.javashuo.com/article/p-btstweuf-bs.html
https://zhuanlan.zhihu.com/p/23090041?refer=study-fe
https://www.jianshu.com/p/dee9f8b14771
http://www.javashuo.com/article/p-cenbrctd-bu.html
http://www.javashuo.com/article/p-gcxbntmz-u.html
https://zhuanlan.zhihu.com/p/22787302