最近JavaScriptを学習する上で、thisの参照先についてややこしく感じたので、この記事ではthisの参照先について基本的なパターンを整理してみました。

thisとは

thisとはJavaScriptに最初から用意されている特別な変数のことです。
条件(実行場所)によって参照先が異なり、この条件によって参照先が変わることで意図しない値(undefined)になることが多いです。

紹介パターン

今回は「非厳格モード」を前提に、下記のパターンについてまとめました。

１．何にも含まれていない状態
２．関数内
３．メソッド内
４．constructor内
５．グローバルオブジェクトに格納されているメソッド内
６．thisの参照先を指定する方法

console.log(this);// Window{parent: Window, opener: null, top: Window, length: 0, frames: Window,…}
// windowオブジェクトを参照

function sample() {
  console.log(this); // windowオブジェクトを参照
}

sample();// Window{parent: Window, opener: null, top: Window, length: 0, frames: Window,…}

３．メソッド内

メソッド内で呼び出す場合では、thisは呼び出し元のオブジェクト「person」を参照します。
関数内とは異なり、元々用意されているグローバルオブジェクトではなく、直近で囲まれているオブジェクトを参照することになります。

const person = {
  name: "山田",
  callName: function () {
    console.log("私の名前は" + this.name + "です"); // personを参照
  }
};

person.callName();// 私の名前は山田です

class Person {
  constructor(name) {
    this.name = name; 
　 console.log(this);// objを参照
  }
}

const obj = new Person("山田");
console.log(obj.name); // 山田

５．グローバルオブジェクトに格納されているメソッド内

上記のようにメソッド内で呼び出す場合でも、setTimeoutメソッドのように"グローバルオブジェクトに格納されているメソッド"内でthisを呼び出す場合においては、windowオブジェクトを参照するので注意が必要です。

const person = {
    name: "山田",
    callName: function () {
      setTimeout(function () {
        console.log("私の名前は" + this.name + "です"); // windowオブジェクトを参照
      }
     );
    }
  };

person.callName();// 私の名前はです
// windowオブジェクトを参照するため"this.name"の部分は表示されない

これはthisが決定するロジックとして、直近で囲まれている(最初に見つかる)オブジェクトを基本的に参照するためです。

上記のコードではsetTimeoutの頭にオブジェクト名は記述されておりませんが、正確には

 
window.setTimeout(function () {
  console.log("私の名前は" + this.name + "です");// windowオブジェクトを参照
});
 

と記述されます。

６．thisの参照先を指定する方法

thisを指定する方法はいくつかありますが、ここでは2つ紹介します。

１）bind
bindとは、関数に対してthisや引数を指定することができるメソッドです。
thisを書き換えることによって、参照するプロパティを変更できます。

先ほどの「３．グローバルオブジェクトに格納されているメソッド内」で説明したsetTimeout内のthisをwindowオブジェクトからpersonオブジェクトに変更する場合下記のように記述します。

const person = {
  name: "山田",
  callName: function () {
    setTimeout(
      function () {
        console.log("私の名前は" + this.name + "です"); // personオブジェクトを参照
      }.bind(this)
    );
  },
};

person.callName();// 私の名前は山田です

２）アロー関数で事前にthisを確定する
アロー関数を用いることにより、bindと同じようにthisが参照するオブジェクトを確定させることができます。
これまで説明してきた通り、thisは使う場所によって参照先が変化するため、常にどこを参照しているのか？を意識する必要がありました。
しかし、ES6以降にアロー関数が登場し、事前に参照先を確定することができるようになり、そのような心配は少なくなりました。

const person = {
  name: "山田",
  callName: function () {
    // アロー関数式で宣言する
    setTimeout(() =>{
      console.log("私の名前は" + this.name + "です");// personオブジェクトを参照
      // bind(this)は不要
    });
  },
};

person.callName();// 私の名前は山田です

まとめ

・thisの基本的なロジックとして直近で囲まれている(最初に見つかる)オブジェクトを参照する。
・クラス外、関数内のthisは基本的にグローバルオブジェクトを参照する。
・グローバルオブジェクトに格納されているメソッド内でthisを使用する場合は注意が必要。
・bindやアロー関数により、thisの参照先を指定することができる。