Javascriptのthisを学ぼう！初心者でも理解しやすいthisの書き方を解説

JavaScriptのthisは、初心者にとって理解が難しい概念の1つです。しかし、thisを適切に使用すると、コードの再利用性が高まり、オブジェクト指向プログラミングの実現が容易になります。

本記事では、thisの基本的な概念から、さまざまな状況での使い方まで、初心者にもわかりやすく解説します。関数やメソッドの実行コンテキストを参照するthisの特性を理解し、効果的なJavaScriptプログラミングを目指しましょう。

JavaScriptのthisとは？

JavaScriptのthisは、関数が実行されるコンテキストを参照するキーワードです。

例えば、thisを使用すると、オブジェクトのメソッド内でそのオブジェクト自身を参照できます。

一方で、thisの値は、関数がどのように呼び出されたかによって動的に変化する特徴があり、理解するうえで注意が必要です。

thisとfunctionについて

functionキーワードで定義された関数内でのthisは、関数の呼び出し方によって異なる値を取ります。

メソッドとして呼び出された場合、thisはメソッドを所有するオブジェクトを参照します。一方、単独の関数として呼び出された場合、thisはグローバルオブジェクト（ブラウザ環境ではwindow）を参照します。

thatとの違い

thatは、thisの値を別の変数に保存する目的でよく使用される慣習的な変数名です。thisの値が変わってしまう状況で、元のthisの参照を保持するために使用されます。

例えば、コールバック関数内でオブジェクトのメソッドを呼び出す場合、あらかじめメソッドが定義されたスコープのthisをthatに保存しておくと、コールバック内でも正しいオブジェクトを参照できます。

JavaScriptのthisの使い方

thisは、現在のコンテキストを指すキーワードで、通常はメソッド内で使用します。

const myObject = {

  name: “R-Stone”,

  sayHello: function() {    // オブジェクトのメソッド

    console.log(“Hello, my name is “ + this.name);

  } // this はメソッドを所有するオブジェクト myObject を参照

};

myObject.sayHello(); // 出力: Hello, my name is R-Stone

上記コードでは、this.nameで、同オブジェクトのnameプロパティを参照します。

また、関数の呼び出される場面により変わる、thisの参照先を意識して使うことが求められます。

thisの基本的な書き方

thisの基本的な書き方には、暗黙的な設定と明示的な設定があります。

通常は、関数がどのように呼び出されたかによってthisが暗黙的に決まります。

一方、明示的にthisの値を指定する、call apply bindメソッドも使えます。

順番に、各ケースを見ていきましょう。

メソッドの呼び出し

オブジェクトのメソッド内でthisを使用すると、当該オブジェクトを参照します。

const obj = {

  name: “太郎”,

  greet() {

    console.log(`こんにちは、${this.name}です`); // thisはobjを参照

  }

};

obj.greet(); // “こんにちは、太郎です”と出力

プロトタイプメソッドでも同様に、thisはメソッドを呼び出したオブジェクトを参照します。

また、メソッドチェーンを使う場合、thisは最後に呼び出されたメソッドのオブジェクトを指します。

関数の呼び出し

通常の関数では、thisは以下のようになります。

“use strict”;

function showThis() {

  console.log(this);

}

showThis(); // undefinedを出力

アロー関数とthis

アロー関数内のthisは、関数が定義されたスコープのthisを引き継ぐため、コールバック関数内をアロー関数で記述するとthisを便利に使用できます。

const obj = {

  name: “Example”,

  regularMethod: function() {

    setTimeout(function() {

      console.log(“通常のコールバック関数の this:”, this.name); // undefined（strictモード）またはwindow.name

    }, 100);

    setTimeout(() => {  // アロー関数をメソッド内で定義 → thisはオブジェクト自身を指します。

      console.log(“アロー関数コールバックの this:”, this.name); // “Example”

    }, 100);

  },

  arrowMethod: () => {

    console.log(“アロー関数メソッドの this:”, this.name); // undefined（アロー関数はオブジェクトのメソッドとして使用する場合、期待通りに動作しません）

  }

};

コンストラクタの呼び出し

newキーワードを使用してコンストラクタ関数を呼び出すと、thisは新しく生成されたオブジェクトを参照します。

function Person(name) {

  this.name = name; // thisは新しく作られたオブジェクトを指す

}

const person = new Person(“花子”);

console.log(person.name); // “花子”と出力

また、プロトタイプメソッド内のthisは、メソッドを呼び出したインスタンスを参照します。

その他の書き方

thisの値を明示的に設定する場合の書き方を見ていきましょう。

bind()メソッド

bind()は、thisを指定して、関数を作成します。

function greet() {

  console.log(`おはよう ${this.name}!`);

}

const person = { name: “山田” };

const boundGreet = greet.bind(person);

boundGreet(); // “おはよう 山田”

call()メソッドとapply()メソッド

関数を呼び出す際に、thisの値を一時的に設定できます。

function greet(greeting, period) {

  console.log(`${greeting}, ${this.name}${period}`);

}

const person = { name: “田中” };

greet.call(person, “さよなら”, “。”); // “さよなら, 田中。”

greet.apply(person, [“お元気で”, “!”]); // “お元気で, 田中!”

いずれも、thisの値と、関数の引数を指定でき、callではカンマ区切り、applyでは配列として引数を指定します。

まとめ

JavaScriptのthisは、関数やメソッドの実行コンテキストを参照する重要な概念です。暗黙的な設定と明示的な設定、アロー関数での固定など、さまざまな使い方があります。

thisを活用すると、オブジェクト指向プログラミングやコードの再利用性が可能になります。thisの特性を活かして、自身のプロジェクトでオブジェクト指向プログラミングを実践してください。