JavaScriptのthisの使い方をわかりやすく解説！thisを正しく理解しよう

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptを学んでいると、必ず出てくるのが「this」というキーワードです。

thisは、JavaScriptにおいて非常に重要な概念の一つですが、初心者にはわかりにくいですよね。

thisの使い方を理解することで、より効率的で可読性の高いコードを書けるようになります。

そこでこの記事では、JavaScriptのthisについて、基本的な動作から、アロー関数やクラスでの使われ方、活用のヒントまで、図解を交えてわかりやすく説明していきます！

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

そもそもthisとは何か？

thisは、「現在の実行コンテキスト」を参照するキーワードです。

実行コンテキストとは、コードが実行される環境のことで、簡単に言えば「そのコードが属しているオブジェクト」を指します。

例えば、オブジェクトのメソッド内でthisを使うと、そのthisはメソッドを呼び出したオブジェクト自身を指します。

一方、単なる関数の中でthisを使うと、そのthisはグローバルオブジェクト（ブラウザではwindowオブジェクト）を指します。

つまり、thisは使われる場所によって参照先が変化するのが特徴なのです。

グローバルコンテキストでのthis

グローバルスコープ、つまりどのオブジェクトにも属さない場所でthisを使うと、それはグローバルオブジェクトを指します。

console.log(this); // Window {...} (ブラウザの場合)

関数コンテキストでのthis

通常の関数内でthisを使うと、そのthisもグローバルオブジェクトを指します。

ただし、strict modeを使っている場合、thisはundefinedになります。

function myFunction() {
  console.log(this);
}
myFunction(); // Window {...}

function myStrictFunction() {
  'use strict'
  console.log(this);
}
myStrictFunction(); // undefined

オブジェクトのメソッドとしてのthis

オブジェクトのメソッド内でthisを使うと、そのthisはメソッドを呼び出したオブジェクト自身を指します。

これは、Javaなどの他の言語でのthisの挙動と似ています。

const obj = {
  prop: "someValue",
  myMethod: function () {
    console.log(this.prop);
  }
};
obj.myMethod(); // "someValue"

コンストラクター関数とthis

コンストラクター関数内でthisを使うと、そのthisは新しく作成されるインスタンスを指します。

つまり、thisを使ってインスタンスのプロパティを定義することができます。

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Honda", "Accord");
console.log(myCar.make); // "Honda"

アロー関数とthis

アロー関数では、thisの挙動が通常の関数とは異なります。

アロー関数内のthisは、アロー関数を囲むスコープのthisを継承します。

これにより、thisが予期せず変化することを防げます。

const obj = {
  myMethod: function() {
    const myArrowFunc = () => {
      console.log(this);
    }
    myArrowFunc();
  }
}
obj.myMethod(); // {myMethod: ƒ}

この例では、アロー関数内のthisは、それを囲むmyMethodのthis、つまりobjを参照します。

クラスとthis

クラス内のメソッドでthisを使うと、そのthisはメソッドを呼び出したインスタンスを指します。

これは、コンストラクター関数の場合と同じです。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  getArea() {
    return this.height * this.width;
  }
}

const myRectangle = new Rectangle(5, 3);
console.log(myRectangle.getArea()); // 15