本篇內(nèi)容主要講解“JavaScript對(duì)象的構(gòu)造函數(shù)和new操作符怎么用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JavaScript對(duì)象的構(gòu)造函數(shù)和new操作符怎么用”吧!

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供翁源企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站制作、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為翁源眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

23.JavaScript對(duì)象的構(gòu)造函數(shù)和操作符new

一、前言

前文講到的對(duì)象創(chuàng)建方法都是直接使用let obj = {...}語(yǔ)法，具體方法如下：

let user = {
    name:'xiaoming',
    ...}

這樣的對(duì)象創(chuàng)建方法雖然簡(jiǎn)單又直接，但是對(duì)象的代碼無(wú)法重用，在創(chuàng)建很多類(lèi)似對(duì)象時(shí)，代碼量會(huì)很高。

此時(shí)，就需要使用構(gòu)造函數(shù)，和new操作符實(shí)現(xiàn)相似對(duì)象的構(gòu)建。

二、構(gòu)造函數(shù)

如果學(xué)習(xí)過(guò)其他面向?qū)ο笳Z(yǔ)言的童鞋對(duì)構(gòu)造方法應(yīng)該都不陌生，尤其是學(xué)習(xí)C++的童鞋應(yīng)該印象會(huì)非常深刻。

構(gòu)造函數(shù)概念和用途

在其他面向?qū)ο蟮恼Z(yǔ)言中，構(gòu)造函數(shù)通常是這樣定義的：

構(gòu)造函數(shù)是一個(gè)特殊的成員函數(shù)，名字與類(lèi)名相同，創(chuàng)建類(lèi)類(lèi)型對(duì)象時(shí)由編譯器自動(dòng)調(diào)用，保證每個(gè)數(shù)據(jù)成員都有一個(gè)合適的初始值，并且在對(duì)象的生命周期內(nèi)只調(diào)用一次。

我們可以簡(jiǎn)單的理解為，構(gòu)造函數(shù)是所有對(duì)象的成員方法中，最早被調(diào)用的那個(gè)。常用于初始化對(duì)象的狀態(tài)，例如人的名字、火車(chē)的節(jié)數(shù)等。

和構(gòu)造函數(shù)對(duì)應(yīng)的是析構(gòu)函數(shù)，析構(gòu)函數(shù)是所有對(duì)象的成員方法中，最后被調(diào)用的那個(gè)，常常是對(duì)象失去存在價(jià)值，用于回收對(duì)象資源。

對(duì)象的生命周期

一個(gè)對(duì)象從創(chuàng)建到回收，總共可以劃分為3個(gè)階段，如下圖：

其中，對(duì)象創(chuàng)建階段的主要工作由構(gòu)造函數(shù)完成，包括對(duì)象的初始化，關(guān)系的連接等。執(zhí)行階段主要是對(duì)象功能的調(diào)用，用于配合整個(gè)項(xiàng)目的執(zhí)行，通常由普通函數(shù)（對(duì)象的成員函數(shù)）完成。銷(xiāo)毀階段由析構(gòu)函數(shù)接手，用于清除對(duì)象占用的內(nèi)存空間，防止內(nèi)存泄漏的發(fā)生。

JavaScript構(gòu)造函數(shù)

相比于其他面向?qū)ο笳Z(yǔ)言，JavaScript對(duì)象的構(gòu)造函數(shù)比較特殊，它可以是任何一個(gè)普通的函數(shù)，而且無(wú)需在對(duì)象中定義。只有兩個(gè)約定：

1. 構(gòu)造函數(shù)的命名通常以大寫(xiě)開(kāi)頭；

2. 構(gòu)造函數(shù)智能由new操作符執(zhí)行；

例如：

function People(name){
    this.name = name;}

以上代碼中的People函數(shù)就可以當(dāng)作構(gòu)造函數(shù)使用，同時(shí)它也是一個(gè)普通的函數(shù)。對(duì)象的this指針章節(jié)，我們介紹過(guò)，如果一個(gè)普通函數(shù)中使用this，this的內(nèi)容取決于調(diào)用它的對(duì)象（obj.func()），如果不使用對(duì)象調(diào)用函數(shù)，那么this在非嚴(yán)格模式下就是Window，嚴(yán)格模式下就是undefined。

通常情況下，直接調(diào)用構(gòu)造函數(shù)會(huì)得到不正確的結(jié)果，如果我們希望把函數(shù)當(dāng)作構(gòu)造函數(shù)調(diào)用，就需要使用一個(gè)新的關(guān)鍵字new。

以下代碼使用new關(guān)鍵字創(chuàng)建了兩個(gè)People對(duì)象：

let xiaoming = new People('xiaoming');
let xiaohong = new People('xiaohong');
console.log(xiaoming.name);
console.log(xiaohong.name);

以下是代碼的執(zhí)行結(jié)果：

三、new 關(guān)鍵字

當(dāng)使用new調(diào)用一個(gè)函數(shù)時(shí)，這個(gè)函數(shù)就會(huì)變成構(gòu)造函數(shù)，此時(shí)，引擎就會(huì)執(zhí)行以下動(dòng)作：

1. 創(chuàng)建一個(gè)新的空對(duì)象{ }，并把空對(duì)象賦值給this；

2. 執(zhí)行構(gòu)造函數(shù)體，通常會(huì)通過(guò)this構(gòu)造對(duì)象的內(nèi)部結(jié)構(gòu)；

3. 返回this的值；

你沒(méi)有看錯(cuò)，使用new調(diào)用函數(shù)后，函數(shù)是有返回值的，即使在定義函數(shù)時(shí)沒(méi)有return語(yǔ)句。

代碼new People('xiaoming')所做的事情大概類(lèi)似以下代碼：

function People(name){
    this = {};//隱式的創(chuàng)建一個(gè)空對(duì)象
    this.name = name;
    return this;//把創(chuàng)建的對(duì)象返回}

所以使用new調(diào)用構(gòu)造函數(shù)后，得到的是一個(gè)由構(gòu)造函數(shù)塑造過(guò)的對(duì)象。

使用new關(guān)鍵字的好處是，我們可以書(shū)寫(xiě)一次構(gòu)造函數(shù)代碼，然后在任意的地方創(chuàng)建類(lèi)似的對(duì)象。

例如：

let xiaoming = new People('xiaoming');let xiaohong = new People('xiaohong');let mingming = new People('mingming');

想象一下，如果對(duì)象的代碼有上百行，這么做是不是比{...}方式要簡(jiǎn)便很多呢？這就是面向?qū)ο笾械拇a服用，可以極大程度上降低代碼量，提高開(kāi)發(fā)速度。

如果構(gòu)造函數(shù)沒(méi)有參數(shù)，我們可以省略調(diào)用時(shí)的括號(hào)：

let xiaoming = new People;//類(lèi)似于這樣let xiaoming = new People();//等價(jià)于這樣

但是個(gè)人推薦不要使用這種特性，僅僅是告知在規(guī)范中存在這種語(yǔ)法。

強(qiáng)調(diào):

從技術(shù)上講，任何函數(shù)（除了箭頭函數(shù)，它沒(méi)有自己的 this）都可以用作構(gòu)造器。即可以通過(guò) new 來(lái)運(yùn)行，它會(huì)執(zhí)行上面的算法。“首字母大寫(xiě)”是一個(gè)共同的約定，以明確表示一個(gè)函數(shù)將被使用 new 來(lái)運(yùn)行。

四、匿名構(gòu)造函數(shù)

如果我們只希望對(duì)象被創(chuàng)建一次，那么就可以簡(jiǎn)化構(gòu)造函數(shù)的定義，使用new直接調(diào)用匿名函數(shù)，創(chuàng)建一個(gè)對(duì)象：

let xiaoming = new function(){
    this.name = 'xiaoming';}console.log(xiaoming.name);

代碼的執(zhí)行結(jié)果如下：

使用匿名函數(shù)當(dāng)作構(gòu)造函數(shù)的結(jié)果和常規(guī)構(gòu)造函數(shù)沒(méi)有任何區(qū)別，唯一的區(qū)別是匿名構(gòu)造函數(shù)不能重復(fù)調(diào)用（因?yàn)闆](méi)有名字）。這種使用方法常用在無(wú)需復(fù)用代碼的場(chǎng)景中。

五、構(gòu)造函數(shù)的返回值

常規(guī)情況下，構(gòu)造函數(shù)不需要使用return語(yǔ)句，它的唯一用途就是把對(duì)象的屬性寫(xiě)入this，然后直接默認(rèn)返回this對(duì)象就好了。

但是，由于JavaScript對(duì)構(gòu)造函數(shù)幾乎沒(méi)有任何約束，如果我們?cè)谝粋€(gè)普通函數(shù)中寫(xiě)了返回語(yǔ)句，會(huì)發(fā)生什么呢？引擎會(huì)做下面兩個(gè)選擇：

1. 如果return返回的是一個(gè)對(duì)象，就返回這個(gè)對(duì)象，不再返回this；

2. 如果return返回的是一個(gè)基礎(chǔ)類(lèi)型，則忽略返回語(yǔ)句，繼續(xù)返回this；

從引擎的處理方式中不難看出，構(gòu)造函數(shù)的主要任務(wù)就是創(chuàng)建對(duì)象，處理并返回，如果使用構(gòu)造函數(shù)返回一個(gè)基礎(chǔ)類(lèi)型，是沒(méi)有意義的。

舉個(gè)栗子：

function People(name){
    this.name = name;
	return {name:'Nobody'};}console.log(new People('xiaoming').name);

代碼執(zhí)行結(jié)果如下：

可以看出，name為’xiaoming’的對(duì)象沒(méi)有被返回，而是Nobody對(duì)象代替了xiaoming。

如果使用return返回一個(gè)基礎(chǔ)類(lèi)型，案例如下：

function Dog(){
    this.name = 'hashiqi';
	return 666;}console.log(new Dog().name);

代碼執(zhí)行結(jié)果如下：

可見(jiàn)，在返回基礎(chǔ)類(lèi)型時(shí)，return語(yǔ)句是不生效的。

強(qiáng)調(diào)：

通常對(duì)象的構(gòu)造函數(shù)沒(méi)有返回值，我們也沒(méi)有必要利用引擎對(duì)構(gòu)造函數(shù)返回值的特殊處理，編寫(xiě)特別的構(gòu)造函數(shù)。

六、利用構(gòu)造函數(shù)為對(duì)象添加方法

在構(gòu)造函數(shù)中不僅可以添加對(duì)象的屬性，由于JavaScript的函數(shù)同樣可以賦值給變量，我們還可以用構(gòu)造函數(shù)初始化對(duì)象的成員方法。

例如，我們可以給People對(duì)象增加一個(gè)sing方法：

function People(name){
    this.name = name;
    this.sing = function(){
        console.log(`${name} is a happy boy.`);
    }}let xiaoming = new People('xiaoming');xiaoming.sing();

以上代碼在構(gòu)造函數(shù)中為對(duì)象添加了一個(gè)方法，代碼執(zhí)行結(jié)果如下：

到此，相信大家對(duì)“JavaScript對(duì)象的構(gòu)造函數(shù)和new操作符怎么用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前名稱：JavaScript對(duì)象的構(gòu)造函數(shù)和new操作符怎么用
文章網(wǎng)址：http://aaarwkj.com/article28/jegsjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、虛擬主機(jī)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)