文科少女學程式

因為自己對JavaScript還有很多還沒釐清的地方，
所以這次特別找了主題補強自己對Javascript的了解，
也嘗試自己查資料來內化成自己比較能理解的內容。
這次的第一個主題就來看看「this」這個東西。
(關於this想要挖深入一點的話，會非常深及困難，
所以這次我只嘗試敘述我理解的內容。)

先講結論
現在的this是哪位，取決於怎麼呼叫函式

呼叫函式的方式有哪些？
1. 函式呼叫模式
當函式不是物件屬性時，那就會以函式模式來呼叫。
簡單來說就是最純粹的(?)函式。


2. 方法呼叫模式
當函式存在於物件的一個屬性時，會被稱為一個方法。
當想要呼叫這個函式時，就會用方法來呼叫函式。
因為函式存在於物件中，所以呼叫函式時，都需要先標示出物件名稱，
才可以明確地呼叫出該物件的函式。


3. 建構函式呼叫模式
會搭配new，來產生一組新的物件。

4. call、apply呼叫模式


這次只先聊聊前三種，第四種我還需要一些時間好好理解QQ

怎麼從不同方式看現在this是誰？
比較簡單的方式，可以看呼叫函式時，
在函式名稱前，有沒有另外帶著另一個名字。
以實際案例來說明的話，也就是以下這兩種的差異。
object.y()
y()
通常這種差異，主要是出現在前面所提到的第一種呼叫方式及第二種呼叫方式。
緊接著來透過實際例子看看各個方式呼叫的函式中的this到底是哪位吧！

1. 函式呼叫模式的this
函式呼叫模式中，通常因為不存在於任何物件，
所以會直接呼叫，這個時候的this就會等於全域變數，
當沒有全域變數被宣告時，則會指向window。
不果如果是在嚴格模式下的話，就會被認定成undefined。

實際案例
因為我們用寬鬆模式var來宣告name
在呼叫函式時，this.name就會是被宣告為全域變數的的name = 'jolin'

注意！這裡要印出的是this的name，所以如果全域變數沒有宣告name，就會變成undefined
 

2. 方法呼叫模式的this
這種呼叫模式的函示都會存在於一個物件中，
所以必須先標示出是哪個物件，才可以呼叫函式。
這時候的this，指的就會是function存在的物件。(可以參考底下的紅框內容)

注意！如果宣告一個變數，其內容為這個物件中有函式的屬性，雖然看起來跟直接呼叫函式很像
但是其實實際上的呼叫方式是不同的，this也就會變成全域變數。(可以參考底下的綠框內容)

實際案例


3. 建構函式呼叫模式的this
這種呼叫模式的this通常都會是物件本身，
最後印出的結果會有不一樣，主要都是因為用new產生了新的物件。
像是紅框的部分，一樣印出的是Phoebe
但是藍框的部分就變成Jolin了

實際案例


結論
我在理解this該怎麼辨別是誰時，常常會卡在不斷地往上回溯這個函式是誰，
但其實只需要看它被呼叫的地方就可以了，也就是一開始說的第一種和第二種呼叫模式的差別。
當然還有更深的內容需要探討及了解，不過先掌握這個判斷方式，我覺得應該也足夠適用在很多狀況下的判斷了。

如果有不正確的地方，也歡迎大家來跟我討論。
這次的內容就先到這邊啦，掰餔！