JavaScriptのこのキーワード
例
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
これは何ですか?
JavaScriptthis
キーワードは、それが属するオブジェクトを参照します。
使用場所によって値が異なります。
- メソッドで
this
は、所有者オブジェクトを参照します。 - 単独で、グローバルオブジェクト
this
を参照します。 - 関数内で、グローバルオブジェクト
this
を参照します。 - 関数では、厳密モードでは、
this
ですundefined
。 - イベントでは、イベントを受信した要素
this
を指します。 - のようなメソッドは
call()
、任意のオブジェクトをapply()
参照できます。this
これはメソッドで
オブジェクトメソッドでは、メソッドの「所有者this
」を指します。
このページの上部にある例では、 personオブジェクトthis
を参照しています。
personオブジェクトは、fullNameメソッドの所有者です。
fullName : function() {
return this.firstName + " " + this.lastName;
}
これだけ
単独で使用する場合、所有者はグローバルオブジェクトであるため、グローバルオブジェクトthis
を参照します。
ブラウザウィンドウでは、グローバルオブジェクトは[object Window]
次のとおりです。
例
let x = this;
厳密モードで は、単独で使用this
すると、グローバルオブジェクトも参照します
[object Window]
。
例
"use strict";
let x = this;
関数内のこれ(デフォルト)
JavaScript関数では、関数の所有者がのデフォルトのバインディングですthis
。
したがって、関数でthis
は、グローバルオブジェクトを参照します[object Window]
。
例
function myFunction() {
return this;
}
関数内のこれ(厳密)
JavaScriptの厳密モードでは、デフォルトのバインドは許可されていません。
したがって、関数で使用する場合、厳密モードでは、this
ですundefined
。
例
"use strict";
function myFunction() {
return this;
}
これはイベントハンドラーで
HTMLイベントハンドラーでthis
は、イベントを受信したHTML要素を参照します。
例
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
オブジェクトメソッドバインディング
これらの例でthis
は、personオブジェクトです(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は、この(person)オブジェクトのfirstNameプロパティを 意味します。
明示的な関数バインディング
およびメソッドは、事前定義されたJavaScriptメソッドですcall()
。apply()
これらは両方とも、引数として別のオブジェクトを使用してオブジェクトメソッドを呼び出すために使用できます。
call()
詳細については、apply()
このチュートリアルの後半で読むことができます。
以下の例では、person2を引数としてperson1.fullNameを呼び出すと、person1this
のメソッドであってもperson2を参照します。
例
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"