這篇文章將為大家詳細(xì)講解有關(guān)如何在JavaScript項目中使用new 命令,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
公司主營業(yè)務(wù):網(wǎng)站建設(shè)、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出永德免費做網(wǎng)站回饋大家。
面向?qū)ο缶幊蹋∣bject Oriented Programming,縮寫為 OOP)是目前主流的編程范式。
那么,“對象”(object)到底是什么?
對象是單個實物的抽象。
對象是一個容器,封裝了屬性(property)和方法(method)。 屬性是對象的狀態(tài),方法是對象的行為(完成某種任務(wù))。
2. 構(gòu)造函數(shù)
面向?qū)ο缶幊痰牡谝徊剑褪且蓪ο?。通常需要一個模板,表示某一類實物的共同特征,然后對象根據(jù)這個模板生成。
JavaScript 語言使用構(gòu)造函數(shù)(constructor)作為對象的模板。 “構(gòu)造函數(shù)”,就是專門用來生成實例對象的函數(shù)。
它就是對象的模板,描述實例對象的基本結(jié)構(gòu)。一個構(gòu)造函數(shù),可以生成多個實例對象,這些實例對象都有相同的結(jié)構(gòu)。
var Vehicle = function () { this.price = 1000; };
上面代碼中, Vehicle 就是構(gòu)造函數(shù)。為了與普通函數(shù)區(qū)別,構(gòu)造函數(shù)名字的第一個字母通常大寫。
構(gòu)造函數(shù)的特點有兩個。
this
new
3. new 命令
3.1 基本用法
3.1.1 new 的基本用法
new 命令的作用,就是執(zhí)行構(gòu)造函數(shù),返回一個實例對象。
var Vehicle = function () { this.price = 1000; }; var v = new Vehicle(); v.price // 1000
上面代碼通過 new 命令,讓構(gòu)造函數(shù) Vehicle 生成一個實例對象,保存在變量 v 中。 new 命令執(zhí)行時,構(gòu)造函數(shù)內(nèi)部的 this ,就代表了新生成的實例對象, this.price 表示實例對象有一個 price 屬性,值是1000。
下面兩行代碼是等價的,但是為了表示這里是函數(shù)調(diào)用, 推薦使用括號 。
// 推薦的寫法 var v = new Vehicle(); // 不推薦的寫法 var v = new Vehicle;
3.1.2 保證構(gòu)造函數(shù)必須與 new 命令一起使用
如果忘了使用 new 命令,直接調(diào)用構(gòu)造函數(shù)會發(fā)生什么事?
var Vehicle = function (){ this.price = 1000; }; var v = Vehicle(); v // undefined price // 1000
上面代碼中,調(diào)用 Vehicle 構(gòu)造函數(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ù)就會報錯。
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)格模式中,函數(shù)內(nèi)部的 this 不能指向全局對象,默認(rèn)等于 undefined ,導(dǎo)致不加 new 調(diào)用會報錯(JavaScript 不允許對 undefined 添加屬性)。
構(gòu)造函數(shù)內(nèi)部判斷是否使用 new 命令,如果發(fā)現(xiàn)沒有使用,則直接返回一個實例對象。
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ù)依次執(zhí)行下面的步驟。
prototype
this
也就是說,構(gòu)造函數(shù)內(nèi)部, this 指的是一個新生成的空對象,所有針對 this 的操作,都會發(fā)生在這個空對象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”,就是說這個函數(shù)的目的,就是操作一個空對象(即 this 對象),將其“構(gòu)造”為需要的樣子。
3.2.1 關(guān)于 return 語句
如果構(gòu)造函數(shù)內(nèi)部有 return 語句,而且 return 后面跟著一個對象, new 命令會返回 return 語句指定的對象;否則,就會不管 return 語句,返回 this 對象。
var Vehicle = function () { this.price = 1000; return 1000; }; (new Vehicle()) === 1000 // false new命令忽略了這個 return 語句,返回“構(gòu)造”后的 this 對象。
如果 return 語句返回的是一個跟 this 無關(guān)的新對象, new 命令會返回這個新對象,而不是 this 對象。
var Vehicle = function (){ this.price = 1000; return { price: 2000 }; }; (new Vehicle()).price // 2000 new 命令返回這個對象,而不是 this 對象。
3.2.2 對普通函數(shù)使用 new
如果對普通函數(shù)(內(nèi)部沒有 this 關(guān)鍵字的函數(shù))使用 new 命令,則會 返回一個空對象 。
function getMessage() { return 'this is a message'; } var msg = new getMessage(); msg // {} typeof msg // "object"
這是因為 new 命令總是返回一個對象,要么是實例對象,要么是 return 語句指定的對象。本例中, return 語句返回的是字符串,所以 new 命令就忽略了該語句。
關(guān)于如何在JavaScript項目中使用new 命令就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
新聞名稱:如何在JavaScript項目中使用new命令
URL地址:http://www.rwnh.cn/article46/jgjjhg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、品牌網(wǎng)站制作、虛擬主機、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)