詳解js 創(chuàng)建對象的幾種方法
在js中創(chuàng)建對象的方法可分為6種，分別是：基本模式、工廠模式、構(gòu)造函數(shù)模式、原型模式、組合模式、動態(tài)原型模式，接下來分別看下這幾種模式的寫法吧
一、基本模式
var person = new Object();
person.name = "孫悟空";
person.weapon = "棒子";
person.run = function () { return this.name + "武器是" + person.weapon;
}
二、工廠模式
function creatPerson(name, weapon) { var person = new Object();
person.name = "孫悟空";
person.weapon = "棒子";
person.run = function () { return this.name + "武器是" + person.weapon;
} return person;
}
缺點：1、實例之間沒有聯(lián)系；2、沒有使用new關(guān)鍵字；3、會造成資源的浪費，每生成一個實例都會都會增加一些重復(fù)的內(nèi)容
缺點3如何理解呢：在多次調(diào)用creatPerson方法時，創(chuàng)建對象的方法run會生成多個，雖然多個對象的方法都是一樣的。
構(gòu)造函數(shù)解決了多個實列之間沒有聯(lián)系的問題，可以用instanceof判斷
三、構(gòu)造函數(shù)模式
function creatPerson(name, weapon) { this.name = name; this.weapon = weapon; this.run = function () { return this.name + "武器是" + this.weapon;
}
} //調(diào)用創(chuàng)建對象
var wukou =new creatPerson("孫悟空", "棒子");
缺點：沒有解決工廠模式浪費內(nèi)存的缺點，每創(chuàng)建一個對象會增加很多重復(fù)的東西
為了解決這個問題請看原型模式
四、原型（Prototype）模式
js中規(guī)定，每一個構(gòu)造函數(shù)都有一個prototype屬性，指向另一個對象，這個對象的所有屬性和方法，都會被構(gòu)造函數(shù)的實例繼承，可以把那些不變的屬性和方法直接定義在prototype對象上
function personObj() { }
personObj.prototype.name = "孫悟空";
personObj.prototype.weapon = "棒子";
personObj.prototype.run = function () { return this.name + "武器是" + this.weapon;
} //創(chuàng)建對象
var person = new personObj(); //原型模式的另一種寫法 function personObj() { }
personObj.prototype = {
constructor: personObj,//強制指回personObj
name: "孫悟空",
weapon: "棒子",
run: function () { return this.name + "武器是" + this.weapon;
}
}
缺點：構(gòu)造函數(shù)沒有參數(shù)，不能傳參初始化值，因為不同的對象可能只共享方法，但是不會共享屬性，為了解決這個問題請看構(gòu)造函數(shù)和原型模式的組合模式，還解決了前面的所有缺點，Jquery就是使用的這種方法
五、組合模式
這樣，不同的實例可有自己特有的屬性，還有共享的方法
function personObj(name,weapon) { this.name = name; this.weapon = weapon;
}
personObj.prototype = {
run: function () { return this.name + "武器是" + this.weapon;
}
} //創(chuàng)建對象
var wukou = new personObj("孫悟空", "棒子");
雖然這種創(chuàng)建對象的方式已經(jīng)夠我們使用了，平時使用這方式也沒有問題的，當(dāng)然還有一點小問題：對象中的屬性和方法是分開的，請看動態(tài)原型方法
六、動態(tài)原型模式
function personObj(name, weapon) { this.name = name this.weapon = weapon if (typeof this.run != "function")
{
personObj.prototype = {
run: function () { return this.name + "武器是" + this.weapon;
}
}
}
}
//創(chuàng)建對象
var wukou = new personObj("孫悟空", "棒子");
函數(shù)中使用 if (typeof this.run != "function") 目的是為了防止創(chuàng)建多個對象時，方法執(zhí)行多次
以上所述是小編給大家介紹的js 創(chuàng)建對象的幾種方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
用JavaScript獲取頁面文檔內(nèi)容的實現(xiàn)代碼
下面小編就為大家?guī)硪黄肑avaScript獲取頁面文檔內(nèi)容的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了淺談javascript原型鏈與繼承的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)canvas簡單小畫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多層級復(fù)選框菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Webpack打包過程中處理ES6模塊的循環(huán)依賴問題小結(jié)
Webpack通過“暫時性引用”特性處理ES6模塊的循環(huán)依賴,即在模塊加載時創(chuàng)建占位符,確保模塊能夠正確加載,本文介紹Webpack打包過程中如何處理ES6模塊的循環(huán)依賴,感興趣的朋友一起看看吧2025-02-02
最近回頭看看自己以前寫的游戲代碼，總結(jié)出幾個可以優(yōu)化改進(jìn)的地方，當(dāng)然還有很多地方需要優(yōu)化，還希望大家指出來。2010-11-11
本文主要介紹了js實現(xiàn)簡易垂直滾動條的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JS和jQuery通過this獲取html標(biāo)簽中的屬性值(實例代碼)
本文通過實例代碼給大家分享JS和jQuery通過this獲取html標(biāo)簽中的屬性值，非常不錯，具有參考借鑒價值，需要額朋友參考下吧2017-09-09
這篇文章主要介紹了Json實現(xiàn)傳值到后臺代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了js+html5實現(xiàn)復(fù)制文字按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07