Day [3] — this：建构物件 — JS之浸猪笼系列

如果你不知道这个系列为什么叫这种激烈的名字可以看这篇：

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

这一篇很多都是跟着前辈们写的 ><
只有自己小小的以做图 和写扣的方式重新理解！
感谢神明前辈们！