2021年12月24日 JavaScript (JS Primer) 関数とthis
基本的にはメソッドの中で利用しますが、thisは読み取り専用のグローバル変数のようなものでどこにでも書けます。
thisの参照先は主に次の条件によって変化します。
- 実行コンテキストにおけるthis
- コンストラクタにおけるthis
- 関数とメソッドにおけるthis
- Arrow Functionにおけるthis
thisが実際に使われるのはメソッドにおいてです。
thisはトップレベルのスコープに書かれたグローバルオブジェクトを参照します。
実行コンテキストがscriptの場合はthisが指すのはwindowになります。 実行コンテキストがmoduleの場合はthisが指すのはundefinedになります。
- Windowオブジェクトとは、JavaScriptのオブジェクト階層最上位に位置するオブジェクトで、すべてのオブジェクトの親となります。
| 実行コンテキスト | thisが指す対象 |
|---|---|
| script | window |
| module | undefined |
moduleで単純にグローバルオブジェクトを参照したい場合は、thisではなくglobalThisを使います。
// ブラウザでは`window`オブジェクト、Node.jsでは`global`オブジェクトを参照する
console.log(globalThis);
関数とメソッド
JavaScriptではオブジェクトのプロパティが関数である場合にそれをメソッドと呼びます。
const obj = { method1: function() { }, method2: () => { } };
- オブジェクトのプロパティはキーとバリューの組み合わせです。
短縮記法でこのように書けます。
const obj = { // メソッドの短縮記法で定義したメソッド method() { } }; };
メソッドの呼び出し方はこのようになります。
const obj = { // メソッドの定義 method() { } }; // メソッド呼び出し obj.method();
メソッドを短縮記法書いた場合はそれは関数には部類されず"メソッド"とされます。 thisは、アロー関数の場合にのみthisの挙動が異なるようです。
Arrow Function以外の関数におけるthis
- Arrow Function以外の関数（メソッドも含む）におけるthisの値は実行時に暗黙的に渡される引数のようなものです。
- 値自体は実行時に決まります。
- 関数におけるthisの参照先はベースオブジェクトとなります。
- ベースオブジェクトとは「メソッドを呼ぶ際に、そのメソッドのドット演算子またはブラケット演算子のひとつ左にあるオブジェクト」のことを言います。
- ベースオブジェクトがない場合のthisはundefinedとなります。
// 疑似的な`this`の値の仕組み // 関数は引数として暗黙的に`this`の値を受け取るイメージ function fn(暗黙的に渡されるthisの値, 仮引数) { console.log(this); // => 暗黙的に渡されるthisの値 } // 暗黙的に`this`の値を引数として渡しているイメージ fn(暗黙的に渡すthisの値, 引数);
function宣言ではベースオブジェクトがないためthisはundefinedになります。
Arrow Function以外の関数では、関数の定義だけを見てthisの値が何かということは決定できない点に注意が必要です。
