Table of Contents

• Object Constructor
  • "Constructor"是什麽？
  • "this"
  • Constructor中的return
• References

在昨天的文章中，我們首先使用了表格作為範例，來說明使用物件的優點，並將一名參賽者的資訊存入物件中。

今天我們來換個方式創造物件。

Object Constructor

如果單獨把Constructor這個關鍵字輸入到google搜尋，會發現這個概念在不同的程式語言都有應用，然而在Javascript裡中，我們僅僅使用了類似的方式來使用 Constructor。

讓我們使用constructor function（建構函式），並以首字母大寫的名稱創造一個物件，以便跟一般的函式區隔開來，再使用new關鍵字，根據這個範本創建instance（實例）。關於實例，等之後聊到物件導向及原型再說 （如果會聊到的話），先感受一下Object Constructor的運作。

首先，將昨天的一個範例轉換constructor function，使用new產生一名選手的資料：

const contestant = {
  contestantId: 1,
  contestantName: "Alice",
  hotpotFlavor: "Spicy Sichuan",
  hotpotIngredients: ["Beef slices", "Tofu", "Enoki mushrooms", "Napa cabbage"],
}

//建構函式的方法
function Contestant(contestantId,contestantName,hotpotFlavor,hotpotIngredients){
  this.contestantId = contestantId;
  this.contestantName = contestantName;
  this.hotpotFlavor = hotpotFlavor;
  this.hotpotIngredients = hotpotIngredients;
}

const alice = new Contestant(1,"Alice","Spicy Sichuan",["Beef slices", "Tofu", "Enoki mushrooms", "Napa cabbage"])
console.log(alice);
//我們可以得到下面這段
//Contestant {
//  contestantId: 1,
//  contestantName: 'Alice',
//  hotpotFlavor: 'Spicy Sichuan',
//  hotpotIngredients: [ 'Beef slices', 'Tofu', 'Enoki mushrooms', 'Napa cabbage' ]
//}

//使用昨天的取值的方法拿到Alice的Id
console.log(alice.contestantId);//1

通過這種方式，我們可以生成許多相似的instance。有關 new 的詳細用法，我們之後再來討論。現在我們繼續談談 this 在這裡的作用。

"this"

this的值通常取決於呼叫function的方式，而指向呼叫function的object。雖然this在其他情境下會有不同表現，但在這裡我們只談及它在object中的使用。

比方以上面創造名為Contestant的建構函式為例，我們使用new創建名為alice的實例，this會指向alice，並使用傳入的參數值進行賦值。

但這樣看上面的範例有些無感，做些調整來說明this：

function Contestant(){
  this.logThis = function(){
    return this;
  }
}

const tryLog = new Contestant()
//使用tryLog呼叫logThis，此時logThis內的this為 tryLog
console.log(tryLog.logThis()===tryLog);//true

//單獨印出tryLog.logThis
console.log(tryLog.logThis());//Contestant { logThis: [Function (anonymous)] }

以object literal來實做this：

const contestant = {
  contestantId: 1,
  printID(){
    console.log(this.contestantId);
  }
}

//使用contestant呼叫printID
//printID中印出this.contestantId
//this為contestant，所以印出的是contestant的contestantId，值為1
console.log(contestant.printID());//1

Constructor中的return

最後，我們來談談Constructor中單獨使用return，以及如果return的內容是一個物件時會有什麼影響。

function Contestant(){
  this.contestantId= 1;  
  return {contestantId : 2}
}

const Contestant1 = new Contestant();
console.log(Contestant1.contestantId);//2

會發現return的內容覆蓋this，爬了文章找不太到原因，不過有在想是不是跟昨天提到屬性名稱可以重複有關。

References

該來理解 JavaScript 的原型鍊了
物件

• 書
  忍者：JavaScript開發技巧探秘第二版（第四章）

• MDN

1. Object() constructor
2. JavaScript object basics
3. Working with objects

• JavaScript info

1. Objects（The JavaScript language>Objects: the basics）
2. Object methods, "this"（The JavaScript language>Objects: the basics）