技術標籤：js面向物件jsjsjavascriptprototypeclass函數語言程式設計

原型

什麼是原型：

原型就是例項物件（建構函式new 一個函數出來的物件）身上所特有的一種屬性，是javascript實現繼承的其前提

開始：

1. 正式介紹原型前需要先了解建構函式和例項物件的概念，什麼是建構函式，什麼又是例項物件

   function Person() {}
   //此處Person就是一個建構函式，需要有new關鍵字
   //通過new產生的變數p就屬於Person的例項物件
   var p = new Person();
   

2. 瞭解了例項物件和建構函式的基本原理，我們來看一下是例項和建構函式之間的內部屬性關係

   1. prototype屬性：要知道js中prototype屬性僅存在函式身上 ，並且叫做叫做顯示原型屬性

      function Person() {}
      var p = new Person();
      //預設輸出的是一個Object空的例項物件，這就是Person的原型物件
      console.log(Person.prototype);
      

   2. 下面來看一下通過Person 所構造的例項物件身上有什麼屬性

      function Person() {}
      var p = new Person();
      //預設輸出的是一個Object空的例項物件
      console.log(Person.prototype);
      //在javascript中 例項物件會預設新增一個屬性叫__proto__，叫做例項物件的隱式原型屬性
       
      
      //列印會發現Person.prototype和p.__proto__屬性一毛一樣
      console.log(p.__proto__); 
      

   3. 一模一樣是不是這兩個屬性就是一樣的，來看一下

      console.log(p.__proto__ == Person.prototype); //true
      //這也就引出，javascript中例項物件的隱式原型屬性等於建構函式的顯示原型屬性,記住這句話有用就完了
      

   4. constructor屬性, constructor屬性存在於原型物件中，他指向了建構函式

      function Person() {};
      var p = new Person();
      //所以Person.prototype.constructor == Person
       
      
      console.log(Person.prototype.constructor == Person) //true
      

   5. 根據需要，可以將Person.prototype屬性指向新的物件，作為Person的原型物件，並且新物件的constructor不在指向Person建構函式

      function Person() { };
      var p = new Person();
      //直接給Person的原型指定物件字面量。則這個物件的constructor屬性不再指向Person函式
      Person.prototype = {
        name: 'alexbai',
        age: 20
      }
      console.log(Person.prototype); //Object物件
      //如果你需要constructor，你需要這樣做
      Person.prototype = {
        constructor: Person	//讓constructor重新指向Person函式
      }
      

3. 有了上面的知識儲備，來看一下平時所說的原型鏈到底是什麼

    先看一段程式碼：
   

   1. function Person(){};
      //為Person的原型物件上新增一個方法，叫speak，所以此時Person的原型物件上就多了一個speak方法
      Person.prototype.speak = function (){
        console.log('speak');
      }
      var p = new Person();
      //可以通過Person的例項物件進行呼叫，此處就是使用了原型鏈的概念，也就是用到__proto__
      p.speak() 
      //此時呼叫toString()方法，但是通過列印，例項物件上並沒有toString ==》沒有就通過原型鏈__proto__繼續向上查詢，最後在Object的例項物件上找到
      console.log(p.toString());
      

   2. 這裡需要需要，所謂的原型鏈，其實正是利用了–proto-- 屬性一級一級查詢，直到盡頭，這就是所說的原型鏈

結尾 :

原型和原型鏈是javascript的很重要一部分，也是在程式設計中所需要的，以前我也是亂亂的，似懂非懂狀態，想要學好這塊知識，建議可以獨立用自己的語言將所這塊知識點描述清楚