JavaScript實現創建自定義對象的常用方式總結

來源：懂視網責編：小采時間：2020-11-27 22:11:48

JavaScript實現創建自定義對象的常用方式總結

JavaScript實現創建自定義對象的常用方式總結:本文實例講述了JavaScript實現創建自定義對象的常用方式。分享給大家供大家參考，具體如下： 1. 對象字面量方式對象字面量方式是創建自定義對象的首選模式，簡單方便。 var per = { name:'zhangsan', age:25, job:'html', sayName

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript實現創建自定義對象的常用方式總結:本文實例講述了JavaScript實現創建自定義對象的常用方式。分享給大家供大家參考，具體如下： 1. 對象字面量方式對象字面量方式是創建自定義對象的首選模式，簡單方便。 var per = { name:'zhangsan', age:25, job:'html', sayName

本文實例講述了JavaScript實現創建自定義對象的常用方式。分享給大家供大家參考，具體如下：

1. 對象字面量方式

對象字面量方式是創建自定義對象的首選模式，簡單方便。

var per = {
 name:'zhangsan',
 age:25,
 job:'html',
 sayName:function(){
 alert(this.name);
 }
}

缺點：使用同一個接口創建很多對象，會產生大量的重復代碼。比如我想再創建一個per1對象，我就得把上面的代碼再重新寫一遍，改變不同的屬性值。

2、工廠模式

工廠模式抽象了創建具體對象的過程。由于在ECMAScript中無法創建類，開發人員就發明了一種函數，用函數來封裝以特定接口創建對象的細節，如下面的例子：

function createPerson(name,age,job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
 alert(this.name);
 }
 return o;
}
var person1 = createPerson('zhang',30,'java');
var person2 = createPerson('zhao',25,'php');

函數createPerson()能夠根據接受到的參數來構建一個包含所有必要信息的Person對象。可以無數次的調用這個函數，而每次它都會返回一個包含三個屬性和一個方法的對象。

缺點：工廠模式雖然解決了創建多個相似對象的問題，但卻沒有解決對象識別的問題（即怎樣知道一個對象的類型）。

3、構造函數模式

可以使用構造函數模式將前面的例子重寫如下：

function Person(name,age,job){
 this.name= name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
 }
}
var person1 = new Person('zhang',30,'java');
var person2 = new Person('zhao',25,'php');

創建自定義的構造函數意味著將來可以將它的實例標識為一種特定的類型。而這正是構造函數模式勝過工廠模式的地方。

然而，使用構造函數的主要問題，就是每個方法都要在每個實例上重新創建一遍。在上面的例子中，person1和person2都有一個名為sayName()的方法，但那兩個方法不是同一個Function的實例，創建兩個完成同樣任務的Function實例的確沒有必要；況且有this對象在，根本不用在執行代碼前就把函數綁定到特定對象上面。因此可以像下面這樣，通過把函數定義轉移到構造函數外部來解決這個問題。

function Person(name,age,job){
 this.name= name;
 this.age = age;
 this.job = job;
 this.sayName = sayName();
}
function sayName(){
 alert(this.name);
}
var person1 = createPerson('zhang',30,'java');
var person2 = createPerson('zhao',25,'php');

在這個例子中，我們把sayName()函數的定義轉移到構造函數外部。而在構造函數內部，我們將sayName屬性設置成等于全局的sayName函數，這樣person1和person2對象就共享了在全局作用域中定義的同一個sayName()函數。這樣確實解決了兩個函數在做同一件事的問題，可是新問題又來了：在全局作用域中定義的函數實際上只能被某個對象調用，這讓全局作用域有點名不副實。更讓人無法接受的是：如果對象需要定義很多方法，那么就要定義很多全局函數。好在，這些問題可以通過使用原型模式來解決。

4、原型模式

我們創建的每個函數都有一個prototype(原型)屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。使用原型對象的好處是可以讓所有的對象實例共享他所包含的屬性和方法。

function Person(){}
Person.prototype.name = 'zhang';
Person.prototype.age = '22';
Person.prototype.job = 'html5';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
var person2 = new Person();

原型模式也不是沒有缺點。首先，它省略了為構造函數傳遞初始化參數這一環節，結果所有實例在默認情況下都將取得相同的屬性值。雖然這會在某種程度上帶來一些不方便，但還不是原型的最大問題。原型模式的最大問題是由共享的本性所導致的。

原型中所有屬性是被很多實例共享的，這種共享對于函數非常合適。對于那些包含基本值的屬性倒也說的過去，通過在實例上添加一個同名屬性，可以隱藏原型中的對應屬性。然后，對于包含引用類型的屬性來說，問題就比較突出了。

function Person(){}
Person.prototype = {
 constructor:Person,
 name:'zhang',
 age :'22',
 job :'html5',
 friends:['wang','li'],
 sayName : function(){
 alert(this.name);
 }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push('zhao');
alert(person1.friends); //'wang,li,zhao'
alert(person2.friends); //'wang,li,zhao'
alert(person1.friends === person2.friends); //true

從上面的打印的結果我們就可以知道為什么很少人單獨使用原型模式了，實例一般都是要有屬于自己的全部屬性的。

5、組合使用構造函數模式和原型模式

組合使用構造函數模式和原型模式，是創建自定義類型的最常見方式。構造函數模式用于定義實例屬性，而原型模式用于定義方法和共享的屬性。結果，每個實例都會有自己的一份實例屬性的副本，但同時又共享著對方法的引用，最大限度的節省了內存。

function Person(name,age,job){
 this.name= name;
 this.age = age;
 this.job = job;
 this.friends = ['wang','li'];
}
Person.prototype = {
 constructor:Person,
 sayName : function(){
 alert(this.name);
 }
}
var person1 = new Person('zhang',26,'java',);
var person2 = new Person('sun',25,'php');
person1.friends.push('zhao');
alert(person1.friends); //'wang,li,zhao'
alert(person2.friends); //'wang,li'
alert(person1.friends === person2.friends); //false

在上面的例子中，實例屬性都是在構造函數中定義的，而由所有實例共享的屬性constructor和方法satName()則是在原型中定義的。而修改了person1.friends(向其中添加一個新字符串)，并不會影響到person2.friends，因為他們分別引用了不同的數組。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com