JavaScriptのthisを理解!7つのサンプルコードで完全解説

JavaScriptのthisを理解するためのサンプルコード集JS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読むことで、JavaScriptのthisを理解し、使いこなすことができるようになります。

初心者でも分かりやすいように、7つのサンプルコードを用いて、thisの使い方や注意点、カスタマイズ方法を徹底解説します。

●JavaScript thisの基本

○thisの意味と使い方

JavaScriptでは、thisというキーワードを使って、関数の実行コンテキスト(実行されている状況)を参照することができます。

具体的には、thisは関数が所属するオブジェクトを指します。

ただし、関数の実行方法によっては、thisが異なるオブジェクトを指すことがあります。

このため、thisの扱いには注意が必要です。

●JavaScript thisのサンプルコード

それでは、具体的なサンプルコードを見ていきましょう。

○サンプルコード1:オブジェクト内の関数でthisを使う

このコードでは、オブジェクト内の関数でthisを使っています。

この例では、personオブジェクトのsayHelloメソッドでthisを使って、オブジェクトのプロパティにアクセスしています。

const person = {
  name: '太郎',
  sayHello: function() {
    console.log('こんにちは、' + this.name + 'です!');
  }
};

person.sayHello(); // こんにちは、太郎です!

○サンプルコード2:イベントリスナーでthisを使う

このコードでは、イベントリスナーでthisを使っています。

この例では、ボタンクリック時にイベントリスナーがthisを使って、クリックされたボタンのテキストを取得しています。

<button id="myButton">クリックしてね!</button>

<script>
const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log('ボタンがクリックされました:' + this.textContent);
});
</script>

○サンプルコード3:setTimeoutでthisを使う

このコードでは、setTimeoutメソッドを用いて、一定時間後に関数を実行する方法を紹介しています。

この例では、personオブジェクトのsayHelloメソッド内でsetTimeoutを使って、3秒後にオブジェクトのプロパティにアクセスしています。

ただし、setTimeout内でthisを使う場合、thisはwindowオブジェクトを指してしまうため、アロー関数を使って対応しています。

const person = {
  name: '太郎',
  sayHello: function() {
    setTimeout(() => {
      console.log('こんにちは、' + this.name + 'です!');
    }, 3000);
  }
};

person.sayHello(); // 3秒後に「こんにちは、太郎です!」と出力される

○サンプルコード4:クラスとインスタンスでthisを使う

このコードでは、クラス定義内でthisを使って、インスタンスのプロパティにアクセスする方法を説明しています。

この例では、Personクラスを作成し、コンストラクタで名前を設定し、sayHelloメソッドでインスタンスの名前を表示しています。

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log('こんにちは、' + this.name + 'です!');
  }
}

const person1 = new Person('太郎');
person1.sayHello(); // こんにちは、太郎です!

○サンプルコード5:アロー関数でのthisの挙動

このコードでは、アロー関数でthisがどのように振る舞うかを説明しています。

この例では、アロー関数内でthisを使ってオブジェクトのプロパティにアクセスし、通常の関数との違いを確認しています。

const person = {
  name: '太郎',
  sayHello: () => {
    console.log('こんにちは、' + this.name + 'です!');
  }
};

person.sayHello(); // こんにちは、undefinedです!

○サンプルコード6:call, apply, bindを使ってthisを操作する

このコードでは、call、apply、bindメソッドを使用して、関数内でthisが参照するオブジェクトを変更する方法を紹介しています。

この例では、sayHello関数を定義し、それぞれのメソッドを使って、別のオブジェクトのプロパティにアクセスしています。

function sayHello() {
  console.log('こんにちは、' + this.name + 'です!');
}

const person1 = { name: '太郎' };
const person2 = { name: '花子' };

sayHello.call(person1); // こんにちは、太郎です!
sayHello.apply(person2); // こんにちは、花子です!
const sayHelloPerson1 = sayHello.bind(person1);
sayHelloPerson1(); // こんにちは、太郎です!

○サンプルコード7:カスタムイベントでthisを使う

このコードでは、カスタムイベントのリスナーでthisを使う方法を説明しています。

この例では、カスタムイベントを発火させる関数内でthisを使って、イベントデータをセットし、リスナー側でthisを使ってイベントデータにアクセスしています。

class CustomEventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(event, listener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
  }

  emit(event, data) {
    const eventListeners = this.listeners[event];
    if (eventListeners) {
      eventListeners.forEach((listener) => {
        listener.call(data, event);
      });
    }
  }
}

const eventEmitter = new CustomEventEmitter();

eventEmitter.on('myEvent', function() {
  console.log('カスタムイベント発生:' + this.message);
});

eventEmitter.emit('myEvent', { message: 'こんにちは、カスタムイベントです!' });
// カスタムイベント発生:こんにちは、カスタムイベントです!

●注意点と対処法

○コンテキストの変更

関数が実行される状況によって、thisが参照するオブジェクトが変わることがあります。

そのため、意図しないオブジェクトにアクセスしてしまうことがあります。

この問題を回避するためには、call、apply、bindメソッドを使って、関数内のthisが参照するオブジェクトを明示的に指定することができます。

○アロー関数と通常の関数

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

アロー関数では、thisがレキシカルスコープに従って束縛されるため、関数が定義された時点でのthisを参照します。

一方、通常の関数では、関数が実行される際のコンテキストによってthisが決まります。

これにより、意図しないオブジェクトにアクセスすることがあります。

そのため、どちらの関数形式を使用するかは、状況に応じて慎重に選択する必要があります。

●カスタマイズ方法

○thisを活用したプロジェクトのアイデア

  1. カスタムイベントの作成:thisを使ってイベント発火時のデータにアクセスし、柔軟なイベント処理を実現できます。
  2. オブジェクト指向プログラミング:クラスやオブジェクト内でthisを使用し、インスタンスごとに異なるプロパティやメソッドを管理できます。
  3. DOM操作:イベントリスナー内でthisを用いて、発火元の要素に直接アクセスして操作することができます。

まとめ

JavaScriptのthisは、関数内でオブジェクトにアクセスする際に重要な役割を果たします。

ただし、thisの参照先が関数の実行状況によって変わるため、適切な方法でthisを操作することが重要です。

アロー関数や通常の関数を使い分けることで、コードの挙動を理解しやすくし、柔軟なプロジェクトを実現できます。