Yakim shu Hi, 這是我擴充腦內海馬體的地方。

【練習】Object Oriented JavaScript - 02 prototype

1.承上篇,我們要為Person物件添加一個共用方法 say,會寫成以下

/*物件 Person*/
function Person(){
  this.say = function(){ alert("嘿!") }
}

2.基於Person,新增兩個人物,印出內存位置及內容比對

var person1 = new Person();
var person2 = new Person();

//印出--------
//內存位置不同
person1.say == person2.say; // false
//輸出內容相同
person1.say() == person2.say(); // true

可以發現person1person2雖然都是繼承於Person物件
輸出內容一樣,但內存位置卻不同
也就是說每生成一個實例,都必須多佔用內存去放這些重複性資料
所以這時候就要用prototype來解決


Prototype模式

我們可以把不變的屬性和方法,直接定義在prototype對象上。

/*物件 Person*/
function Person(){}
Person.prototype.say = function(){ alert("嘿!") };

這樣一來,不同對象的屬性跟方法就會指向同一內存地址,提高了運行效率!!

//印出--------
//內存位置相同
person1.say == person2.say; // true
//輸出內容相同
person1.say() == person2.say(); // true

還有一些輔助方法來確認prototype跟對象間的關係

isPrototypeOf( )

判斷prototype與對象間的關係

Person.prototype.isPrototypeOf(person1); // true

hasOwnProperty( )

判斷某一屬性,是本地或繼承自prototype

/*物件 Person*/
function Person(name){
  this.name = name;
}
Person.prototype.say = function(){ alert("嘿!") };

var person1 = new Person("yakim");

//印出--------
person1.hasOwnProperty("name"); // true
person1.hasOwnProperty("say"); // false

in 運算符( )

判斷對象是否含有某個屬性,不管是本地或來自prototype

"name" in person1; // true
"say" in person1; // true

也可以遍歷所有的屬性

for(var prop in person1){
  prop +"="+person1[prop];
}

// 輸出
// "name=yakim"
// "say=function (){ alert(\"嘿!\") }"

實例

JS Bin on jsbin.com


資料來源:
Youtube - Object Oriented JavaScript
Youtube - JavaScript 物件導向程式設計與遊戲實作
阮一峰的网络日志