JavaScript中構(gòu)造函數(shù)與原型鏈之間的關(guān)系詳解

更新時(shí)間：2019年02月25日 08:36:52 投稿：laozhang

在本篇文章里小編給大家分享了關(guān)于JavaScript中構(gòu)造函數(shù)與原型鏈之間的關(guān)系相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。

在Javascript中不存在class的概念，它的class概念是通過(guò)構(gòu)造函數(shù)（constructor）與原型鏈（prototype）來(lái)實(shí)現(xiàn)。

1.構(gòu)造函數(shù)（constructor）：創(chuàng)建對(duì)象時(shí)的初始化對(duì)象，總是與new 關(guān)鍵是一同出現(xiàn)。

構(gòu)造函數(shù)存在以下特點(diǎn)：

1、構(gòu)造函數(shù)內(nèi)的this 指向當(dāng)前實(shí)例對(duì)象。
2、使用new 關(guān)鍵字實(shí)例化當(dāng)前對(duì)象。
3、構(gòu)造函數(shù)首字母大寫(xiě)，區(qū)分普通函數(shù)。
4、實(shí)例對(duì)象都可以繼承構(gòu)造函數(shù)中的屬性和方法。但是，同一個(gè)對(duì)象實(shí)例之間，無(wú)法共享屬性。

2.原型（prototype）：是一個(gè)對(duì)象，實(shí)現(xiàn)對(duì)象的屬性繼承。javascript 中的對(duì)象通過(guò) proto 來(lái)指向原型對(duì)象，可以通過(guò)Object.__proto__ 來(lái)訪問(wèn)

3.構(gòu)造函數(shù)與與原型的聯(lián)系：

 <script>
  function Demo(){
       
   }
   var demo = new Demo()
   var data= demo.prototype = function(){
 
   }
   
   console.log(demo.__proto__)
   console.log(data.constructor )
   console.log(data.prototype.__proto__)
   console.log(demo.constructor.prototype)
   console.log(demo.constructor)
  輸出：
  {constructor: ƒ}constructor: ƒ Demo()__proto__: Object
  ƒ Function() { [native code] }
  {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
  {constructor: ƒ}
  ƒ Demo(){  }
</script>

從以上輸出結(jié)果可以看出：

構(gòu)造函數(shù)的 __proto__ 指向原型對(duì)象；
原型的constructor 指向構(gòu)造函數(shù)Function;
原型的 prototype.__proto__ 等于 Object.__proto__;
實(shí)例的 constructor.prototype 指向原型；
實(shí)例的constructor 指向構(gòu)造函數(shù)

引用圖例：