JS的this到底是指什麼 !

JavaScript的大魔王 — this！

每次上網看別人寫的JS總是霧煞煞，this到底是this還是this?

可以從以下幾個規則去推敲現在這個this到底指的是誰：

1. 這個this寫在哪都沒差，誰呼叫了誰就是this，若沒有人呼叫(前面無小數點)，this就會是global(若runtime為瀏覽器global就是window)

lemon呼叫greet方法， this = lemon

greet方法前沒人呼叫，所以this = window

2. 有new的話，this會等於new物件本身

參考範例：https://github.com/lydiahallie/javascript-questions

>>>>>> apple有new所以Fruit裡頭的this為new物件本身，this.name = ‘🍎’ => apple.name= ‘🍎’ <<<<< lemon沒有new所以this.name = ‘🍋’ => window.name= ‘🍋’ ，lemon也因為沒有new所以lemon = fruit方法的回傳值(因為此方法沒有回傳值所以是undefined)

3. 胖箭頭(flat arrow) () =>裡的this會攢到外面，胖箭頭沒有自己的this

即使是lemon呼叫greet方法，但因為flat arrow裡的this會鑽到外面，所以this指的還是window

4. 若使用嚴格模式可以使this不會亂竄

原本因為沒人呼叫greet方法，this竄出導致this = window

使用’use strict’嚴格模式後，this無法竄出 = undefined

5. 可使用bind/apply/call改變this

bind(Arg1, Arg2, Arg3…)

//建立為新函式，並將bind的引數(Arg1)傳入成為this//

使用bind( )，greet方法中的this = pizza

apply(Arg1, [Arg2, Arg3…] )

//接在方法後面，可傳入引數(Arg1)為this，若要多附加引數(y,z)需使用陣列形式//

執行greet方法並使用apply方法傳入cake，greet裡的this = cake

call(Arg1, Arg2, Arg3…)

//和apply一樣，可傳入引數(Arg1)為this，差別只有多附加引數(y,z)可直接接在後面，不需轉為陣列//

執行greet方法並使用call方法傳入corn，greet裡的this = corn

apply 和 call的不同：

apply方法傳入方法傳入多個引數需使用陣列/call方法可直接傳入多個引數

下次看到this不會再霧煞煞啦～～～(•͈⌔•͈⑅)