■ 概要
JavaScriptのthisについてまとめます
thisにも色々あるみたいなので違いについて調べます
JavaScript勉強シリーズ
- JavaScriptのthisについてメモ
- JavaScriptのコンストラクタについて
- JavaScriptのwindowについてのメモ
- JavaScriptのプロトタイプ継承について
- JavaScriptのプロトタイプチェーンについてメモ
- JavaScriptのスコープについてメモ
- JavaScriptの論理演算による存在チェックについて
- JavaScriptのクロージャについてメモ
- JavaScriptのグローバル変数の衝突について
■ thisの種類
JavaScriptのthis参照はオブジェクトを参照する場所によって参照先が異なる
- トップレベルコード (関数外)
- 関数内
また関数内でもその関数の呼び出し方法で参照先オブジェクトが変わる
| 関数の呼び出し方法 | this参照の参照先オブジェクト |
| コンストラクタ呼び出し | 生成したオブジェクト |
| メソッド呼び出し | レシーバオブジェクト ※1 |
| applyあるいはcall呼び出し | applyまたはcallの引数で指定したオブジェクト |
| それ以外の呼び出し | グローバルオブジェクト |
※1 レシーバオブジェクトとは
オブジェクトのメソッドを呼んだ時に、演算子の左辺に指定したオブジェクト
コンストラクタ呼び出しにおけるthis
コンストラクタ呼び出し時のthis参照はコンストラクタが生成するオブジェクトを参照する
// 定義
function TestClass(x) {
this.x = x;
}
// コンストラクタ呼び出し
var obj = new TestClass(3);
print(obj.x); // 3
newをつけてインスタンスを生成する
thisには生成されたインスタンス自身(TestClass)が入っている
コンストラクタ呼び出し時には、何も持たないオブジェクトを作成して、コンストラクタ内のthis参照からそのオブジェクトが参照される
最終的にnewを結果としてオブジェクトの参照が返る
メソッド呼び出し
メソッドとはオブジェクトのプロパティが参照する関数
// オブジェクト定義
var myObj = {
x: 3,
show: function() {
print(this.x);
}
}
// メソッド呼び出し
myObj.test(); // 3
オブジェクトmyObjがレシーバオブジェクトでshowがメソッド
thisにはmyObjが入っている
apply,call呼び出しにおけるthis
これらを使うと呼び出した関数内のthis参照を指定した任意のオブジェクト参照にできる
つまりレシーバオブジェクトを明示的に指定できると見なせる
var myObj = {
x: 3
show: function() {
print(this.x);
}
};
var hogeObj = {
x: 7
}
myObj.show(); // 3
myObj.show.apply(hogeObj); // 7
myObj.show.call(hogeObj); // 7
ちなみにapplyとcallの違いは2番目以降の引数が
「連続した引数のリスト」か引数の配列を1つだけ受け取るか違いみたい
http://www.sirochro.com/note/js-call-apply-difference/
参考
- javascriptの「this」は「4種類」？？
- パーフェクトJavaScript (書籍)
コメントを書く
コメント一覧