如果你從其他語言轉(zhuǎn)到javascript語言的開發(fā)，你會發(fā)現(xiàn)有很多讓你暈掉的術(shù)語，其中工廠函數(shù)(factory function)和構(gòu)造函數(shù)(constructor function)就是其中的一個。本文試圖理順這兩者之間的區(qū)別.

Factory functions

工廠函數(shù)是將返回一個新的object的任何不是類或者構(gòu)造函數(shù)的函數(shù)。在js中，任何函數(shù)都能夠返回一個object.如果我們不是通過new function()的方式來獲得這個對象的，那么她就是一個factory工廠函數(shù).

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

上面的js代碼會創(chuàng)建一個new object并且將傳入的參數(shù)賦值給到該object的屬性上，并且返回該new object.

Constructor functions

工廠函數(shù)和構(gòu)造函數(shù)區(qū)別僅僅在于其用戶場景use case以及約定俗成的convention不同,基本上兩者是相似的。對于構(gòu)造函數(shù)，人們慣例convention使用首字母大寫方式來表示這是一個constructor構(gòu)造函數(shù).構(gòu)造函數(shù)往往其use case是需要需要通過new關(guān)鍵字調(diào)用返回類似對象的場景，并且隨后我們可以通過instanceof關(guān)鍵字來做實例類型檢查的場景。

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

通過new關(guān)鍵字來創(chuàng)建新的對象objects

如上面所說，工廠函數(shù)和構(gòu)造函數(shù)基本上是一樣的，你現(xiàn)在估計有以下問題:

1. 我們可以對工廠函數(shù)來使用new關(guān)鍵字嗎?

2.如果針對工廠函數(shù)和構(gòu)造函數(shù)，我們使用new關(guān)鍵字將會發(fā)生什么呢?

3. 如果針對構(gòu)造函數(shù)并不使用new關(guān)鍵字去創(chuàng)造對象會怎么樣呢？

下面我們將試圖回答上面的幾個問題.

我們先使用new關(guān)鍵，應用到工廠函數(shù)和構(gòu)造函數(shù)身上，并且console.log打印以下，看看有什么不同.

使用new factory函數(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);

使用constructor function

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

new操作符的背后

通過new構(gòu)造函數(shù)方式創(chuàng)建object時有以下幾個過程發(fā)生：

function Person(firstName, lastName, age) {
    // this = {};
    // this.__proto__ = Person.prototype;
    // Set up logic such that: if
    // there is a return statement
    // in the function body that
    // returns anything EXCEPT an
    // object, array, or function:
    //     return this (the newly
    //     constructed object)
    //     instead of that item at
    //     the return statement;
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    // return this;
}

上面的// 注釋行內(nèi)容就是當使用new ConstructFunction()創(chuàng)建新對象時js引擎自動增加的部分偽代碼。

1.創(chuàng)建一個新的空object并且bind到this關(guān)鍵字

2.設置該對象的__proto__指向為構(gòu)造函數(shù)的prototype.

3.增加以下邏輯：如果函數(shù)體中有return語句，但是返回的如果不是Object,array,或者function的話，則直接返回this指針

4.返回this object

我們把上面的邏輯增加到普通的函數(shù)體內(nèi)，看看new factory調(diào)用時的結(jié)果:

function person(firstName, lastName, age) {
    // this = {};
    // this.__proto__ = Person.prototype; 
 
    // Set up logic such that: if
    // there is a return statement
    // in the function body that
    // returns anything EXCEPT an
    // object, array, or function:
    //     return this (the newly
    //     constructed object)
    //     instead of that item at
    //     the return statement;
    const person = {};
    person.firstName = firstName;
    person.lastName = lastName;
    person.age = age;
    return person;
    // return this;
}

我們看到由于person是一個object,因此return this就會被忽略，而是直接返回person對象。

如果使用構(gòu)造函數(shù)時，忘記使用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);

我們可以看到bob為undefined,原因是Person函數(shù)本身并沒有返回任何內(nèi)容，因此bob就為undefined.

但是我們會發(fā)現(xiàn)firstName,lastName和age這幾個屬性都被添加到了window全局對象上了。

https://medium.com/@chamikakasun/javascript-factory-functions-vs-constructor-functions-585919818afe

總結(jié)

以上是生活随笔為你收集整理的javascript工厂函数(factory function)vs构造函数(constructor function)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。