[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的概念。