原型以及原型鏈等相關(guān)概念總是離不開構(gòu)造函數(shù)。下面我們先從一個構(gòu)造函數(shù)來看。

一、構(gòu)造函數(shù)創(chuàng)建對象

function Person(name,sex) {
     this.name=name;
     this.sex=sex;
}
var p1=new Person('小明','男');
console.log(p1.name);//小明
console.log(p1.sex);//男

通過new 構(gòu)造函數(shù)，創(chuàng)建了一個Person對象。
思考：在new的過程中，整個執(zhí)行過程是怎么樣的？

• 當(dāng)new一個函數(shù)的時候，整個函數(shù)會作為構(gòu)造函數(shù)創(chuàng)建一個對象。
• 函數(shù)里面的this代表創(chuàng)建的這個對象。給this添加屬性就是給構(gòu)造函數(shù)創(chuàng)建的對象添加屬性。
• 上述代碼的執(zhí)行過程：
  （1）創(chuàng)建一個空對象p1。
  （2）執(zhí)行構(gòu)造函數(shù)，給p1添加屬性。所以p1是一個對象（Person(name:'小明'，'男')）

二、原型

在以上構(gòu)造函數(shù)上，加一方法

  function Person(name,sex) {
      this.name=name;
      this.sex=sex;
  }
  Person.prototype.sayName=function() {
     console.log(this.name);
  }
  var p1=new Person('小明','男');
  p1.sayName();//小明。

在上面的例子中，出現(xiàn)了prototype這個東西，這個東西就和我們所說的原型有關(guān)。下面對原型來談?wù)勗汀?/p>

• 任何函數(shù)在聲明之后有一個prototype這個屬性。其值是一個對象。

Paste_Image.png

• 對象里面有個proto隱藏屬性，指向構(gòu)造函數(shù)的原型對象。(p1.proto===Person.prototype)
• 當(dāng)訪問對象的屬性時先從對象本身里找，找不到再從原型對象里找。
  下面我們畫出上面代碼的原型圖，以便更好的理解。

Paste_Image.png

在上面的代碼中我們p1中沒有sayName這個方法，在原型對象里找到了sayName這個方法。

三、 constructor

還是上面的例子，上面我們說了Person.prototype里面有個一個constructor屬性，那這個屬性是什么勒？

• constructor指向?qū)ο蟮膭?chuàng)造者。即Person.prototype.constructor===Person。
  因為Person.prototype===p1.proto
  因此有p1.proto.constructor===Person。

四、 原型鏈，有了上面的知識，下面我們可以開始來看看原型鏈了

  function Person(name,sex) {
      this.name=name;
      this.sex=sex;
  }
  Person.prototype.sayName=function() {
      console.log(this.name)
  }
  var p1=new Person('小明','男')
   p1.sayName();
   p1.toString();

通過上面的原型分析，我們知道了p1的sayName方法來自其原型對象。那toString來自哪里勒？我們上面并沒有在其原型對象上綁定toString方法。
對象是由函數(shù)new出來的，那Person.prototype這個對象是由什么函數(shù)創(chuàng)建而來的？

• 我們來看一下原型鏈的取值圖

Paste_Image.png

可以發(fā)現(xiàn)Person.prototype這個對象是由object創(chuàng)建的

• 通過原型鏈取值圖畫出原型鏈圖

Paste_Image.png

通過這個圖，我們就知道toSring是由哪來的。
以上就是我對原型知識的一些理解。