利用原始方法和工廠方法來創建javascript物件實例程式碼詳解

JS中並沒有類別的概念， 但我們可以利用JS的語法特徵，以類別的想法來創造物件。 

原始方法 

<script type="text/javascript"> 
var obj = new Object(); 
obj.name = "Koji"; //为对象添加属性 
obj.age = 21; 
obj.showName = function(){ //为对象添加方法 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

obj.showName(); //Koji 
obj.showAge(); //21 

</script>

上面的方式透過new關鍵字產生一個對象，然後根據JS是動態語言的特性添加屬性和方法，構 造一個對象。其中的this是表示呼叫該方法的物件。 這種方式的問題是如果需要多次建立對象，則需要重複程式碼多次，不利於程式碼的重複使用。

工廠方法 

<script type="text/javascript"> 
function createObj(){ 
var obj = new Object(); //创建对象 

obj.name = "Koji"; 
obj.age = 21; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj(); 
var obj2 = createObj(); 

obj1.showName(); //Koji 
obj2.showAge(); //21 

</script>

這種方式提高了程式碼重用率，還可以改變工廠方法，傳入參數賦值。 

<script type="text/javascript"> 
function createObj(name, age){ //构造对象时可以传入初始化参数 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script>

上面的方式雖然可以提高程式碼的重複使用率，但和物件導向中類別的概念相比有一個很大的缺陷。面相物件強調物件的屬性私有，而物件的方法是共享的。而上面的工廠方法創建物件的時候要為每個物件建立各自私有的方法。同時由於為每個物件創建邏輯相同的方法，浪費記憶體。改進如下 

<span style="font-size:14px;">
<script type="text/javascript"> 

function createObj(name, age){ 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = showName; 
obj.showAge = showAge; 

return obj; //返回对象 
} 

function showName(){ //函数也是一个对象 
alert(this.name); 
} 

function showAge(){ 
alert(this.age); 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script></span>

上面透過定義連個函數對象，解決了不同物件持有函數物件的私有問題。現在所有物件的方法都持有上面兩個函數的參考。

以上是利用原始方法和工廠方法來創建javascript物件實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！