JavaScript對象創(chuàng)建模式實(shí)例匯總
本文實(shí)例總結(jié)了JavaScript對象創(chuàng)建模式。分享給大家供大家參考,具體如下:
在JavaScript中創(chuàng)建對象是很容易的,可以使用對象字面量或者構(gòu)造函數(shù)。常用的創(chuàng)建對象的模式有以下幾種:
一. 工廠模式
工廠模式抽象了具體對象的過程,用函數(shù)來封裝以特ing接口創(chuàng)建對象的細(xì)節(jié)。
如下:
function createAnimal(name, age) { var o = new Object(); o.name = name; o.age = age; o.sayName = function() { alert(this.name); } return o; } var cat = createAnimal("cat", 12); var dog = createAnimal("dog", 3);
工廠模式雖然解決了創(chuàng)建多個(gè)相似兌現(xiàn)過的問題,但是卻沒有解決對象識(shí)別的問題。
二. 構(gòu)造函數(shù)模式
構(gòu)造函數(shù)模式可以創(chuàng)建特定類型的對象。
function Animal(name, age) { this.name = name; this.age = age; this.sayName = function() { alert(this.name); } } var cat = new Animal("cat", 12); var dog = new Animal("dog", 3);
可以使用對象的constructor屬性或instanceof操作符來標(biāo)識(shí)對象類型。
cat.constructor == Animal // true cat instanceof Animal // true
三. 原型模式
每個(gè)函數(shù)都有一個(gè)prototype(原型)屬性。這個(gè)屬性是一個(gè)指針,指向一個(gè)對象,而這個(gè)對象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。
使用原型對象的好處是,可以讓所有對象實(shí)例共享它所包含的屬性和方法。
function Animal() {} Animal.prototype.name = "animal"; Animal.prototype.age = 1; Animal.prototype.sayName = function() { alert(this.name); } var test1 = new Animal(); test1.sayName(); // "animal" var test2 = new Animal(); test2.sayName(); // "animal" alert(test1.sayName === test2.sayName); // true
或者:
function Animal() {} Animal.prototype = { constructor: Animal, name: "animal", age: 1, sayName: function() { alert(this.name); } };
原型中所有屬性是被很多實(shí)例共享的,通過在實(shí)例上添加一個(gè)同名屬性,可以隱藏原型中的對應(yīng)屬性。但是,對于包含引用類型值的屬性來說,問題就比較明顯了,如下:
function Animal() {} Animal.prototype = { constructor: Animal, name: "animal", age: 1, hobbies: ["dance", "sing", "play"], sayName: function() { alert(this.name); } }; var cat = new Animal(); var dog = new Animal(); cat.hobbies.push("sleep"); alert(cat.hobbies); // "dance", "sing", "play", "sleep" alert(dog.hobbies); // "dance", "sing", "play", "sleep" alert(cat.hobbies === dog.hobbies); // true
四. 組合使用構(gòu)造函數(shù)模式和原型模式
function Animal(name, age) { this.name = "animal"; this.age = 1; this.hobbies = ["dance", "sing", "play"]; } Animal.prototype = { constructor: Animal, sayName: function() { alert(this.name); } }; var cat = new Animal("cat", 2); var dog = new Animal("dog", 3); cat.hobbies.push("sleep"); alert(cat.hobbies); // "dance", "sing", "play", "sleep" alert(dog.hobbies); // "dance", "sing", "play" alert(cat.hobbies === dog.hobbies); // false alert(cat.sayName === dog.sayName); // true
五. 動(dòng)態(tài)原型模式
function Animal(name, age) { this.name = name; this.age = age; if(typeof this.sayName != "function") { Animal.prototype.sayName = function() { alert(this.name); } } } var cat = new Animal("cat", 12); cat.sayName(); // "cat"
使用動(dòng)態(tài)原型模式時(shí),不能使用對象字面量重寫原型。如果在已經(jīng)創(chuàng)建了實(shí)例的情況下重寫原型,那么就會(huì)切斷現(xiàn)有實(shí)例與新原型之間的聯(lián)系。
六. 寄生構(gòu)造函數(shù)模式
寄生構(gòu)造函數(shù)模式的基本思想是創(chuàng)建一個(gè)函數(shù),該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼,然后再返回新創(chuàng)建的對象。
從表面上看,這個(gè)函數(shù)很像典型的構(gòu)造函數(shù)。除了使用new操作符之外,這個(gè)模式跟工廠模式長得一模一樣。構(gòu)造函數(shù)在不返回值的情況下,默認(rèn)會(huì)返回新對象實(shí)例。而通過在構(gòu)造函數(shù)的末尾添加一個(gè)return語句,可以重寫調(diào)用構(gòu)造函數(shù)時(shí)返回的值。
function Animal(name, age) { var o = new Object(); o.name = name; o.age = age; o.sayName = function() { alert(this.name); } return o; } var cat = new Animal("cat", 12); cat.sayName(); // "cat"
由于返回的對象與構(gòu)造函數(shù)或構(gòu)造函數(shù)的原型之間沒有什么關(guān)系,因此不能依賴instanceof操作符來確定對象類型。
建議在可以使用其他模式的情況下,不能使用這種模式。
七. 穩(wěn)妥構(gòu)造函數(shù)模式
穩(wěn)妥構(gòu)造函數(shù)模式與寄生構(gòu)造函數(shù)模式類似,但有兩點(diǎn)不同:
一是新創(chuàng)建對象的實(shí)例方法不引用this;
二是不適用new操作符調(diào)用構(gòu)造函數(shù)。
function Animal(name, age) { var o = new Object(); o.name = name; o.age = age; var msg = "Hello, I'm "; o.sayName = function() { alert(msg + this.name); } return o; } var cat = new Animal("cat", 12); cat.sayName(); // "Hello, I'm cat"
穩(wěn)妥構(gòu)造函數(shù)模式適合在某些安全執(zhí)行環(huán)境。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js中setTimeout()與clearTimeout()用法實(shí)例淺析
這篇文章主要介紹了js中setTimeout()與clearTimeout()用法,以實(shí)例形式分析了setTimeout()與clearTimeout()的功能與使用技巧,需要的朋友可以參考下2015-05-05JavaScript 異步調(diào)用框架 (Part 1 - 問題 & 場景)
在Ajax應(yīng)用中,調(diào)用XMLHttpRequest是很常見的情況。特別是以客戶端為中心的Ajax應(yīng)用,各種需要從服務(wù)器端獲取數(shù)據(jù)的操作都通過XHR異步調(diào)用完成。2009-08-08Javascript 調(diào)用 ActionScript 的簡單方法
在Flex中,ActionScript調(diào)用Javascript是比較簡單的,說白了就是,在html里,怎么調(diào)用Javascript,在ActionScript就怎么調(diào)用就可以了。接下來通過本文給大家介紹js 調(diào)用 actionscript方法,感興趣的朋友一起看看吧2016-09-09addEventListener()與removeEventListener()解析
這篇文章主要為大家詳細(xì)介紹了addEventListener()與removeEventListener(),用于處理指定和刪除事件處理程序操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04