前言

今天我們將講解JavaScript的this keyword，查看this指向的邏輯為何

說明

this keyword（this關鍵字）

由於this keyword在不同情況下使用會有不同結果
因此若沒有弄懂指向原理，會容易遇到非預期結果

那該如何判斷this keyword指向何處呢？

this keyword不是看該屬性或函式被定義在哪個物件內，而看的是執行當下被誰呼叫

舉例:
情境一:Function (獨立函式)

function name(){
  console.log(this);
}

name(); //會指向全局Object（瀏覽器: "window"）

情境二: Object method(物件的方法)

let obj = {
  name: "Jeremy",
  call: function() {
    console.log(this); //物件的方法會指向?
  }
};

obj.call(); //{name: 'Jeremy', call: ƒ} (指向Object本身，this會指向方法所屬的Object)

情境三: Event handle function(事件處理函式)

document.addEventListener('click', function(){
  console.log(this) //document (this會指向接收到Event的元素)
})

情境四: Constructor function(建構函式)

function Name(){
  console.log(this);
}

new Name(); //Name {} (this會指向瀏覽器自動新建的『空白』物件)

既然會產生空白物件，我們即可藉此設定該物件

function Name(){
  console.log(this);
  this.firstName = 'Hung';
  this.lastName = 'Jeremy'; 
}

let newName = new Name();
console.log(newName) 
// Name {} 
//Name {firstName: 'Hung', lastName: 'Jeremy'} (空白物件成功設定firstName和lastName屬性)

簡單彙整(情境vs.指向結果):