星期二, 6月 04, 2013

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




沒有留言: