Javascript 中創(chuàng)建自定義對(duì)象的方法匯總
Javascript 中創(chuàng)建對(duì)象,可以有很多種方法。
Object構(gòu)造函數(shù)/對(duì)象字面量:
拋開設(shè)計(jì)模式不談,使用最基本的方法,就是先調(diào)用Object構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象,然后給對(duì)象添加屬性.
var student = new Object();
student.name = "xiao ming";
student.age = 20;
student.getName = function () {
alert(this.name);
}
熟悉javascript 對(duì)象字面量的同學(xué),可以換一種更好的寫法,至少看上去更簡(jiǎn)潔。
var student = {
name: "xiao hong",
age: 18,
getName: function () {
alert(this.name);
}
};
缺點(diǎn):上面方法有個(gè)缺點(diǎn)就是,使用同一個(gè)接口創(chuàng)建很多類似的對(duì)象時(shí),會(huì)產(chǎn)生大量重復(fù)的代碼。這個(gè)應(yīng)該很容易理解了,函數(shù)(方法或者類)一般是用來(lái)創(chuàng)建公共的方法,上面的對(duì)象創(chuàng)建過(guò)程,根本沒有函數(shù)的影子,所以談不上什么重用。
工廠模式:
工廠模式 抽象了具體創(chuàng)建對(duì)象的過(guò)程。就像一個(gè)黑盒,你只要調(diào)用函數(shù)(進(jìn)入工廠),并且傳入相應(yīng)參數(shù)(各種原材料),就會(huì)出來(lái)一個(gè)相應(yīng)的對(duì)象(工廠生產(chǎn)的產(chǎn)品)。工廠模式解決了創(chuàng)建多個(gè)相似對(duì)象的問(wèn)題。
function studentFactory(name,age) {
var student = new Object();
student.name = name;
student.age = age;
student.sayName = function () {
alert(this.name);
}
return student;
}
var p1 = studentFactory("ming", 20);
var p2 = studentFactory("hong", 18);
缺點(diǎn):工廠模式也有缺點(diǎn),最大的缺點(diǎn)就是 對(duì)象類型識(shí)別的問(wèn)題。只能判斷出對(duì)象是Object 類型(p1 instanceof Object),而無(wú)法具體判斷出來(lái)是哪種類型。使用工廠模式創(chuàng)建出來(lái)的student 其實(shí)都有著類似的屬性和方法,只是值不同而已。這時(shí) 更好的解決方法是,創(chuàng)建一個(gè)Student 函數(shù),這樣所有的對(duì)象都屬于 Student 類型。所以工廠模式不是不好,只是 構(gòu)造函數(shù)模式更優(yōu)。
自定義類型的構(gòu)造函數(shù):
構(gòu)造函數(shù)可以用來(lái)創(chuàng)建特定類型的對(duì)象。
function Student(name,age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}
}
var p3 = new Student("ming", 20);
var p4 = new Student("hong", 18);
alert(p3 instanceof Student);
alert(p3.sayName==p4.sayName); //false
缺點(diǎn):自定義構(gòu)造函數(shù) 的不足之處就是,每個(gè)對(duì)象都會(huì)重新創(chuàng)建自己的方法,其實(shí)這些方法功能是一樣的(像 sayName),但是它們卻不相同(p3.sayName 和p4.sayName不相等)。
原型模式:
定義一個(gè)空函數(shù),然后把所有屬性和方法都添加到原型上,這樣所有的 對(duì)象都會(huì)共用這些屬性和方法。
function Student() {};
Student.prototype.name = "ming";
Student.prototype.age = 20;
Student.prototype.friends = ['qi'];
Student.prototype.sayName = function () {
alert(this.name);
};
缺點(diǎn):有些屬性不能共享,共享回來(lái)帶來(lái)問(wèn)題,例如:friends。每位同學(xué)的friends 大多都不會(huì)相同。
構(gòu)造函數(shù)與原型的組合:
function Student(name, age, friends) {
this.name = name;
this.age = age;
this.friends = friends;
}
Student.prototype = {
constructor: Student,
sayName: function () {
alert(this.name);
}
};
總結(jié):構(gòu)造函數(shù)與原型的組合 是一種獲得廣泛認(rèn)可的創(chuàng)建自定義類型的方法。 也是上面這些方法中的最優(yōu)方法。
/*************************************************************************************************************/
其實(shí)上面的創(chuàng)建對(duì)象的方法已經(jīng)很多了,但是還是有可能出現(xiàn)一些比較特殊的場(chǎng)景,需要繼續(xù)的優(yōu)化。
動(dòng)態(tài)原型模式:
它是構(gòu)造函數(shù)與原型組合 的一種優(yōu)化。對(duì)于那些共用的屬性和方法,如果初始化之后,就不必再重復(fù)初始化,提高效率。
function Student(name, age) {
this.name = name;
this.age = age;
if ((typeof this.sayName) != "function") {
Student.prototype.sayName = function () {
alert(this.name);
}
}
}
var stu = new Person("ming", 20);
//alert(stu instanceof Student);
stu.sayName();
var stuNew = new Person("hong", 18);
//alert(stuNew instanceof Student);
stuNew.sayName();
當(dāng)創(chuàng)建多個(gè)student對(duì)象時(shí),sayName 方法只會(huì)初始化一次。
最后還有一種很有用的創(chuàng)建對(duì)象的方式,就是穩(wěn)妥構(gòu)造函數(shù)。
穩(wěn)妥構(gòu)造函數(shù)模式:
在這個(gè)模式中會(huì)禁止使用this和new,所有對(duì)象沒有公共的屬性。只能讀取變量的值,而不能修改。
////穩(wěn)妥構(gòu)造函數(shù)模式
function Student(name, age) {
var o = new Object();
o.sayName = function () {
alert(name);
}
return o;
}
var stu = Student("ming", 21);
stu.sayName();
以上匯總了幾種常見的Javascript創(chuàng)建自定義對(duì)象的方法,非常的全面,大家如有更好的,請(qǐng)聯(lián)系我,本文持續(xù)更新。
相關(guān)文章
JS實(shí)現(xiàn)AES加密并與PHP互通的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)AES加密并與PHP互通的方法,結(jié)合實(shí)例形式分析了javascript與php的加密、解密算法相關(guān)操作技巧,需要的朋友可以參考下2017-04-04js中字符替換函數(shù)String.replace()使用技巧
js中字符替換函數(shù)String.replace()使用技巧,字符替換經(jīng)常用的到。2011-08-08JavaScript實(shí)現(xiàn)點(diǎn)擊自制菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊自制菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02javascript實(shí)現(xiàn)div的顯示和隱藏的小例子
這篇文章介紹了在JS中實(shí)現(xiàn)DIV顯示和隱藏的實(shí)例,需要的朋友可以參考一下2013-06-06layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法
今天小編就為大家分享一篇layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JavaScript中this關(guān)鍵詞的使用技巧、工作原理以及注意事項(xiàng)
在JavaScript中,this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?,this 還是隨處可用的。這篇文章介紹了this 的工作原理,它會(huì)造成什么樣的問(wèn)題以及this 的相關(guān)例子。2014-05-05js 函數(shù)的執(zhí)行環(huán)境和作用域鏈的深入解析
在js中對(duì)象的外在表現(xiàn)形式為函數(shù)。2009-11-11