Javascript 構(gòu)造函數(shù)詳解
一、什么是構(gòu)造函數(shù)
在一些面向?qū)ο蟮恼Z(yǔ)言,如Java、C++、PHP中,構(gòu)造函數(shù)是很常見(jiàn)的。在Javascript中構(gòu)造函數(shù)首先是一個(gè)普通的函數(shù),它可以使用new 操作符來(lái)調(diào)用,并生成一個(gè)特殊類(lèi)型的對(duì)象。
// "Benjamin" is a constructor
var benjamin = new Benjamin("zuojj", "male");
在上面這個(gè)實(shí)例中benjamin是一個(gè)Benjamin對(duì)象,那么它是如何來(lái)實(shí)例化的呢?
function Benjamin(username, sex) {
this.username = username;
this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
正如我們所看到的,“Benjamin”構(gòu)造函數(shù)僅僅是接收傳遞過(guò)來(lái)的參數(shù),并把它們賦值給this對(duì)象。這是因?yàn)楫?dāng)構(gòu)造函數(shù)被new操作符調(diào)用時(shí),構(gòu)造函數(shù)的this對(duì)象賦值為new操作返回的對(duì)象。
這意味著上面的代碼等同于:
benjamin = {
"username": "zuojj",
"sex": "male"
}
二、為什么使用構(gòu)造函數(shù)
為什么使用構(gòu)造函數(shù),有以下幾個(gè)方面的原因:
1.使用構(gòu)造函數(shù),意味著所有的這些對(duì)象,都可以使用相同的基本結(jié)構(gòu)創(chuàng)建
2.使用構(gòu)造函數(shù),意味著“benjamin”對(duì)象被明確的標(biāo)記為“Benjamin”函數(shù)的實(shí)例
function Benjamin(username, sex) {
this.username = username;
this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = {
"username": "zuojj",
"sex": "male"
}
//Outputs: true
console.log(benjamin instanceof Benjamin);
//Outputs: false
console.log(ben instanceof Benjamin);
3.使用構(gòu)造函數(shù),意味著我們可以在原型上定義公共方法,供多個(gè)實(shí)例共享
function Benjamin(username, sex) {
this.username = username;
this.sex = sex;
}
Benjamin.prototype.getName = function() {
return this.username;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("lemon", "female");
//Outputs: zuojj
console.log(benjamin.getName());
//Outputs: lemon
console.log(ben.getName());
三、注意事項(xiàng)
1.new 關(guān)鍵字
在實(shí)例化構(gòu)造函數(shù)的時(shí)候一定不要忘了使用new關(guān)鍵字,是否使用new關(guān)鍵字,對(duì)this對(duì)象的影響很大,不用new關(guān)鍵字的情況下,this對(duì)象會(huì)指向全局對(duì)象(window in browser and global in node)。因此定義構(gòu)造函數(shù)時(shí),建議函數(shù)名稱(chēng)首字母大寫(xiě)。
2.如果被調(diào)用的函數(shù)沒(méi)有顯式的 return 表達(dá)式,則隱式的會(huì)返回 this 對(duì)象 – 也就是新創(chuàng)建的對(duì)象,否則將會(huì)影響返回的結(jié)果,但僅限于返回的是一個(gè)對(duì)象
function Bar() {
return 2;
}
var bar = new Bar();
//返回新創(chuàng)建的對(duì)象
//Outputs: Bar {}
console.log(bar);
function Test() {
this.value = 2;
return {
foo: 1
};
}
var test = new Test();
//返回的對(duì)象
//Outputs: Object {foo: 1}
console.log(test);
我們需要注意的是:
a) new Bar() 返回的是新創(chuàng)建的對(duì)象,而不是數(shù)字的字面值 2。 因此 new Bar().constructor === Bar,但是如果返回的是數(shù)字對(duì)象,結(jié)果就不同了;
b) 這里得到的 new Test()是函數(shù)返回的對(duì)象,而不是通過(guò)new關(guān)鍵字新創(chuàng)建的對(duì)象,如下所示:
function Bar() {
return 2;
}
var bar = new Bar();
function BarN() {
return new Number(2);
}
var barn = new BarN();
//Outputs: true
console.log(bar.constructor === Bar);
//Outputs: Number {}
console.log(barn);
//Ouputs: false
console.log(barn.constructor === BarN);
//Outputs: true
console.log(barn.constructor === Number);
/* -------------------------------------- */
function Test() {
this.value = 2;
return {
foo: 1
};
}
var test = new Test();
//Outputs: undefined
console.log(test.value);
//Ouputs: 1
console.log(test.foo);
以上就是對(duì)構(gòu)造函數(shù)的總結(jié),希望對(duì)初學(xué)者有所幫助,文中不妥之處,望批評(píng)、斧正。
相關(guān)文章
JavaScript前端圖片加載管理器imagepool使用詳解
這篇文章主要介紹了JavaScript前端圖片加載管理器imagepool使用詳解,需要的朋友可以參考下2014-12-12javascript?DOM?querySelectorAll()?使用方法
querySelectorAll()?方法返回文檔中匹配指定?CSS?選擇器的所有元素,返回?NodeList?對(duì)象,一般用來(lái)獲取指定id火class下的所有節(jié)點(diǎn)2023-06-06TypeScript基礎(chǔ)class類(lèi)教程示例
這篇文章主要為大家介紹了TypeScript基礎(chǔ)class類(lèi)教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-02-02Javascript全局變量var與不var的區(qū)別深入解析
這篇文章主要介紹了Javascript全局變量var與不var的區(qū)別。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12javascript 進(jìn)階篇3 Ajax 、JSON、 Prototype介紹
javascript 進(jìn)階篇3 Ajax 、JSON、 Prototype介紹,學(xué)習(xí)js的朋友可以參考下2012-03-03javascript學(xué)習(xí)(一)構(gòu)建自己的JS庫(kù)
庫(kù)是一個(gè)飽受爭(zhēng)議的熱門(mén)話題。一種觀點(diǎn)認(rèn)為它是一種非常棒的工具,是任何開(kāi)發(fā)者都不可或缺的;另一種觀點(diǎn)則認(rèn)為在不理解庫(kù)的內(nèi)部工作原理的情況下對(duì)庫(kù)形成依賴,會(huì)助長(zhǎng)懶惰的風(fēng)氣從而導(dǎo)致開(kāi)發(fā)者素質(zhì)下降2013-01-01