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

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