Javascript 的this ，你是誰

最近剛好有機會複習到這部分，為了加強印象，所以把他記錄下來吧

第一次接觸到Js的this大概都是下面這張迷因圖的感

然後就一臉炭志郎尛的臉，別懷疑我也一樣

沒關係就讓我們來理解他(其實我也不太算有把握，但就是個人記憶用的方法)

GOGOGOGOGO!!

理解this是誰最重要的是"是誰在使用他?"，搞清楚後其實就OK了，蝦米意思??!!是 obj 在使用他呢還是純 function 在使用他呢?結果大不同，我們來看看在function內使用的會長怎樣

function showName (){
    console.log(this)
}
showName()

可以放在瀏覽器上的開發人員工具看看

答案就是windows~~，原因是只要不是被obj綁定，那這個this，就會有丟出綁定在this的預設值，這情形會依環境及模式不同，而有不同的結果，但大原則在該情況都是你沒辦法成功抓到你想要的東西，分類結果如下

嚴格模式(strict): =>undefined
非嚴格模式
node.js => global
瀏覽器 => windows

所以上面的測試的程式碼結果才是window

=====以下例子皆在瀏覽器的devTool呈現=====
=====所以全域物件會是windows =====

那在obj內呢，窩們來抗抗

let obj = {
     name:'hihi', 
     say: function(){
          console.log(this.name)
          }
}
obj.say() // 'hihi'

從obj內呼叫的function，這個this指向的是這個obj，簡單吧~

那稍微作一點變化

let obj = {
 name:’hihi’,
 say: function(){
 console.log(this.name)
 }
let sayhi = obj.say
sayhi()

結果會是。。。。windows，原因很簡單，你把變數sayhi賦予一個物件obj的function，然後執行他，有沒有發現問題點啦，注意哦不是 "物件"是"function"，所以當你直接執行，顯示的當然是window~~

那再稍微變一下

let obj = {
 name:’hihi’,
 say: function(){
 console.log(this.name)
 }
}
let obj2 = {
 name:'another'
 }
obj2.callName = obj.say
obj2.callName()

出來的結果是。。。。another，那整個的過程是這樣的，obj2新增一個屬性callName，並指向obj的function say，然後執行obj2內的function callName，重點就是這個啦~，透過obj2內的function，所以你執行出來的this就是這個obj2，因此出來的就是another

小小總結: 還記得前面說得怎麼call會有差吧?從上面來看有透過obj的call function 跟直接call function ，this所指向完全不同，一個是指obj一個是指windows

接下來看看進階一點的例子obj內的 function的 function

let obj = {
 name:’hihi’,
 say: function(){
   function inner(){
     console.log(this)
   }
   inner()
 }
}

obj.say()

那結果會是啥呢。。。答案是windows，
Why? 記得前面提到的誰執行決定this是誰，那來看是誰最後執行這個 console.log(this)。。。嗯，沒人，所以就當作一般call function，因此會是windows啦

假設我今天有需求需要把代表obj的this拉進function inner使用呢?

方法有2個

1. 用一個變數接收他

let obj = {
 name:’hihi’,
 say: function(){
   let self = this
   function inner(){
     console.log(self)
   }
   inner()
 }
}

obj.say()

範例中利用self儲存用this來代表的obj物件，執行function inner 時因作用域，就可以往外找到代表this的self來用就能順利使用啦

2. 使用箭頭式

箭頭式的設計本身並不認識this，this在箭頭式裡是不起作用的，所以你拿this給箭頭式看就是這個臉

但可以利用此特性，上面的例子就可以改成這樣

let obj = {
 name:’hihi’,
 say: function(){  
     //this(這裡的等同於箭頭式裡this 
   console.log(this)
   const inner = () =>{
       console.log(this)
   }
   inner()
 }
}

obj.say()

因為箭頭式看不懂this的關係所以直接向外看等同於function say同層裡的this，因此就可以方便的拿出來用啦~~

但如果要在物件裡常使用this的話，還是少用一點箭頭式的好，乖乖多打幾個字用function，雖然我也是很懶惰的人(箭頭式愛好者)QAQ

總結啦

簡單分了兩種
1. 用function 直接調用this，這this所指向的就是全域(nodejs)或windows(browser)物件
2. 透過物件調用的function，this所指向的就是該物件

就安捏啦~~886