怎么在JavaScript中使用工廠函數(shù)與構(gòu)造函數(shù)-創(chuàng)新互聯(lián)

怎么在JavaScript中使用工廠函數(shù)與構(gòu)造函數(shù)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元南岳做網(wǎng)站,已為上家服務(wù),為南岳各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

工廠函數(shù)

所謂工廠函數(shù)，就是指這些內(nèi)建函數(shù)都是類對(duì)象，當(dāng)你調(diào)用他們時(shí)，實(shí)際上是創(chuàng)建了一個(gè)類實(shí)例”。意思就是當(dāng)我調(diào)用這個(gè)函數(shù)，實(shí)際上是先利用類創(chuàng)建了一個(gè)對(duì)象，然后返回這個(gè)對(duì)象。由于 Javascript 本身不是嚴(yán)格的面向?qū)ο蟮恼Z言（不包含類），實(shí)際上來說，Javascript 并沒有嚴(yán)格的“工廠函數(shù)”，但是在 Javascript中，我們能利用函數(shù)模擬類。來看下面一個(gè)例子：

function person(firstName, lastName, age) {
 const person = {};
 person.firstName = firstName;
 person.lastName = lastName;
 person.age = age;
 return person;
}

上述代碼，創(chuàng)建一個(gè)新對(duì)象，并將傳遞參數(shù)作為屬性附加到該對(duì)象上并返回新對(duì)象。 這是一個(gè)簡(jiǎn)單的 JavaScript 工廠函數(shù)。

實(shí)際上工廠函數(shù)也很好理解了：

• 它是一個(gè)函數(shù)。

• 它用來創(chuàng)建對(duì)象。

• 它像工廠一樣，“生產(chǎn)”出來的函數(shù)都是“標(biāo)準(zhǔn)件”（擁有同樣的屬性）

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

不同于其它的主流編程語言，JavaScript的構(gòu)造函數(shù)并不是作為類的一個(gè)特定方法存在的；當(dāng)任意一個(gè)普通函數(shù)用于創(chuàng)建一類對(duì)象時(shí)，它就被稱作構(gòu)造函數(shù)，或構(gòu)造器。一個(gè)函數(shù)要作為一個(gè)真正意義上的構(gòu)造函數(shù)，需要滿足下列條件：

• 在函數(shù)內(nèi)部對(duì)新對(duì)象（this）的屬性進(jìn)行設(shè)置，通常是添加屬性和方法。

• 構(gòu)造函數(shù)可以包含返回語句（不推薦），但返回值必須是this，或者其它非對(duì)象類型的值。

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

使用 new 關(guān)鍵字創(chuàng)建對(duì)象

正如上面所說的，我們可以使用 new 來類或者對(duì)象，那么你可能會(huì)有以下幾個(gè)問題：

• 我們可以在工廠函數(shù)中使用 new 關(guān)鍵字嗎？

• 如果我們?cè)诠S和構(gòu)造函數(shù)中使用new關(guān)鍵字會(huì)發(fā)生什么

• 如果在使用構(gòu)造函數(shù)創(chuàng)建對(duì)象實(shí)例時(shí)不使用new關(guān)鍵字會(huì)發(fā)生什么

好的，試著找出以上問題的答案之前，我們先做一個(gè)小練習(xí)來理解這里面發(fā)生了什么。

使用new關(guān)鍵字同時(shí)使用工廠和構(gòu)造函數(shù)創(chuàng)建兩個(gè)對(duì)象，接著在控制臺(tái)打印這兩個(gè)對(duì)象。

使用工廠函數(shù)

function person(firstName, lastName, age){
 const person = {}
 person.firstName = firstName;
 person.lastName = lastName;
 person.age = age;
 return person;
}

const mike = new person('mike', 'grand', 23);

正如我們?cè)谏鲜鏊吹降模@里的__proto__ 指向其原型對(duì)象的指針，讓我們?cè)囍页鲈蛯?duì)象是什么。為了找出上面mike對(duì)象的指向原型對(duì)象，讓我們做簡(jiǎn)單的===等式檢查。

嗯，有趣的是，它指向 Object.prototype。好的，讓我們用構(gòu)造函數(shù)做同樣的實(shí)驗(yàn)。

理解 JavaScript 的原型

理解原型之前，需要記住以下幾點(diǎn)知識(shí)：

• 所有的引用類型（數(shù)組、對(duì)象、函數(shù)），都具有對(duì)象特性，即可自由擴(kuò)展屬性（null除外）

• 所有的引用類型（數(shù)組、對(duì)象、函數(shù)），都有一個(gè)__proto__屬性，屬性值是一個(gè)普通的對(duì)象

• 所有的函數(shù)，都有一個(gè)prototype屬性，屬性值也是一個(gè)普通的對(duì)象

• 所有的引用類型（數(shù)組、對(duì)象、函數(shù)），__proto__屬性值指向它的構(gòu)造函數(shù)的prototype屬性值

通過代碼解釋一下：

// 要點(diǎn)一：自由擴(kuò)展屬性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;

// 要點(diǎn)二：__proto__
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

// 要點(diǎn)三：函數(shù)有 prototype
console.log(fn.prototype)

// 要點(diǎn)四：引用類型的 __proto__ 屬性值指向它的構(gòu)造函數(shù)的 prototype 屬性值
console.log(obj.__proto__ === Object.prototype)

使用構(gòu)造函數(shù)

注意:在JavaScript中，這些構(gòu)造函數(shù)也被稱為 constructor，因?yàn)樗鼈冇糜趧?chuàng)建對(duì)象。

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}
const mike = new Person('mike', 'grand', 23);

當(dāng)我們展開第一層的的__proto__時(shí)，它內(nèi)部還有另一個(gè)__proto__，我們?cè)俅螖U(kuò)展它。

現(xiàn)在讓我們?cè)囍宄蛯?duì)象是否像上面一樣。

他們是不同的。 當(dāng)我們使用工廠函數(shù)創(chuàng)建對(duì)象時(shí)，它的__proto__指向Object.prototype，而當(dāng)從構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí)，它指向它的構(gòu)造函數(shù)原型對(duì)象。 那么這里發(fā)生了什么？

new 背后所做的事

當(dāng)我們?cè)趧?chuàng)建對(duì)象時(shí)使用帶有構(gòu)造函數(shù)的new關(guān)鍵字時(shí)，new 背后所做的事不多。

new 運(yùn)算符創(chuàng)建一個(gè)用戶自定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。 new 關(guān)鍵字會(huì)進(jìn)行如下操作：

• 創(chuàng)建一個(gè)空的簡(jiǎn)單 JavaScript 對(duì)象 (即 {})

• 鏈接該對(duì)象(即設(shè)置該對(duì)象的構(gòu)造函數(shù))到另一個(gè)對(duì)象

• 將步驟1新創(chuàng)建的對(duì)象作為 this 的上下文

• 如果該函數(shù)沒有返回對(duì)象，則返回 this

注釋行是偽代碼，表示在 new 關(guān)鍵字，JS 背后幫我們做的事情。

function Person(firstName, lastName, age) {
 // this = {};
 // this.__proto__ = Person.prototype;

 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 
 // return this;
}

另外，讓我們看看如果將上面的隱式代碼添加到工廠函數(shù)中會(huì)發(fā)生什么。

function person(firstName, lastName, age) {
 // this = {};
 // this.__proto__ = Person.prototype; 
 
 
 const person = {};
 person.firstName = firstName;
 person.lastName = lastName;
 person.age = age;
 return person;
 
 // return this;
}

即使使用new關(guān)鍵字調(diào)用時(shí)將隱式代碼添加到工廠函數(shù)中，也不會(huì)對(duì)結(jié)果產(chǎn)生任何影響。這是因?yàn)椋捎谖覀儧]有在函數(shù)中使用 this 關(guān)鍵字，而且我們顯式地返回了一個(gè)除this之外的自定義對(duì)象，因此沒有必要使用隱式代碼。無論我們是否對(duì)工廠函數(shù)使用new關(guān)鍵字，對(duì)輸出都沒有影響。

如果忘記了 new 關(guān)鍵字怎么辦

JavaScript 中有許多概念，有時(shí)難以掌握。 new 操作符就是其中之一。 如果你不能正確理解它，那么在運(yùn)行 JavaScript 應(yīng)用程序時(shí)會(huì)產(chǎn)生令人討厭的后果。 在像 Java這 樣的語言中，嚴(yán)格限制了如何使用 new 關(guān)鍵字。 但是在 javascript 中，并不是那么嚴(yán)格，如果你不能正確理解它們可能會(huì)導(dǎo)致很多問題。

在 JavaScript 中：

• 可以對(duì)任何函數(shù)使用 new 運(yùn)算符

• 可以使用或不使用 new 關(guān)鍵字將函數(shù)作為構(gòu)造函數(shù)調(diào)用

讓我們看看上面的例子，使用和不使用 new 關(guān)鍵情況

function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
const mike = new Person('mike', 'grand', 23);
const bob = Person('bob', 'grand', 23);

然后，如果查看創(chuàng)建的對(duì)象實(shí)例，你希望看到什么？

發(fā)生了什么？ 使用 new 運(yùn)算符，正如我們所期待的一樣輸出正確的對(duì)象，但沒有new運(yùn)算符，結(jié)果是undefined 怎么可能呢？

如果你對(duì) JavaScript 作用域 和 this 關(guān)鍵字的工作原理有所了解，那么你可以猜到這里發(fā)生了什么？ 讓我們來看看。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：怎么在JavaScript中使用工廠函數(shù)與構(gòu)造函數(shù)-創(chuàng)新互聯(lián)
標(biāo)題URL：http://m.kartarina.com/article14/cdcjge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、域名注冊(cè)、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、外貿(mào)建站、軟件開發(fā)

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)