如果你不知道這個系列為什麼叫這種激烈的名字可以看這篇：

Day [0] — JS之浸豬籠系列

如果你還沒看過前面的章節，不會太難理解今天這篇，但因為我寫得很讚，建議你先企看看！

Day [1] — this：存在於物件 — JS之浸豬籠系列

Day [2] — this：作用域 — JS之浸豬籠系列

Day [3] — this：建構物件 — JS之浸豬籠系列

提到用 this 建構物件就要先提到 new 這個關鍵字，
首先簡單介紹 new 是什麼：

//來個範例吧！

function Pet(){
		this.dog = "汪汪";
		this.cat = "貓";
}

var MyPet = new Pet();
console.log(MyPet);

印出結果：

透過上面的範例，我們可以看到 MyPet 印出的結果為 物件 ， 包含 Pet 函式中的內容，並且有屬性名稱(key) 和 屬性值 (value)

那 NEW 在這個過程中發生什麼事情了呢？

簡單來說在上面這個範例中，new 替我們製作了一個新的空物件，並藉由 this 導入那個空物件，賦予了 { 屬性名稱 : 屬性值 }

注意！如果這時我們使用 return 回傳其他物件：

//來個範例吧！

function Pet(){
		this.dog = "汪汪";
		this.cat = "貓";
		return  {"RETURN":"原本this的內容就不會被回傳"};
}

var MyPet = new Pet();
console.log(MyPet);
//這裡會印出{"RETURN":"原本this的內容就不會被回傳"};

當我們使用 return 回傳，他將會覆蓋掉原來的新物件內容
（意思是return那個才是最新的，其他就被覆蓋掉了）

new 之於 this

當一個 function 前面帶有 new 被呼叫時，會發生：

• 會產生新的物件（物件被建構出來）。
• 新建構的物件會被設為這個 function 的 this 綁定目標，也就是 this會指向新建構的物件。
• 除非這個 function 指定回傳(return)了他自己的替代物件，否則 new產生的新物件將被回傳。

引用及參考資訊

重新認識 JavaScript :: 2018 iT 邦幫忙鐵人賽

[筆記] 談談 JavaScript 中的 function constructor 和關鍵字 new

這一篇很多都是跟著前輩們寫的 ><
只有自己小小的以做圖 和寫扣的方式重新理解！
感謝神明前輩們！