This

之前提到過在 JavaScript 引擎創造全域執行脈絡時,
在創造階段除了創造全域物件(window)也會創造變數 this ,
this 在瀏覽器的全域執行脈絡中會參考到全域物件(window),

console.log(this);

在 chrome 開發者工具的 console 來確認:

如果在宣告在全域層級的 function 與被匿名 function 賦值的全域變數中來查看 this 會參考到什麼?
會是 function 本身嗎?

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

var b = function () {
  console.log(this);
}

a();

b();

在 chrome 開發者工具的 console 來確認:

會發現這個 function 中的 this 還是參考到全域物件 window,

那如果是在物件中的方法呢?
宣告一個餐廳物件並在物件中新增方法:

var restaurant = {
  address: '你家巷子口',
  move: function () {
    this.address = '隔壁縣市車站旁天橋下';
    console.log(this);
  }
}

在開發者工具的 console 中會看到 this 參考到餐廳物件:

這時如果我們又在 move 方法中將匿名 function 賦值給 move 方法中的區域變數,
並透過 move 方法中的區域變數來呼叫匿名 function 藉此來查看 this 參考到哪個物件呢?

var restaurant = {
  address: '你家巷子口',
  move: function () {
    this.address = '隔壁縣市車站旁天橋下';
    console.log(this);
    var moveAgain = function () {
      console.log(this);
    }

    moveAgain();
  }
}

restaurant.move();

在開發者工具的 console 中會看到 this 參考到全域物件 window:

如果不想讓餐廳物件的方法中的 function 的 this 參考到全域物件 window,
可以透過以下技巧來卻保餐廳物件方法與方法中的 function 都是參考到餐廳物件:

var restaurant = {
  address: '你家巷子口',
  move: function () {
    var self = this;
    this.address = '隔壁縣市車站旁天橋下';
    console.log(this);
    var moveAgain = function () {
      self.address = "你家附近的全家隔壁"
      console.log(self);
    }

    moveAgain();
  }
}

restaurant.move();

在開發者工具的 console 中查看結果: