iT邦幫忙

1

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

https://s3.us-west-2.amazonaws.com/secure.notion-static.com/012290da-f003-4c7c-ba6e-b656ae8c65c6/_2021-01-05_12.03.41.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210106%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210106T053923Z&X-Amz-Expires=86400&X-Amz-Signature=eb1df85b5534f135a1052fdaa588383596eae7968cd67370625c66983e8deb21&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22_2021-01-05_12.03.41.png%22

太想要放梗圖ㄌ.....

this = 這個。

如果對this的理解到這裡,很棒 您跟我一樣完全看不懂this呢!

接下來就從豬腦浸豬籠ㄉ角度來看 this是啥米吧...


關於 this的資訊會分成4-5篇用對我來說最簡單方式去理解&介紹,分別是:

Day [1] — this:存在於物件 = 主要講指向 instance(物件實體)

Day [2] — this:作用域 = 主要講 this 和作用域的關係

Day [3] — this:建構物件 = 主要講 this 和 new

Day [4] — this:指定物件 = 主要講 this 和 .call() / .apply() / .bind()

Day [5] — this:可能總結一下還沒想好


What ‘s THIS ???

  1. this 是 JavaScript裡的關鍵字。
  2. this 是 執行函式時,自動生成的內部物件。
  3. this 隨著執行的函式場合不同,會指向不同值。
  4. 多數情況下,this 代表呼叫函式的物件。

Day [1] — this:存在於物件

this 在函數運行的時候自動指向 instance(物件實體) 的屬性。

這時候應該已經有人想說 instance(物件實體) 是啥了,
反正我還要寫30天,請期待一下後續的文章謝謝。

//來個範例吧!

var a = 123;

function jaygu() {
   console.log(this.a);
}
jaygu();  // 123

『 ㄟ?那我直接呼叫 a 不也一樣?幹嘛用this?』

客倌且慢,我們再往下看:

//來個範例吧!

function jaygu(){
	console.log(this.a);
}
//jaygu 函式會運行出 this.a的結果

var obj = {}; //這是一個空物件
obj.a = 123; //在空物件裡帶入 a = 123 這個值
obj.b = jaygu; //在空物件裡帶入 b = jaygu 這個函式

obj.b(); //當我們呼叫 obj.b 就印出 123 

//解析一下
//你知道這裡的 this 指向得是什麼了嗎?

//當我們呼叫 obj.b(); 的時候,
//會自動去找到 obj.b = jaygu; 這個函式,
//而這個函式會執行 console.log(this.a); ,
//this 就自動去指向在 var(全域變數) obj中的 a,
//而 obj.a = 123;,
//故最後 obj.b(); 會印出 123

//所以這裡的 this 指向的就是 obj 

等等,你說 "指向" ,所以... this不是一個固定的東西?

這樣說也對!簡單來說,在這個範例中 this 就是一個指向物件實體的功能。

來個複數物件的範例:

//來個範例吧!

var getName = function(){
  return pet1.petName;
};

var pet1 = {
  petName: "汪汪",
  getName: getName
};

var pet2 = {
  petName: "貓",
  getName: getName
};

console.log( pet1.getName() );
console.log( pet2.getName() );

//以上兩個例子都會回傳 "汪汪", 
//因為我們讓 getName = function(){ return pet1.petName;};

接著將 this 代入看看:


var getName = function(){
  return this.petName;
};

var pet1 = {
  petName: "汪汪",
  getName: getName
};

var pet2 = {
  petName: "貓",
  getName: getName
};

console.log( pet1.getName() ); 
//這裡會回傳 "汪汪",因為 this 指向 pet1

console.log( pet2.getName() ); 
//這裡會回傳 "貓",因為 this 指向 pet2

從這邊的範例我們可以很簡單的知道, this 會由於呼叫的物件不同,執行結果也不同。
在上面的範例中 this 就分別指向了 pet1 和 pet2。


回到最上面的問題:『 ㄟ?那我直接呼叫 a 不也一樣?幹嘛用this?』

記得在開頭我們提到 this 的中文就是 “這個” 嗎?

在上面的範例中,我們能將 這個(this) 視作一個代名詞,
意思就是指 我能用 這個(this) 指向我想表達的物件。

最後送上一張符合章節meme

https://s3.us-west-2.amazonaws.com/secure.notion-static.com/8dc67272-3a9d-4c35-9c83-02dd231f89e8/1609830453840.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210106%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210106T054032Z&X-Amz-Expires=86400&X-Amz-Signature=28dcc87412deba45ed2443c3d29f82710fba6d69e0b5805aa2e9065fae7d0b1f&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%221609830453840.png%22

希望大家看ㄌ歡喜 & 30Days後的我覺得自己很棒!d(`・∀・)b

也請各位前輩們不吝給予批評和指教,或4給我一點鼓勵 or meme 哇ㄟ揪歡喜!


引用及參考資訊

What's THIS in JavaScript ? [上]

淺談 JavaScript 頭號難題 this:絕對不完整,但保證好懂

this 的值到底是什么?一次说清楚

淺談 JavaScript 頭號難題 this:絕對不完整,但保證好懂

JavaScript深入之从ECMAScript规范解读this · Issue #7 · mqyqingfeng/Blog


1 則留言

1
suochantsao
iT邦新手 5 級 ‧ 2021-01-06 14:26:12

喜歡jaygu

謝謝水水喜翻

我要留言

立即登入留言