キーワード this
は、バインドされているオブジェクトの値を参照します。
つまり、関数の値は、関数の呼び出し時に
関数をメソッドとして呼び出すか、スタンドアロン関数として呼び出すか、
コンストラクタ。
関数が呼び出されると、キーワード this
のインスタンスが作成され、
シーンをその関数を含むオブジェクトへの参照として指定し、
そのスコープ内で定義されているプロパティとメソッドへのアクセスが可能です。
this
の操作は、宣言された変数の操作といくつかの点で類似しています
const
に置き換えます。定数と同様に、this
は削除できず、その値も削除できません。
再割り当てされますが、this
キーワードによって指定されたオブジェクトのメソッドとプロパティは
変更できます。
グローバル バインディング
関数またはオブジェクトのコンテキストの外側で、this
は「
globalThis
プロパティ。これは、ほとんどのケースでグローバル オブジェクト
構築できます。ウェブブラウザで実行されるスクリプトのコンテキストでは、
グローバル オブジェクトは window
オブジェクトです。
this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}
Node.js では、globalThis
は global
オブジェクトです。
$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}
厳格モード外では、this
はスタンドアロン モード内のグローバル オブジェクトも参照します。
親 Window
は実質的に「所有」するオブジェクトであるため、
使用できます。
function myFunction() {
console.log( this );
}
myFunction();
> Window {...}
(function() {
console.log( this );
}());
> Window {...}
厳格モードを使用する場合、スタンドアロン内で this
の値は undefined
になります。
関数:
(function() {
"use strict";
console.log( this );
}());
> undefined
厳格モードを導入する前は、this
の null
値または undefined
値
グローバル オブジェクトへの参照に置き換えられます。場合によっては
「デフォルト バインディング」と呼ばれるグローバル バインディングこれは従来の動作によるものです
暗黙的バインディング
関数がオブジェクトのメソッドとして呼び出されると、オブジェクト内の this
の
そのメソッドは、メソッドを含むオブジェクトを参照し、
メソッドとプロパティが含まれています。
let myObject = {
myValue: "This is my string.",
myMethod() {
console.log( this.myValue );
}
};
myObject.myMethod();
> "This is my string."
this
の値は、関数とその関数がどのように
含まれるオブジェクトを定義します。代わりに、this
の値のコンテキストは次のようになります。
現在の実行コンテキスト。この場合の実行コンテキストは、
myObject
オブジェクトが myMethod
メソッドを呼び出しているため、myObject
が値です。
(this
)。前のセクションでは、これは専門的なことのように思えるかもしれません。
例ですが、this
のより高度な使用法では、
留意してください。
一般に、this
は、前後のコードで想定されない方法で使用します。
指定することもできます。このルールの例外は ES5 です。
アロー関数。
アロー関数内の this
アロー関数では、
this
は、
語彙を包含する環境。つまり
アロー関数の this
は、その関数の this
の値を参照します。
最も近いものを含むコンテキスト:
let myObject = {
myMethod() { console.log( this ); },
myArrowFunction: () => console.log( this ),
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
myObject.myArrowFunction();
> Window {...}
上記の例では、myObject.myMethod()
は myObject
をオブジェクトとしてログに記録します。
「所有」するそのメソッドですが、myObject.myArrowFunction()
は globalThis
を返します。
(または undefined
)。アロー関数内の this
のインスタンスは、
代わりに、最も高い範囲のスコープが参照されます。
次の例では、myEnclosingMethod
により、指定された値にアロー関数が作成されます。
実行時にそのオブジェクトが含まれるオブジェクトです。内部の this
のインスタンス
アロー関数が、エンクロージャー内の this
の値を参照するようになりました
これがアロー関数を含むメソッドです。これは、
myEnclosingMethod
内の this
の値が myObject
を参照している
アロー関数を定義します。アロー関数内の this
も参照します。
myObject
:
let myObject = {
myMethod() { console.log( this ); },
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
明示的バインディング
this
を使用するほとんどのユースケースは、暗黙的バインディングで処理されます。ただし、
特定の実行を表すために this
の値が必要になる場合があります。
コンテキストを使用します。説明用のものであり、若干古い方も
setTimeout
のコールバック関数内で this
を使用する場合、
このコールバックには固有の実行コンテキストがあるからです。
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
myObject.myMethod();
> "This is my string."
setTimeout( myObject.myMethod, 100 );
> undefined
setTimeout
のこの特定の欠点は、その後、
同様の「喪失」の問題this
についてはすでに対応済みです
スコープのスコープ内で this
の値への明示的な参照を作成することで、
コンテキストです。this
のインスタンスが割り当てられ、
従来の方法では that
、self
、_this
などの識別子を使用して変数に代入する
構築できます。これらは、変数の共通の識別子規則で、
this
の値を渡しました。
call()
、bind()
、apply()
メソッドを使用して関数を呼び出すと、
this
は、呼び出されているオブジェクトを明示的に参照します。
let myFunction = function() {
console.log( this.myValue );
}
let myObject = {
"myValue" : "This is my string."
};
myFunction.call( myObject );
> "This is my string."
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."
明示的バインディングは、暗黙的バインディングによって提供される this
値をオーバーライドします。
let myObject = {
"myValue" : "This string sits alongside myMethod.",
myMethod() {
console.log( this.myValue );
}
};
let myOtherObject = {
"myValue" : "This is a string in another object entirely.",
};
myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."
this
の値が次のように設定されるような方法で関数を呼び出した場合、
undefined
または null
。その値は strict 外の globalThis
に置き換えられます。
mode:
let myFunction = function() {
console.log( this );
}
myFunction.call( null );
> Window {...}
同様に、this
にプリミティブを与える方法で関数が呼び出された場合
その値は <start>指定された
プリミティブ値のラッパー オブジェクト
厳格モード外:
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> Number { 10 }
strict モードでは、渡された this
値はオブジェクトに強制変換されません。
プリミティブ値、null
、undefined
値であっても、次のように処理されます。
"use strict";
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> 10
myFunction.call( null );
> null
new
バインディング
class をコンストラクタとして使用する際に
new
キーワードの場合、this
は新しく作成されたインスタンスを参照します。
class MyClass {
myString;
constructor() {
this.myString = "My string.";
}
logThis() {
console.log( this );
}
}
const thisClass = new MyClass();
thisClass.logThis();
> Object { myString: "My string." }
同様に、new
を使用して呼び出されるコンストラクタ関数内の this
の値は、
作成されるオブジェクトを指す:
function MyFunction() {
this.myString = "My string.";
this.logThis = function() {
console.log( this );
}
}
const myObject = new MyFunction();
myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }
イベント ハンドラ バインディング
イベント ハンドラのコンテキストでは、this
の値は、
それを呼び出します。イベント ハンドラのコールバック関数内では、this
を意味します。
ハンドラに関連付けられた要素を参照します。
let button = document.querySelector( "button" );
button.addEventListener( "click", function( event ) { console.log( this ); } );
ユーザーが前のスニペットの button
を操作すると、結果は次のようになります。
<button>
自体を含む要素オブジェクト:
> Button {}
アロー関数をイベント リスナー コールバックとして使用する場合、
this
も、最も近い包含実行コンテキストによって提供されます。上部
つまり、イベント ハンドラ コールバック関数内の this
が
globalThis
(または、strict モードでは undefined
):
let button = document.querySelector( "button" );
button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined
他のオブジェクトと同様に、call()
、bind()
、apply()
を使用する場合は
メソッドを呼び出し、イベント リスナー this
のコールバック関数を参照できます。
オブジェクトを明示的に参照します。
let button = document.querySelector( "button" );
let myObject = {
"myValue" : true
};
function handleClick() {
console.log( this );
}
button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }
理解度をチェックする
ウェブブラウザで実行しているスクリプトの場合、グローバル オブジェクトは
this
が関数または
どうすればよいでしょうか。
window
オブジェクトundefined
オブジェクトbrowser
オブジェクト