JavaScriptのthisキーワードの意味と使い方を理解しよう

先生

JavaScriptのthis、奥が深いけど使いこなせるとマジ便利！いろんな場面でのthisを徹底解説するよ！

JavaScriptのthisキーワードとは？基本を理解しよう

JavaScriptにおけるthisキーワードは、他の言語とは少し異なる振る舞いをします。thisは、関数がどのように呼び出されたかに基づいて、その値が決定される特別なキーワードです。つまり、thisは「誰が」その関数を呼び出したのかを示す参照のようなものです。

thisを理解することは、JavaScriptでオブジェクト指向プログラミングを行う上で非常に重要になります。thisの値を正しく把握することで、コードの挙動を予測し、意図した通りの動作をさせることが可能になります。

この記事では、thisキーワードの基本的な意味と、様々な状況下でのthisの値について詳しく解説します。

thisキーワードの4つのパターン

thisの値は、主に以下の4つのパターンで決定されます。

1. グローバルコンテキスト: グローバルスコープ（ブラウザではwindowオブジェクト、Node.jsではglobalオブジェクト）でthisを使用した場合。

2. 関数コンテキスト: 関数がどのように呼び出されたか（直接呼び出し、メソッド呼び出しなど）。

3. メソッドコンテキスト: オブジェクトのメソッドとして関数が呼び出された場合。

4. コンストラクタコンテキスト: newキーワードを使ってコンストラクタ関数が呼び出された場合。

それぞれのパターンについて、具体的なコード例を交えながら見ていきましょう。

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

グローバルコンテキストでは、thisはグローバルオブジェクトを参照します。ブラウザ環境ではwindowオブジェクト、Node.js環境ではglobalオブジェクトになります。


console.log(this === window); // ブラウザ環境ではtrue
console.log(this); // ブラウザ環境ではwindowオブジェクトが表示される

2. 関数コンテキストでのthis

関数が単独で呼び出された場合（メソッドとしてではなく）、strictモードでなければ、thisはグローバルオブジェクトを参照します。strictモードでは、thisはundefinedになります。


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

myFunction(); // strictモードでなければwindowオブジェクト、strictモードならundefined

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

3. メソッドコンテキストでのthis

オブジェクトのメソッドとして関数が呼び出された場合、thisはそのオブジェクト自身を参照します。


const myObject = {
  myMethod: function() {
    console.log(this);
  }
};

myObject.myMethod(); // myObjectオブジェクトが表示される

4. コンストラクタコンテキストでのthis

newキーワードを使ってコンストラクタ関数を呼び出すと、新しいオブジェクトが作成され、そのオブジェクトがthisとして関数内で使用されます。


function MyConstructor() {
  this.myProperty = 'Hello';
  console.log(this);
}

const myInstance = new MyConstructor(); // MyConstructorのインスタンスが表示される
console.log(myInstance.myProperty); // 'Hello'

bind、call、applyメソッドでthisを制御する

JavaScriptには、bind、call、applyという3つのメソッドがあり、これらを使用すると、関数のthisの値を明示的に設定できます。

callとapplyは関数を即座に実行しますが、bindは新しい関数を返します。


function sayHello() {
  console.log('Hello, ' + this.name);
}

const person = { name: 'Alice' };

// call
sayHello.call(person); // Hello, Alice

// apply
sayHello.apply(person); // Hello, Alice

// bind
const boundFunction = sayHello.bind(person);
boundFunction(); // Hello, Alice

アロー関数とthis

アロー関数は、独自のthisコンテキストを持ちません。アロー関数内のthisは、そのアロー関数が定義された場所のthisを引き継ぎます（レキシカルスコープ）。


const myObject = {
  myMethod: function() {
    const arrowFunction = () => {
      console.log(this); // myObjectオブジェクトが表示される
    };
    arrowFunction();
  }
};

myObject.myMethod();

参考リンク

まとめ

thisキーワードはJavaScriptにおいて非常に重要な概念であり、その挙動を理解することは、より高度なJavaScriptプログラミングを行う上で不可欠です。この記事を参考に、thisキーワードをマスターし、より自信を持ってJavaScriptコードを書けるようにしましょう。