this

• 在JavaScript上被非常頻繁的使用
• 每個 function 都各自 this 的表示(影響 this 的是在於函式的呼叫方法，並非宣告的時機)

Recular function call : 純粹的調用 (Simple call)
直接調用函式，此函式的 this 會指向 global object (the window object in the broswer)

window.name = 'sui';
function callMyName() {
  console.log(this.name);
}

callMyName();
// output : sui
// 直接調用 -> this 指向 window

於函式中，宣告其他函式

window.name = 'sui';
function callMyName () {
  console.log(this.name);

  // function in a function
  function recallMyName () {
    console.log(this.name);
  }
  recallMyName();
}
callMyName();

// output : sui
// output : sui

-> 只要呼叫函式，this 都是屬於全域 & 純粹的調用方式 this 都會指向 window

Method call : 物件的方法調用 (As an object method)

function callMyName() {
    console.log(this.name);
}
  
var name = 'sui_global';
var me = {
    name: 'sui_object',
    callMyName: callMyName
}
  
callMyName()        // output : sui_global
me.callMyName()     // output : sui_object -> 透過物件呼叫 this指向物件內

小重點:
JavaScript 的 Window 物件讓用來存取和操作瀏覽器的視窗

透過直接 log 分辨 Recular function call 以及 Method call
測式直接 log

console.log(this);
// output : Window Object

Recular function call

window.name = 'sui';
function callMyName () {
  // function in a function
  function recallMyName () {
    console.log(this);
  }
  recallMyName();
}
callMyName();

// output : Window Object

Method call

var me = {
    name : 'sui',
    age : 19,
    caculateAge : function(){
        console.log(this);
    }
}
me.caculateAge();

// output : me Object

個人認為 this 看似簡單，但多爬文發現其時的沒有這麼容易，而且有時候還會搞混~
永遠記得大一上程式設計課，第一次看到 this ，大家滿頭問號，助教只說了一句
: this，就是 這個 的意思! ($#%^$#$，你是在上英文課嗎)
今天終於又把它看懂一些了~

新手練功中，如有錯誤觀念，歡迎指正，這次範例套用了一些別人文章以及課程的程式碼(有稍微調整)，在此感謝各路高手!
課程 : https://www.udemy.com/course/the-complete-javascript-course/
來源 : https://blog.techbridge.cc/2019/02/23/javascript-this/
https://wcc723.github.io/javascript/2017/12/12/javascript-this/