日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 前端技术 > javascript >内容正文

javascript

【JavaScript学习】JavaScript对象创建

發(fā)布時(shí)間:2025/3/8 javascript 32 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【JavaScript学习】JavaScript对象创建 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.最簡(jiǎn)單的方法,創(chuàng)建一個(gè)對(duì)象,然后添加屬性

1 var person = new Object(); 2 person.age = 23; 3 person.name = "David"; 4 person.job = "student"; 5 person.sayName = function () 6 { 7 alert(this.name); 8 }; 9 10 //類似于定義鍵值對(duì)或者json數(shù)據(jù)格式的定義方法. 11 var person = 12 { 13 age:23, 14 name:"David", 15 job:"student", 16 sayName:function() 17 { 18 alert(this.name); 19 } 20 };

該方法簡(jiǎn)單明了,缺點(diǎn)就是當(dāng)要?jiǎng)?chuàng)建多個(gè)同類型的對(duì)象時(shí),重復(fù)性的代碼較多.

2.解決方法1中的問(wèn)題,借鑒許多軟件設(shè)計(jì)的思想,引入工廠模式,即構(gòu)造一個(gè)創(chuàng)建對(duì)象的工廠函數(shù),實(shí)現(xiàn)對(duì)象創(chuàng)建的功能.

1 function createPerson(name,age,job) 2 { 3 var o = new Object(); 4 o.name = name; 5 o.age = age; 6 o.job = job; 7 o.sayName = function() 8 { 9 alert(this.name); 10 }; 11 return o; 12 } 13 var person = createPerson("David",23,"student");

該方法解決了代碼重復(fù)的問(wèn)題,可以利工廠函數(shù)創(chuàng)建出多個(gè)對(duì)象.但此方法返回的對(duì)象都是Object類型,不能標(biāo)識(shí)創(chuàng)建的對(duì)象的類型屬性.

3.構(gòu)造函數(shù)模式,創(chuàng)建構(gòu)造函數(shù),結(jié)合new操作符可以創(chuàng)建對(duì)象

1 function Person(name,age,job) 2 { 3 this.name = name; 4 this.age = age; 5 this.job = job; 6 this.sayName = function() 7 { 8 alert(this.name); 9 } 10 } 11 var person1 = new Person("David",23,"student"); 12 var person2 = Person("Bill",21,"Boss"); 13 person1.sayName(); //顯示David 14 person2.sayName(); //顯示undefined 15 sayName(); //顯示Bill

person1 結(jié)合new 操作創(chuàng)建了一個(gè)對(duì)象實(shí)例,但person2沒(méi)有結(jié)合new,直接調(diào)用Person(name,age,job)函數(shù),此時(shí),函數(shù)的作用域里的this指的是window,因而出現(xiàn)后兩行的顯不結(jié)果.安全的構(gòu)造函數(shù)可以避免出現(xiàn)上述的問(wèn)題

1 function Person(name,age,job) 2 { 3 if(this instanceof Person) 4 { 5 this.name = name; 6 this.age = age; 7 this.job = job; 8 this.sayName = function() 9 { 10 alert(this.name); 11 } 12 } 13 else 14 return new Person(name,age,job); 15 }

this instanceof Person  檢測(cè)當(dāng)前this是否指向到Person對(duì)象. 這樣改進(jìn)后,將不會(huì)出上面描述的問(wèn)題.關(guān)鍵是理解this是指向當(dāng)前執(zhí)行環(huán)境的,關(guān)于函數(shù)的執(zhí)行環(huán)境以及作用域鏈,以后再作介紹.一般類型的方法是一樣的,可以共享,但使用該方法,每創(chuàng)建一個(gè)對(duì)象,都會(huì)創(chuàng)建一個(gè)方法的副本,產(chǎn)生代碼的重復(fù)性.

4.解決該問(wèn)題,可以把方法置于構(gòu)造函數(shù)體外定義,構(gòu)造函數(shù)內(nèi)只需要引用在構(gòu)造函數(shù)外定義的函數(shù)即可.

1 function Person(name,age,job) 2 { 3 this.name = name; 4 this.age = age; 5 this.job = job; 6 this.sayName = sayName; 7 } 8 9 function sayName() 10 { 11 alert(this.name); 12 }

這樣可以解決方法共享的問(wèn)題,但會(huì)引入其他問(wèn)題,這樣將導(dǎo)致global scope里將會(huì)有許有方法,使用global scope過(guò)于龐大,這樣不便于代碼管理,方法和相應(yīng)的屬性分開(kāi).

5.原型模式.

1 function Person(){} 2 Person.prototype.name = "David"; 3 Person.prototype.age = 23; 4 Person.prototype.job = "student"; 5 Person.prototype.sayName = function() 6 { 7 alert(this.name); 8 }; 9 var person1 = new Person(); 10 var person2 = new Person();

通過(guò)設(shè)置構(gòu)造函數(shù)的原型,來(lái)達(dá)到對(duì)象中屬性和方法的共享,person1和person2中對(duì)應(yīng)的屬性和方法都是一樣的. 雖然這種方法,實(shí)現(xiàn)了代碼共享,減少了代碼的重復(fù),但并不符合人們的需求,一般都是需要各個(gè)對(duì)象既有共享的方法和屬性,又有各自的特點(diǎn)和屬性.而且這種方法不能傳遞初始化參數(shù),默認(rèn)構(gòu)造的對(duì)象都具有與原型相同的屬性.

6.原型和構(gòu)造函數(shù)混合模式  利用原型來(lái)設(shè)置方法,達(dá)到方法的共享,利用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)屬性的設(shè)置,支持初始化參數(shù)傳遞,達(dá)到屬性的個(gè)性化

1 function Person(name,age,job) 2 { 3 this.name = name; 4 this.age = age; 5 this.job = job; 6 } 7 Person.prototype = { 8 constructor:Person, 9 sayName:function() 10 { 11 alert(this.name); 12 } 13 }; 14 var person1 = new Person("David",23,"student"); 15 var person2 = new Person("Bill",21,"Boss");

這樣person1和person2對(duì)應(yīng)的屬性不共享,但方法sayName共享.該方法基本可以滿足一般用戶創(chuàng)建對(duì)象的需求.該方法存在一點(diǎn)不好,就是方法和屬性要分開(kāi)設(shè)置,而且在利用原型設(shè)置方法時(shí),若是重寫(xiě)原型,則必須指定constructor為構(gòu)造函數(shù),若是只設(shè)置相應(yīng)的屬性,如Person.prototype.sayName = function(){};則不需要指定constructor屬性.

7.動(dòng)態(tài)原型模式 可以將屬性和方法設(shè)置一起置于構(gòu)造函數(shù)內(nèi).

1 function Person(name,age,job) 2 { 3 this.name = name; 4 this.age = age; 5 this.job = job; 6    7   if(typeof this.sayName != "function") 8 { 9 Person.prototype.sayName = function() 10 { 11 alert(this.name); 12 }; 13 } 14 }

檢測(cè)this.sayName是否已經(jīng)定義,若定義了,則不用設(shè)置原型.否則,設(shè)置原型定義sayName函數(shù).這種方法同樣可以達(dá)到屬性個(gè)性化,方法共享的要求

?????? 總結(jié),以上就是幾種關(guān)于對(duì)象創(chuàng)建的方法的總結(jié),逐步完善,從每種方法存在的問(wèn)題出發(fā),從而尋找更好的解決方法,這樣可以進(jìn)一步的理解javascript中各種機(jī)制設(shè)計(jì)的最初目的.

?

總結(jié)

以上是生活随笔為你收集整理的【JavaScript学习】JavaScript对象创建的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。