本文小編為大家詳細介紹“JavaScript如何創(chuàng)建多個對象”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“JavaScript如何創(chuàng)建多個對象”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、成都做網(wǎng)站、成都網(wǎng)站建設(shè)、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計制作的專業(yè)網(wǎng)站設(shè)計公司,擁有經(jīng)驗豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計人員,具備各種規(guī)模與類型網(wǎng)站建設(shè)的實力,在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨特的設(shè)計風格。自公司成立以來曾獨立設(shè)計制作的站點上千家。
對象的字面量方方式是創(chuàng)建對象最常用的方式之一,以字面量方式創(chuàng)建的對象屬性默認是可寫的、可枚舉、可配置。
如下代碼展示了使用字面量方式創(chuàng)建多個對象:
// 字面量方式創(chuàng)建多個對象 var person1 = { name: 'jam', age: 18, address: '上海市', eating: function () { console.log(this.name + '在吃飯') } } var person2 = { name: 'tom', age: 20, address: '北京市', eating: function () { console.log(this.name + '在吃飯') } } var person3 = { name: 'liming', age: 19, address: '天津市', eating: function () { console.log(this.name + '在吃飯') } }
經(jīng)過上述示例代碼我們可以看出,僅僅創(chuàng)建了3個對象就用了24行,可以看出字面量方式的弊端:創(chuàng)建同樣的對象時,需要編寫重復的代碼太多。
工廠模式其實是一種常見的設(shè)計模式;
通常我們會有一個工廠方法,通過該工廠方法我們可以產(chǎn)生想要的對象;
如下代碼展示了使用工廠模式方法創(chuàng)建多個對象的操作:
// 工廠函數(shù)方式創(chuàng)建多個對象 function createPerson (name, age, address) { var p = {} p.name = name p.age = age p.address = address p.eating = function () { console.log(name + '在吃飯') } return p } var p1 = createPerson('jam', 19, '上海市') var p2 = createPerson('tom', 14, '北京市') var p3 = createPerson('li', 13, '天津市') p3.eating() // li在吃飯
可以看出使用工廠模式方法創(chuàng)建了三個對象使用的代碼明顯比字面量少了好多行,but這就是最好的方式了嗎?NO! NO! NO!
工廠模式方法的**弊端**就在于:以上述示例代碼為例。當我們打印p1,p2,p3后,獲取不到對象最真實的類型,比如p1是人還是動物還是工具
構(gòu)造函數(shù)相信大家并不陌生。所謂構(gòu)造函數(shù),就是提供一個生成對象的模板,并描述對象的基本結(jié)構(gòu)的函數(shù)。一個構(gòu)造函數(shù),可以生成多個對象,每個對象都有相同的結(jié)構(gòu)。
如下代碼展示了使用構(gòu)造函數(shù)方法創(chuàng)建多個對象:
// 約定俗成的規(guī)范,構(gòu)造函數(shù)名字首字母大寫 function Person (name, age, address) { this.name = name this.age = age this.address = address this.eating = function () { console.log(this.name + '在吃飯') } this.running = function () { console.log(this.name + '在跑步') } } var p1 = new Person('jam', 20, '北京市') var p2 = new Person('tom', 14, '上海市') var p3 = new Person('li', 13, '天津市') console.log(p1) // 輸出結(jié)果 // Person { // name: 'jam', // age: 20, // address: '北京市', // eating: [Function], // running: [Function] // } p1.eating() // jam在吃飯
構(gòu)造函數(shù)有個不成文的規(guī)范,那就是構(gòu)造函數(shù)的名字首字母大寫或者駝峰。
構(gòu)造函數(shù)方式并不是最完美的創(chuàng)建多個對象的方式,也是有缺點的。
缺點:每個方法都要在每個實例上重新創(chuàng)建一遍,比如同樣的eating方法和running方法都需要在p1,p2,p3的實例上去創(chuàng)建一遍,浪費很多的內(nèi)存空間
二者的組合模式即在構(gòu)造函數(shù)上定義實例屬性,那么在創(chuàng)建對象上只需要傳入這些參數(shù)。在原型對象用于定義方法和共享屬性。
如下代碼展示了使用原型加構(gòu)造函數(shù)方式創(chuàng)建多個對象:
function Person (name, age, address) { this.name = name this.age = age this.address = address this.eating = this.running = function () { console.log(this.name + '在跑步') } } // 將eating方法和running方法加在原型上,就不需要每次創(chuàng)建一個對象都去在內(nèi)存中加一遍一樣的方法 Person.prototype.eating = function () { console.log(this.name + '在吃飯') } Person.prototype.running = function () { console.log(this.name + '在跑步') } var p1 = new Person('jam', 20, '北京市') var p2 = new Person('tom', 14, '上海市') var p3 = new Person('li', 13, '天津市') console.log(p1) // 輸出結(jié)果: // Person { // name: 'jam', // age: 20, // address: '北京市', // eating: [Function], // running: [Function] // } p1.eating() // jam在吃飯
最后的當然是壓軸的呀,這種原型和構(gòu)造函數(shù)方式是目前在ECMAScript中使用得最廣泛、認同度最高的一種創(chuàng)建對象的方法。
讀到這里,這篇“JavaScript如何創(chuàng)建多個對象”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文名稱:JavaScript如何創(chuàng)建多個對象
文章位置:http://muchs.cn/article16/jiosgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、小程序開發(fā)、、定制開發(fā)、動態(tài)網(wǎng)站、網(wǎng)站導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)