Javascript 構(gòu)造函數(shù)詳解
一、什么是構(gòu)造函數(shù)
在一些面向?qū)ο蟮恼Z言，如Java、C++、PHP中，構(gòu)造函數(shù)是很常見的。在Javascript中構(gòu)造函數(shù)首先是一個(gè)普通的函數(shù)，它可以使用new 操作符來調(diào)用，并生成一個(gè)特殊類型的對象。
// "Benjamin" is a constructor
var benjamin = new Benjamin("zuojj", "male");
在上面這個(gè)實(shí)例中benjamin是一個(gè)Benjamin對象，那么它是如何來實(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ù)僅僅是接收傳遞過來的參數(shù)，并把它們賦值給this對象。這是因?yàn)楫?dāng)構(gòu)造函數(shù)被new操作符調(diào)用時(shí)，構(gòu)造函數(shù)的this對象賦值為new操作返回的對象。
這意味著上面的代碼等同于：
benjamin = {
"username": "zuojj",
"sex": "male"
}
二、為什么使用構(gòu)造函數(shù)
為什么使用構(gòu)造函數(shù)，有以下幾個(gè)方面的原因：
1.使用構(gòu)造函數(shù)，意味著所有的這些對象，都可以使用相同的基本結(jié)構(gòu)創(chuàng)建
2.使用構(gòu)造函數(shù)，意味著“benjamin”對象被明確的標(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)鍵字，對this對象的影響很大，不用new關(guān)鍵字的情況下，this對象會指向全局對象（window in browser and global in node）。因此定義構(gòu)造函數(shù)時(shí)，建議函數(shù)名稱首字母大寫。
2.如果被調(diào)用的函數(shù)沒有顯式的 return 表達(dá)式，則隱式的會返回 this 對象 – 也就是新創(chuàng)建的對象，否則將會影響返回的結(jié)果，但僅限于返回的是一個(gè)對象
function Bar() {
return 2;
}
var bar = new Bar();
//返回新創(chuàng)建的對象
//Outputs: Bar {}
console.log(bar);
function Test() {
this.value = 2;
return {
foo: 1
};
}
var test = new Test();
//返回的對象
//Outputs: Object {foo: 1}
console.log(test);
我們需要注意的是：
a) new Bar() 返回的是新創(chuàng)建的對象，而不是數(shù)字的字面值 2。 因此 new Bar().constructor === Bar，但是如果返回的是數(shù)字對象，結(jié)果就不同了;
b) 這里得到的 new Test()是函數(shù)返回的對象，而不是通過new關(guān)鍵字新創(chuàng)建的對象，如下所示：
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);
以上就是對構(gòu)造函數(shù)的總結(jié)，希望對初學(xué)者有所幫助，文中不妥之處，望批評、斧正。
相關(guān)文章
這篇文章主要介紹了將RGB值轉(zhuǎn)換為灰度值的簡單算法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Javascript語法，初學(xué)js的朋友都應(yīng)該知道，下面整理了12種不宜使用的js語法，感興趣的朋友可以參考下2013-11-11
JavaScript Try...Catch 聲明的 使用方法
JavaScript Try...Catch 聲明的 使用方法...2007-04-04
關(guān)于js中alert彈出窗口文本換行問題簡單詳細(xì)說明
總結(jié)javascript三元運(yùn)算符知識點(diǎn)
使用Java實(shí)現(xiàn)簡單的server/client回顯功能的方法介紹
