javascript創(chuàng)建一個對象的方法
這篇文章主要介紹“javascript創(chuàng)建一個對象的方法”，在日常操作中，相信很多人在javascript創(chuàng)建一個對象的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript創(chuàng)建一個對象的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
公司主營業(yè)務：做網(wǎng)站、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出應縣免費做網(wǎng)站回饋大家。
javascript創(chuàng)建一個對象的方法：1、使用new關鍵字調(diào)用構造器創(chuàng)建對象；2、利用工廠方法創(chuàng)建對象；3、利用構造函數(shù)方法創(chuàng)建對象；4、利用原型方法創(chuàng)建對象；5、利用混合的構造函數(shù)/原型方式創(chuàng)建對象；6、利用動態(tài)原型方法創(chuàng)建對象。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
我們可以利用JavaScript的語法特征，以類的思想來創(chuàng)建對象。
方法一：原始方法--使用new關鍵字調(diào)用構造器創(chuàng)建對象
代碼如下：
<script>
var obj = new Object();
obj.name = "Kitty";//為對象增加屬性
obj.age = 21;
obj.showName = function () {//為對象添加方法
console.log(this.name);
};
obj.showAge = function(){
console.log(this.age);
};
obj.showName();
obj.showAge();
</script>這種方法通過new關鍵字生成一個對象，然后根據(jù)JavaScript是動態(tài)語言的特性來添加屬性和方法，構造一個對象。其中的this表示調(diào)用該方法的對象。
這種方法的問題在于：如果我們需要多次創(chuàng)建對象，那么就需要重復代碼多次，不利于代碼的復用。
方法二：工廠方法
代碼如下：
<script>
function createObj(){
var obj = new Object();//創(chuàng)建對象
obj.name = "Kitty";
obj.age = "21";
obj.showName = function () {
console.log(this.name);
};
obj.showAge = function () {
console.log(this.age);
};
return obj;
}
var obj1 = createObj();
var obj2 = createObj();
obj1.showName();
obj1.showAge();
obj2.showName();
obj2.showAge();
</script>這種方法雖然也實現(xiàn)了創(chuàng)建對象，但是同樣地，如果需要多次創(chuàng)建對象，而且屬性內(nèi)容不一樣的話，也是需要重復代碼多遍。需要重新考慮代碼重用率，接下來修改代碼，使其可以提高代碼重復率，而且可以改變工廠方法，傳入?yún)?shù)賦值。
改進代碼如下：
<script>
function createObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.showName = function () {
console.log(this.name);
};
obj.showAge = function(){
console.log(this.age);
};
return obj;
}
var obj1 = new createObj("Kitty","21");
var obj2 = new createObj("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>這種方法雖然可以提高代碼的重用率，但和面向對象中類的概念相比，有一個很大的缺陷。面向對象強調(diào)對象的屬性私有，但對象的方法是共享。而上面的工廠方法在創(chuàng)建對象時，要為每個對象創(chuàng)建各自私有的方法。同時，由于為每個對象都創(chuàng)建邏輯相同的方法，所以很浪費內(nèi)存。
改進代碼如下：
<script>
function createObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj;
}
function showName(){
console.log(this.name);
}
function showAge(){
console.log(this.age);
}
var obj1 = new createObj("Kitty","21");
var obj2 = new createObj("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>上面通過定義幾個函數(shù)對象，解決了不同對象持有函數(shù)對象的私有問題?，F(xiàn)在所有對象的方法都持有上面兩個函數(shù)的引用。但是這么一來，對象的函數(shù)和對象又相互獨立，這和面向對象中特定方法屬于特定類的思想不符合。
方法三：構造函數(shù)方法
代碼如下：
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function () {
console.log(this.name);
};
this.showAge = function () {
console.log(this.age);
};
}
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>構造函數(shù)的方法和工廠方法一樣，會為每個對象創(chuàng)建獨享的函數(shù)對象。當然也可以將這些函數(shù)對象定義在構造函數(shù)外面，這樣有了對象和方法相互獨立的問題。
使用構造函數(shù)存在的最大問題就是每個實例都會將所有的屬性創(chuàng)建一次。這個對于數(shù)值屬性來說可以接受，但是如果函數(shù)方法每個實例都要創(chuàng)建一遍，則不合理。
要創(chuàng)建Person()的新實例，必須使用new操作符。以這種方式調(diào)用構造函數(shù)實際上會經(jīng)歷以下四個步驟：
創(chuàng)建一個新對象；
將構造函數(shù)的作用域賦給新對象（因此this就指向了這個新對象）；
執(zhí)行構造函數(shù)中的代碼（為這個新對象添加屬性）；
返回新對象。
方法四：原型方法
代碼如下：
<script>
function Person(){} //定義一個空構造函數(shù)，且不能傳遞參數(shù)
//將所有的屬性的方法都賦予prototype
Person.prototype.name = "Kitty";
Person.prototype.age = 21;
Person.prototype.showName = function (){
console.log(this.name);
};
Person.prototype.showAge = function (){
console.log(this.age);
};
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>當生成Person對象時，prototype的屬性都賦給了新的對象。那么屬性和方法是共享的。首先，該方法的問題是構造函數(shù)不能傳遞參數(shù)，每個新生成的對象都有默認值。其次，方法共享沒有任何問題，但是，當屬性是可改變狀態(tài)的對象時，屬性共享就有問題。
修改代碼如下：
<script>
function Person(){} //定義一個空構造函數(shù)，且不能傳遞參數(shù)
//將所有的屬性的方法都賦予prototype
Person.prototype.age = 21;
Person.prototype.array = new Array("Kitty","luo");
Person.prototype.showAge = function (){
console.log(this.age);
};
Person.prototype.showArray = function (){
console.log(this.array);
};
var obj1 = new Person();
var obj2 = new Person();
obj1.array.push("Wendy");//向obj1的array屬性添加一個元素
obj1.showArray();//Kitty,luo,Wendy
obj2.showArray();//Kitty,luo,Wendy
</script>上面的代碼通過obj1的屬性array添加元素時，obj2的array屬性的元素也跟著受到影響，原因就在于obj1和obj2對象的array屬性引用的是同一個Array對象，那么改變這個Array對象，另一引用該Array對象的屬性自然也會受到影響，混合的構造函數(shù)/原型方式使用構造函數(shù)定義對象的屬性，使用原型方法定義對象的方法，這樣就可以做到屬性私有，而方法共享。
方法五：混合的構造函數(shù)/原型方式
代碼如下：
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.array = new Array("Kitty","luo");
}
Person.prototype.showName = function (){
console.log(this.name);
};
Person.prototype.showArray = function (){
console.log(this.array);
};
var obj1 = new Person("Kitty",21);
var obj2 = new Person("luo",22);
obj1.array.push("Wendy");//向obj1的array屬性添加一個元素
obj1.showArray();//Kitty,luo,Wendy
obj1.showName();//Kitty
obj2.showArray();//Kitty,luo
obj2.showName();//luo
</script>屬性私有后，改變各自的屬性不會影響別的對象。同時，方法也是由各個對象共享的。在語義上，這符合了面向對象編程的要求。
方法六：動態(tài)原型方法
代碼如下：
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.array = new Array("Kitty","luo");
//如果Person對象中_initialized 為undefined，表明還沒有為Person的原型添加方法
if(typeof Person._initialized == "undefined"){
Person.prototype.showName = function () {
console.log(this.name);
};
Person.prototype.showArray = function () {
console.log(this.array);
};
Person._initialized = true;
}
}
var obj1 = new Person("Kitty",21);
var obj2 = new Person("luo",22);
obj1.array.push("Wendy");//向obj1的array屬性添加一個元素
obj1.showArray();//Kitty,luo,Wendy
obj1.showName();//Kitty
obj2.showArray();//Kitty,luo
obj2.showName();//luo
</script>這種方法和構造函數(shù)/原型方式大同小異。只是將方法的添加放到了構造函數(shù)之中，同時在構造函數(shù)Person上添加了一個屬性用來保證if語句只能成功執(zhí)行一次，在實際應用中，采用最廣泛的構造函數(shù)/原型方法。動態(tài)原型方法也很流行，它在功能上和構造函數(shù)/原型方法是等價的。不要單獨使用構造函數(shù)和原型方法。
到此，關于“javascript創(chuàng)建一個對象的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)站欄目：javascript創(chuàng)建一個對象的方法
文章轉載：http://jinyejixie.com/article36/ggicsg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、ChatGPT、網(wǎng)站設計、品牌網(wǎng)站建設、手機網(wǎng)站建設、軟件開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 營銷型網(wǎng)站建設為什么使用div+CSS來制作 2021-09-23
- 營銷型網(wǎng)站建設不可缺少的幾點要素 2022-08-06
- 外貿(mào)營銷型網(wǎng)站建設的要點 2022-06-10
- 營銷型網(wǎng)站建設中圖片優(yōu)化很重要 2022-12-05
- 如何打造一個成功的營銷型網(wǎng)站建設？ 2020-10-30
- 營銷型網(wǎng)站建設要想取得成功，首先要留住用戶 2015-05-11
- 了解營銷型網(wǎng)站建設的常見問題 2023-03-27
- 企業(yè)營銷型網(wǎng)站建設費用憑什么要好幾萬 2022-08-06
- 營銷型網(wǎng)站建設有什么特點 2023-01-28
- 怎樣做好營銷型網(wǎng)站建設方案？ 2016-10-02
- 營銷型網(wǎng)站建設具有什么特征？ 2022-09-30
- 為什么營銷型網(wǎng)站建設那么受歡迎？ 2021-12-14