[JavaScript] Prototype Chain

  這次延續上次的 prototype，稍微討論一下 prototype chain。這也是 JavaScript很特別的繼承方式下的方法。我參照 Professional JavaScript for Web Developers - Nicholas C. Zakas的 prototype chain的範例實作以及圖片說明如下。

function SuperType(){
  this.property = true;
}

SuperType.prototype.getSuperValue = function (){
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

var instance = new SubType();
window.console.log(instance.getSuperValue());Check out this Pen!

 
  我們有兩個類別 SuperType以及 SubType，都各自有其屬性跟方法。其差別在於 SubType有新增一個 SuperType的 instance並且指定為他的 prototype(Line 11)。這差異也造成三個地方要注意:

  1. 上圖有了  SubType Prototype 的 __proto__到 SuperType Prototype這個連結關係，而原本在 SuperType存在的屬性跟方法也同時存在 SubType.prototype。

  2.  getSuperValue()這方法仍然在 SuperType.prototype物件當中，那是因為我們宣告他是在 SuperType.prototype當中。而 property則會在 SubType.prototype這個物件當中，是因為他是 instance物件，隨著 new 的物件而存在，我們宣告了 SubType.prototype = new SuperType()，其 SuperType的  this就相當於 SubType.prototype (若要更加延伸探討原因可以參考 [JavaScript] Conditions of this object)。

  3. 同時也注意一點就是 instance.constructor指向 SuperType，原因是 SubType.prototype的 constructor屬性也被複寫過去而重新指向到SuperType了。

  Prototype Chaining 延展了 prototype搜尋方法跟屬性的機制，若在讀取一個 instance的屬性或方法的時候沒有被找到，會往他的 prototype繼續搜尋。在此案例當我們呼叫 instance.getSuperValue()時候會有三個搜尋的步驟: 1) instance ->2) SubType.prototype->3) SuperType.prototype。

  Default Prototypes

  在 JavaScript的 Reference Type都繼承自 Object，所以上述範例實際上會是下圖(參考Professional JavaScript for Web Developers Chapter.6 Object-Oriented Programming)。當我們呼叫 instance.toString()，實際上是呼叫 Object.prototype的 toString()方法。

  延伸閱讀: [JavaScript] Prototype Memo

  Prototype的觀念一直是 JavaScript蠻值得探討的一個話題，文章若有敘述不清楚地方歡迎大家找我討論，也歡迎大家指教補述。

[JavaScript] Prototype Memo

  大家好，這次來探討 JavaScript的 Prototype。老實說在很多地方都有討論這個功能，我自己本身也對這個 JavaScript使用的繼承方式想要探討一番，我用我的方式解釋一次，也希望大家不吝指教。

  首先  Prototype又稱為原型，使用方法我做了一個範例如下。左邊是沒有使用 prototype的方法，右方是使用 prototype進行的方法的差異。(感謝 Vexed的投影片指點。)可以發現使用 prototype所製作出來的 instance屬性跟方法會使用相同的記憶體區塊，這代表這當我們若改變 Person()的 prototype的內容以及方法，其 instance的值也會跟著變動。

  流程上，當上述右例的 Person()被建立的同時 (第一行 function Person (){})，他的 prototype屬性也被建立起來。其中 Prototype的 Constructor也被建立起來，並且指回 Person (如下圖)，在這個例子裏面， Person.prototype.constructor 指向的是 Person。如下圖我參照 Professional JavaScript for Web Developers - Nicholas C. Zakas做了其 prototype的示意圖。

  由圖可知 Person的 prototype指向 Person.prototype，而 Person.prototype.constructor也指回 Person，形成一個LOOP。也知道被 new出來的 instance有__proto__屬性， 雖然 __proto__並不能夠直接被存取，我們可以透過 isPrototypeOf來證明上面的關係的正確與否。可以在 console試看看答案會如下。

• Person.prototype.isPrototypeOf(p1); // true

  走過一次之後大概對 prototype有比較清楚的概念了，下次會介紹 prototype chain的概念。