JavaScript thisキーワード

例

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

これは何ですか？

JavaScriptでは、thisキーワードはオブジェクトを指します。

どのオブジェクトがどのように呼び出されるか(使用または呼び出されるか)によって異なります。

thisキーワードは、使用方法に応じてさまざまなオブジェクトを参照します。

オブジェクトメソッドでは、オブジェクトthisを参照します。

単独で、グローバルオブジェクトthisを参照します。

関数内では、グローバルオブジェクトthisを参照します。

関数のstrictモードでは、thisは未定義です。

イベントではイベントを受信した要素thisを指します。

call()、apply()、bind()などのメソッドは thisを任意のオブジェクトに参照できます。

注
thisは変数ではなくキーワードです。 thisの値を変更することはできません。

thisをメソッド内で使う場合

オブジェクトメソッドで使用される場合のthisは、オブジェクトを参照します。

このページの上部の例では、personthisthisオブジェクトを参照しています。

なぜならfullNameメソッドはpersonオブジェクトのメソッドであるためです。

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

thisを単体で使う場合

単独で使用される場合の、thisはグローバルオブジェクトを指します。

なぜならthisはグローバルスコープで実行されているためです。

ブラウザウィンドウでは、グローバルオブジェクトは次のようになります[object Window]:

例

let x = this;

strictモードで、thisを単独で使用する場合、グローバルオブジェクトも参照します

例

"use strict"; let x = this;

thisが関数内にある場合 (デフォルト)

関数では、グローバルオブジェクトはthisのデフォルトのバインディングです。

ブラウザウィンドウでは、グローバルオブジェクトは次のようになります[object Window]。

例

function myFunction() { return this; }

thisが関数内で使用される場合 (厳密)

JavaScriptstrictモードでは、デフォルトのバインディングが許可されません。

そのため、strictモードの関数内で使用すると、thisはundefinedになります。

例

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

thisをイベントハンドラーで使用する場合

HTMLイベントハンドラーでは、thisイベントを受け取ったHTML要素を参照します。

例

<button onclick="this.style.display='none'"> Click to Remove Me! </button>

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

これらの例では、thisはperson オブジェクトを指します。

例

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

例

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

つまりthis.firstNameはthis（person オブジェクト）のfirstNameプロパティです。

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

call()とapply()メソッドは、事前定義されたJavaScriptメソッドです。

どちらも、別のオブジェクトを引数として使用してオブジェクトメソッドを呼び出すために使用できます。

以下の例では、person2を引数としてperson1.fullNameを呼び出します。this.fullNameがperson1 のメソッドであっても、person2を参照します。

例

const person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } const person2 = { firstName:"John", lastName: "Doe", } // Return "John Doe": person1.fullName.call(person2);

関数の借用

メソッドを使用するとbind()、オブジェクトは別のオブジェクトからメソッドを借用できます。

この例では、2つのオブジェクト(個人とメンバー)を作成します。

memberオブジェクトはpersonオブジェクトからfullnameメソッドを借用します。

例

const person = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } const member = { firstName:"Hege", lastName: "Nilsen", } let fullName = person.fullName.bind(member);

thisの優先順位

どのオブジェクトがthisを参照しているか判断するには、次の順序の優先順位を使用します。

優先順位	Object
1	bind()
2	apply() and call()
3	Object method
4	Global scope

thisは、bind()を使用して呼び出される関数内にありますか?
thisは、apply()を使用して呼び出される関数内にありますか?
thisは、call()を使用して呼び出される関数内にありますか?
thisは、オブジェクト関数(メソッド)内にありますか？
thisは、グローバルスコープの関数内にあります。

【2024年】人気プログラミングスクールを解説

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

HTML and CSS

Javascript

Backend

プロンプトエンジニアリング