JavaScript中的 new 命令
面向?qū)ο缶幊蹋∣bject Oriented Programming,縮寫(xiě)為 OOP)是目前主流的編程范式。
那么,“對(duì)象”(object)到底是什么?
對(duì)象是單個(gè)實(shí)物的抽象。
對(duì)象是一個(gè)容器,封裝了屬性(property)和方法(method)。 屬性是對(duì)象的狀態(tài),方法是對(duì)象的行為(完成某種任務(wù))。
2. 構(gòu)造函數(shù)
面向?qū)ο缶幊痰牡谝徊?,就是要生成?duì)象。通常需要一個(gè)模板,表示某一類(lèi)實(shí)物的共同特征,然后對(duì)象根據(jù)這個(gè)模板生成。
JavaScript 語(yǔ)言使用構(gòu)造函數(shù)(constructor)作為對(duì)象的模板。 “構(gòu)造函數(shù)”,就是專(zhuān)門(mén)用來(lái)生成實(shí)例對(duì)象的函數(shù)。
它就是對(duì)象的模板,描述實(shí)例對(duì)象的基本結(jié)構(gòu)。一個(gè)構(gòu)造函數(shù),可以生成多個(gè)實(shí)例對(duì)象,這些實(shí)例對(duì)象都有相同的結(jié)構(gòu)。
var Vehicle = function () {
this.price = 1000;
};
上面代碼中, Vehicle 就是構(gòu)造函數(shù)。為了與普通函數(shù)區(qū)別,構(gòu)造函數(shù)名字的第一個(gè)字母通常大寫(xiě)。
構(gòu)造函數(shù)的特點(diǎn)有兩個(gè)。
this
new
3. new 命令
3.1 基本用法
3.1.1 new 的基本用法
new 命令的作用,就是執(zhí)行構(gòu)造函數(shù),返回一個(gè)實(shí)例對(duì)象。
var Vehicle = function () {
this.price = 1000;
};
var v = new Vehicle();
v.price // 1000
上面代碼通過(guò) new 命令,讓構(gòu)造函數(shù) Vehicle 生成一個(gè)實(shí)例對(duì)象,保存在變量 v 中。 new 命令執(zhí)行時(shí),構(gòu)造函數(shù)內(nèi)部的 this ,就代表了新生成的實(shí)例對(duì)象, this.price 表示實(shí)例對(duì)象有一個(gè) price 屬性,值是1000。
下面兩行代碼是等價(jià)的,但是為了表示這里是函數(shù)調(diào)用, 推薦使用括號(hào) 。
// 推薦的寫(xiě)法 var v = new Vehicle(); // 不推薦的寫(xiě)法 var v = new Vehicle;
3.1.2 保證構(gòu)造函數(shù)必須與 new 命令一起使用
如果忘了使用 new 命令,直接調(diào)用構(gòu)造函數(shù)會(huì)發(fā)生什么事?
var Vehicle = function (){
this.price = 1000;
};
var v = Vehicle();
v // undefined
price // 1000
上面代碼中,調(diào)用 Vehicle 構(gòu)造函數(shù)時(shí),忘了加上 new 命令。結(jié)果,變量 v 變成了 undefined ,而 price 屬性變成了全局變量。因此,應(yīng)該非常小心,避免不使用 new 命令、直接調(diào)用構(gòu)造函數(shù)。
為了保證構(gòu)造函數(shù)必須與 new 命令一起使用,有2種解決辦法:
構(gòu)造函數(shù)內(nèi)部使用嚴(yán)格模式,即第一行加上 use strict 。 這樣的話,一旦忘了使用 new 命令,直接調(diào)用構(gòu)造函數(shù)就會(huì)報(bào)錯(cuò)。
function Fubar(foo, bar){
'use strict';
this._foo = foo;
this._bar = bar;
}
Fubar()
// TypeError: Cannot set property '_foo' of undefined
上面代碼的 Fubar 為構(gòu)造函數(shù), use strict 命令保證了該函數(shù)在嚴(yán)格模式下運(yùn)行。由于嚴(yán)格模式中,函數(shù)內(nèi)部的 this 不能指向全局對(duì)象,默認(rèn)等于 undefined ,導(dǎo)致不加 new 調(diào)用會(huì)報(bào)錯(cuò)(JavaScript 不允許對(duì) undefined 添加屬性)。
構(gòu)造函數(shù)內(nèi)部判斷是否使用 new 命令,如果發(fā)現(xiàn)沒(méi)有使用,則直接返回一個(gè)實(shí)例對(duì)象。
function Fubar(foo, bar) {
if (!(this instanceof Fubar)) {
return new Fubar(foo, bar);
}
this._foo = foo;
this._bar = bar;
}
Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1
3.2 new 命令的原理
使用 new 命令時(shí),它后面的函數(shù)依次執(zhí)行下面的步驟。
prototype
this
也就是說(shuō),構(gòu)造函數(shù)內(nèi)部, this 指的是一個(gè)新生成的空對(duì)象,所有針對(duì) this 的操作,都會(huì)發(fā)生在這個(gè)空對(duì)象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”,就是說(shuō)這個(gè)函數(shù)的目的,就是操作一個(gè)空對(duì)象(即 this 對(duì)象),將其“構(gòu)造”為需要的樣子。
3.2.1 關(guān)于 return 語(yǔ)句
如果構(gòu)造函數(shù)內(nèi)部有 return 語(yǔ)句,而且 return 后面跟著一個(gè)對(duì)象, new 命令會(huì)返回 return 語(yǔ)句指定的對(duì)象;否則,就會(huì)不管 return 語(yǔ)句,返回 this 對(duì)象。
var Vehicle = function () {
this.price = 1000;
return 1000;
};
(new Vehicle()) === 1000
// false new命令忽略了這個(gè) return 語(yǔ)句,返回“構(gòu)造”后的 this 對(duì)象。
如果 return 語(yǔ)句返回的是一個(gè)跟 this 無(wú)關(guān)的新對(duì)象, new 命令會(huì)返回這個(gè)新對(duì)象,而不是 this 對(duì)象。
var Vehicle = function (){
this.price = 1000;
return { price: 2000 };
};
(new Vehicle()).price
// 2000 new 命令返回這個(gè)對(duì)象,而不是 this 對(duì)象。
3.2.2 對(duì)普通函數(shù)使用 new
如果對(duì)普通函數(shù)(內(nèi)部沒(méi)有 this 關(guān)鍵字的函數(shù))使用 new 命令,則會(huì) 返回一個(gè)空對(duì)象 。
function getMessage() {
return 'this is a message';
}
var msg = new getMessage();
msg // {}
typeof msg // "object"
這是因?yàn)?new 命令總是返回一個(gè)對(duì)象,要么是實(shí)例對(duì)象,要么是 return 語(yǔ)句指定的對(duì)象。本例中, return 語(yǔ)句返回的是字符串,所以 new 命令就忽略了該語(yǔ)句。
相關(guān)文章
JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法,結(jié)合實(shí)例形式分析了javascript數(shù)獨(dú)判斷的原理及相關(guān)算法實(shí)現(xiàn)、使用操作技巧,需要的朋友可以參考下2019-02-02
淺談js函數(shù)三種定義方式 & 四種調(diào)用方式 & 調(diào)用順序
下面小編就為大家?guī)?lái)一篇淺談js函數(shù)三種定義方式 & 四種調(diào)用方式 & 調(diào)用順序。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)選擇規(guī)格顏色效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)選擇規(guī)格顏色選中效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫(xiě)原生js)
常用的頁(yè)面效果有彈出層效果,無(wú)縫滾動(dòng)效果,選項(xiàng)卡切換效果,接下來(lái)與大家分享一款自己用原生javascript寫(xiě)的選項(xiàng)卡切換效果,感興趣的朋友可以參考下哈2013-03-03
JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà),有加速減速啟動(dòng)停止功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02

