this 到底指向誰？

一直對於在 javascript 的 this 指向誰搞得有點模糊，今天看了一個影片趁著記憶深刻趕緊做個筆記，希望可以幫助到跟我有一樣疑惑的人。

先說結論

this 的指向跟怎麼調用他有關，跟怎麼定義函式無關。

舉的例子：指向全域的情況

這邊會輸出全域，原因是因為在 callSomeone() 前面沒有任何調用他的物件，這種調用方式又稱作 （simple call 簡易呼叫）

var someone = '全域';
function callSomeone() {
  console.log(this.someone);
}
callSomeone();   
//這邊會輸出'全域'

指向物件內的情況

這邊因為有 obj 去掉用 callSomeone() 這時的 this 會指向 obj 內的 someone

var obj = {
  someone: '物件',
  callSomeone() {
    console.log(this.someone);
  }
}
obj.callSomeone();
//輸出 '物件'

誰調用他 this 就指向誰

下面的範例中雖然 callSomeone() 是寫在第一個函式，但最後是由 obj2 去調用的，所以最終還是指向 obj2 物件內 someone 的值。

//callSomeone 的函式雖然在這邊
var someone = '全域';
 function callSomeone() {
   console.log(this.someone);
 }

var obj2 = {
  someone: '物件2',
  callSomeone
}

obj2.callSomeone(); //輸出物件2

物件包物件的函式呼叫方法

下面這種情況也是，即使是物件中包含物件，但一樣只要是看誰是最後調用 callSomeone() 函式的物件，this 就會指向誰！

var wrapObj = {
  someone: '外層物件',
  callSomeone,
  innerObj: {
    someone: '內層物件',
    callSomeone,
  }
}
wrapObj.callSomeone(); //輸出 '外層物件'
wrapObj.innerObj.callSomeone(); //輸出 '內層物件'

如果使用了 callback function …

如果使用了 callback function 例如使用的 setTimeout() 這種定時器，使用 callback function 大部分會把 this 指向全域。

var someone = '全域';
function callSomeone() {
  console.log(this.someone);
}
callSomeone();




var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(function () {
      console.log(this.someone);
    });
  }
}
obj4.fn(); //輸出 '全域'

如果上述的範例與理解有誤，還歡迎請來信指正，讓我們互相交流一起成長！