最終更新:2022-12-16 (金) 02:21:27 (495d)
JavaScript/this
Top / JavaScript / this
コードのどこでも使える読み取り専用の変数
- 呼び出し元によって参照先のオブジェクトが変化する
https://jsprimer.net/basic/function-this/
メモ
- アロー関数以外の関数において、thisは定義した時ではなく実行した時に決定される
- そのため、関数にthisを含んでいる場合、その関数は意図した呼ばれ方がされないと間違った結果が発生する
https://efcl.info/2018/01/04/what-is-this/
概要
関数外 (トップレベルコード)
関数内
- 4つのパターン:
- 1:メソッド呼び出しパターン
- 2:関数呼び出しパターン3
- 3:コンストラクタ呼び出しパターン
- 4:apply,call呼び出しパターン
呼び出し方法 参照先オブジェクト 例 コンストラクタ呼び出し(new) 生成するオブジェクト (戻り値となるオブジェクト) this.hoge = 123; 関数の呼び出し (レシーバ不在) 非Strictモード?:グローバルオブジェクト
Strictモード:undefinedhoge(); メソッドの呼び出し (レシーバのある呼び出し方) レシーバオブジェクト(呼び出し元のオブジェクト) test.hoge(); JavaScript/イベントハンドラ イベントの呼び出し元のオブジェクト thisはdomの要素 applyもしくはcall呼び出し applyもしくはcallの引数で指定したオブジェクト obj1.hoge().call(obj2); それ以外 グローバルオブジェクト (forEach内など)
レシーバオブジェクト
- 呼び出し元のオブジェクトのこと
JavaScript/アロー関数
- 通常のthisは呼び出し元によって変わる
- アロー関数のthisは定義した場所が基準 (レキシカルスコープ)
- アロー関数ではbindを利用してもthisを変更することはできない
メモ
- forEachの中のthisはグローバルオブジェクトを参照する
- 列挙しているオブジェクトを参照したい場合は第2引数に指定する
解説
コンストラクタ
- this:生成されるオブジェクト
関数とメソッド
- レシーバ不在の関数 (JavaScript/function文)
- Strictモード:undefined
- 非Strictモード:グローバルオブジェクト
- JavaScript/メソッド
obj.method();
- レシーバオブジェクト(呼び出し元のオブジェクト)
- obj.method()でレシーバを取得するための使い方
JavaScript/アロー関数
- thisを変えずにコールバック関数を定義する方法 (ES2015)
- 呼び出し時に暗黙的なthisの値を受け取らない
- Arrow Function内にはthisが定義されていません。このときのthisは外側のスコープ（関数）のthisを参照します。
thisの差し替え
- 呼び出し元の関数のthisと引数を置き換えて呼び出すことができる
Function.prototype.call() 第1引数をthisの値としたいオブジェクト,それ以降は引数 Function.prototype.apply() 第2引数以降を配列として受け取る Function.prototype.bind() 呼び出されたときに新しい関数を作成して、値を操作 - jQuery.proxy
- これを使えば、関数がどこから呼び出されるかによって this の値が変わってしまうというややこしい問題を簡単に回避できます
アロー関数
- アロー関数 では、thisはレキシカルに設定されます。すなわち、 それを囲む実行コンテキストの this の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます
JavaScript/コールバック関数
- callback?()のように呼び出されレシーバオブジェクトがないのでthisはundefinedになる
- thisをselfに代入しておくと良い
- もしくはbindとか
メモ
- 関数のthisキーワード は、JavaScriptではほかの言語と少々異なる動作をします。また、Strictモードと非Strictモード?でも違いがあります。
jQuery
- $(this).html("aa")
- 選択されているカレントノード
