iT邦幫忙

0

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);

印出結果:

https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2f70994e-1291-43af-92bc-f94d89e383fb/_2021-01-06_3.15.02.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210106%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210106T084604Z&X-Amz-Expires=86400&X-Amz-Signature=334d0ba757af23c2b97b28581ccbc52d043ba05d33aa3a9bc574b12e7f6440e3&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22_2021-01-06_3.15.02.png%22

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


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

https://s3.us-west-2.amazonaws.com/secure.notion-static.com/3e160146-8bbb-44dc-aaa8-2651d273ab71/mypet__1__2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210106%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210106T084633Z&X-Amz-Expires=86400&X-Amz-Signature=9fc967bf3e5f3551fe1874bc3d56287ec50c461e6c31aaef7a174efdd3a11b79&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22mypet__1__2.png%22

簡單來說在上面這個範例中,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

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


尚未有邦友留言

立即登入留言