Learn this in JavaScript through simple story

透過簡單的故事了解 JavaScript 中的 this

@ JavaScript

用簡單的故事了解 this 是什麼

小明和小美是一對夫妻，他們住在芝麻街的 34 號，有一天小明或小美說：「這個房子太舊了，需要重新裝修！」，可以發現這個 this 就代指小明和小美所住的家，也就是「芝麻街 34 號」的意思。

但假設今天呼叫 this 的人不是小明和小美，而是另外一個家庭，那麼 this 會代表「另外一個家」，而不是「芝麻街 34 號」，在這個故事中的概念實際上與 JavaScript 的 this 一模一樣！

什麼是 this

簡單來說，誰呼叫 this，this 就代表誰。

在 JavaScript 中可以使用 this 在全域以及函式執行環境中，此外 this 在嚴格模式🔗下的表現也會有所不同。以下會舉例四種使用情境。

其中直接在全域中使用 this 與在函式中使用 this 意義並不大(方法一、二)，知道就好。

一、在全域中使用 this

如果直接打印 this，那麼用瀏覽器中執行就會是 window，在 node.js 中執行會是 global。

console.log(this === window); // true

二、在函式中使用 this

在非嚴格模式🔗下， this 會指向全域物件，也就是 window 或 global，這是因為執行環境(比如說瀏覽器)認為你是在指 window.呼叫的函式 。

function show() {
  console.log(this === window); // true
}
show();

但在嚴格模式下， this 會是 undefined，避免 this 莫名的存取到全域物件，就算在嵌套的函式中也是一樣。

'use strict';
function show() {
  console.log(this === undefined);
}
show();

三、在方法中使用 this

上學的小孩就叫做「學生」，在物件中的函式就被稱作「方法」。如果呼叫了一個方法，那麼 JavaScript 就會將 this 指向該方法所屬的物件。

function sayName() {
  return `我的名字是： ${this.name}`;
}


const me = {
  name: '小明',
  sayName,
};


const you = {
  name: '小美',
  sayName,
};


me.sayName(); // 小明
you.sayName(); // 小美

四、在建構式中使用 this

當使用 new 關鍵字串建一個新的物件時，那麼 JavaScript 就會將 this 指向該方法所屬的物件。

function Student(name) {
  this.name = name;
}


const student = new Student('小明');
console.log(student.name); // 小明

指定 this

前面提到 4 使用情境，但是有時候會需要手動指定 this 的值，這時候就可以使用 call()、apply()、bind() 三種方法。

總結

this 會如此讓人混亂是因為它需要基於前後文來判斷，最簡單的原則就是：誰呼叫 this，this 就代表誰。

參考資料