JavaScript this キーワード

オブジェクト指向言語では、this は現在のオブジェクトへの参照を表します。

しかし JavaScript では、this は固定ではなく、実行環境の変化に応じて変わります。

  • メソッド内では、this はそのメソッドが属するオブジェクトを表します。
  • 単独で使用する場合、this はグローバルオブジェクトを表します。
  • 関数内では、this はグローバルオブジェクトを表します。
  • 関数内では、厳格モードの場合、this は未定義（undefined）です。
  • イベント内では、this はイベントを受け取る要素を表します。
  • call() や apply() のようなメソッドを使うと、this を任意のオブジェクトに参照させることができます。

例

var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } };

試してみる »

メソッド内の this

オブジェクトメソッド内では、this はそのメソッドを呼び出したオブジェクトを指します。

上記の例では、this は person オブジェクトを表します。

fullName メソッドが属するオブジェクトは person です。

例

fullName : function() { return this.firstName + " " + this.lastName; }

試してみる »

this を単独で使用する

this を単独で使用すると、this はグローバル（Global）オブジェクトを指します。

ブラウザでは、window がそのグローバルオブジェクトです [object Window]:

例

var x = this;

試してみる »

厳格モードでも、単独で使用する場合、this はグローバル（Global）オブジェクトを指します。

例

"use strict"; var x = this;

試してみる »

関数内で this を使用する（デフォルト）

関数内では、関数の所有者がデフォルトで this にバインドされます。

ブラウザでは、window がそのグローバルオブジェクトです [object Window]:

例

function myFunction() { return this; }

試してみる »

関数内で this を使用する（厳格モード）

厳格モードでは、関数は this にバインドされておらず、このとき this はundefined。

例

"use strict"; function myFunction() { return this; }

試してみる »

イベント内の this

HTML イベントハンドラ内では、this はイベントを受け取った HTML 要素を指します：

例

<button onclick="this.style.display='none'"> クリックすると私は消えます </button>

試してみる »

オブジェクトメソッド内でのバインド

以下の例では、this は person オブジェクトであり、person オブジェクトは関数の所有者です：

例

var person = { firstName : "John", lastName : "Doe", id : 5566, myFunction : function() { return this; } };

試してみる »

例

var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } };

試してみる »

説明：this.firstName表しますthis(person) オブジェクトのfirstNameプロパティ。

明示的な関数バインド

JavaScript では関数もオブジェクトであり、オブジェクトにはメソッドがあります。apply と call は関数オブジェクトのメソッドです。この2つのメソッドは非常に強力で、関数実行のコンテキスト（context）、つまり this がバインドされるオブジェクトを切り替えることを可能にします。

以下の例では、person2 を引数として person1.fullName メソッドを呼び出すと、thisthis は person2 を指します。たとえそれが person1 のメソッドであってもです：

例

var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); //"John Doe" を返す

試してみる »
その他の拡張