JavaScript this キーワード

インスタンス

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

自分で試してみる

this とは何ですか？

JavaScript this キーワードはそれが属するオブジェクトを指します。

その使用位置によって異なる値を持っています：

  • メソッド内で、this はオーナーオブジェクトを指します。
  • 単独の場合、this はグローバルオブジェクトを指します。
  • 関数内、this はグローバルオブジェクトを指します。
  • 関数内、厳格モードでは、this は undefined です。
  • イベント内で、this はイベントを受け取る要素を指します。

像 call() および apply() このようなメソッドは this をどのオブジェクトにもリファレンスできるようにします。

メソッドの this

オブジェクトメソッド内で、this はこのメソッドの「所有者」を指します。

このページの最上位の例では、this は person オブジェクトを指します。

person オブジェクトは fullName メソッドの所有者です。

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

自分で試してみる

単独の this

単独で使用される場合、所有者はグローバルオブジェクトです、したがって、 this はグローバルオブジェクトを指します。

ブラウザウィンドウでは、グローバルオブジェクトは、 [object Window]：

インスタンス

var x = this;

自分で試してみる

厳格モードでは、単独で使用される場合、 this はグローバルオブジェクトを指します [object Window]：

インスタンス

"use strict";
var x = this;

自分で試してみる

関数内の this（デフォルト）

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

したがって、関数内で、this はグローバルオブジェクトを指します [object Window]。

インスタンス

function myFunction() {
  return this;
}

自分で試してみる

関数内の this（厳格モード）

JavaScript 厳格モードではデフォルトのバインドを許可しません。

したがって、関数内で使用する場合、厳格モードでは、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  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

自分で試してみる

インスタンス

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

自分で試してみる

言い換えれば、this.firstName これは this（person）オブジェクトの firstName 属性。

明示的な関数バインディング

call() および apply() は、既定の JavaScript メソッドです。

これらは、オブジェクトメソッドを呼び出すために他のオブジェクトを引数として使用するために使用できます。

このチュートリアルの後で、詳細を読むことができます。 call() および apply() の詳細について。

以下の例では、person2を引数として person1.fullNameを呼び出す場合、this person2を参照します。これは person1のメソッドです：

インスタンス

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 「Bill Gates」が返されます

自分で試してみる