快速精通 JavaScript 的 “this”

理解 this 之前先告訴自己：

1. 範圍鍊會向外部環境搜尋變數（所在的物件內找到答案），一但 this 脫離了物件，可能會導致參照全域環境，在這種情況下 this 會有個預設值，嚴格模式下的 this 預設值是 undefined，非嚴格模式下的 this 預設值是全域物件。
2. this 與函式宣告位置無關，關鍵在於函式被呼叫的方式。
3. this 指的是函式執行時，這個作用範圍（scope）的所有者（owner），你可以用 call、apply 與 bind 改變 this 指向的對象，簡而言之，this 就是你 call 一個函數時，所傳入的第一個參數。
4. ES6 的箭頭函數沒有自己的 this，所以在箭頭函數裡看到 this ，就當作是外面函數的 this 即可。

接下來讓我們來點練習

func(p1, p2) // 等同於 func.call(undefined, p1, p2)

obj.child.method(p1, p2) // 等同於 obj.child.method.call(obj.child, p1, p2)

有點概念了嗎？那麼請問以下傳回的值：

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

var obj = {
    foo: function(){
      console.log(this);
  }
}
obj.foo()

var obj = {
  foo: function(){
    console.log(this);
  }
}
var bar = obj.foo
obj.foo();
bar();

function fn() {
  console.log(this);
}
var arr = [fn, fn2]
arr[0]();

var getGender = function() {
  return this.gender;
}
var people1 = {
  gender: ‘female’,
  getGender: getGender
}
var people2 = {
  gender: ‘male’,
  getGender: getGender
}
console.log( people1.getGender() );
console.log( people2.getGender() );