Javascript

【JavaScript】記述場所毎のthisの参照先

 

こんにちは、ともです。

JavaScriptのthisキーワードの参照先は関数内の場合かコンストラクター内か等と言った記述場所の違いで参照先が変わります。

そこでJavaScriptのthisキーワードの参照先について理解をまとめておきます。

比較する場所

thisキーワードの記述場所が次の場合で比較を行います。

  • グローバルコンテクスト
  • 関数コンテクスト
  • アロー関数
  • オブジェクトのメソッド
  • コンストラクタ
  • DOMイベントハンドラ
  • インラインイベントハンドラ

グローバルコンテクスト

console.log(this); // window

グローバルコンテクストでthisを参照した場合、Strict・非Strictに関わらずwindowオブジェクトを参照します。

関数コンテクスト

function f() {
  return this;
}
console.log(f());
// strictでundefined
// 非ストリクトでwindow

関数内で参照したthisはStrictでundefined、非strictでwindowを参照します。

アロー関数

var arrow = () => console.log(this);// window

グローバルコンテクストに書かれたアロー関数内のthisはwindowを参照

オブジェクトの関数リテラル

var obj = {
  obFunc: function () { console.log(this) }
}

obj.obFunc();//obj

オブジェクトで関数リテラルとして定義した関数内のthisはそのオブジェクト自身を参照

オブジェクトのアロー関数

var obj = {
  obArrow: () => console.log(this),
}
obj.obArrow();//window

オブジェクトでアロー関数として定義した関数内のthisはwindowを参照

コンストラクタ内のthis

function Member() {
  console.log(this);
}
Member();// 関数と同様、strict=>undefined, 非strict=>window
new Member();// コンストラクタの場合はMember自身を参照

Memberのコンストラクタを強制的に起動した場合は関数を起動した場合と同様にstrictモードでundefined、非strictモードでwindowを参照します。

newキーワードでコンストラクタとして起動した場合はMember自身を参照します。

インラインイベントハンドラ内

インラインイベント内

<button onclick="console.log(this);">inline</button>
// Out：自身のDOM要素(button)

インラインイベントハンドラ内のthisキーワードは自身のDOM要素を参照します。この例の場合this.tagName => buttonとなります。

インラインイベントで定義された関数内

<button onclick="(function() { console.log(this); }());">
    Show inner this
  </button>

このように関数として定義された中のthisは、関数内でthisが定義されていないことからwindowオブジェクトを返します。

まとめ

thisキーワードの配置位置による参照先について理解をまとめました。

  • 関数リテラル内のthisはstrictモードでundefined、非strictでwindow
  • オブジェクトの関数リテラルのthisはオブジェクト自身
  • コンストラクタ内のthisはクラス自身
  • それ以外はwindow

このように覚えておこうと思います。もし何か謝りがあれば教えてください。

関連記事はこちら