こんにちはタクゾウです。
今回は、毎回忘れてしまう「this」の使い方4パターンに付いて復習したいと思います。
thisを使う方法は4種類ある
thisの使い方は下記4つです。
- メソッド呼び出しパターン
- 関数呼び出しパターン
- コンストラクタ呼び出しパターン
- apply,call呼び出しパターン
メソッド呼び出しパターン
一番直感的な記述。thisは、オブジェクト自身を表す。
JavaScript
var myObject = {
value: 10,
show: function(){
console.log(this.value);//結果10 myObject.valueと同じ意味
console.log(this);//結果 {value: 10, show: ƒ} myObjectと同じ意味
}
}
myObject.show();
関数呼び出しパターン
メソッド呼び出しパターンとの違いは、「.(ドット)」が付いているかいないかです。
JavaScript
myObject.show();//メソッド呼び出し
show();//関数呼び出し
関数呼び出しのthisはグローバルオブジェクトを指しています。
つまり、windowオブジェクトを指すことになります。
JavaScript
function show(){
console.log(this);//windowオブジェクトを示す。
this.value = 1;//window.value = 1と同じ意味
}
show();//関数呼び出しの場合のthisはグローバルオブジェクトをさす。
ややこしい場合の例
メソッドの中で、関数を呼び出した場合の、thisは、windowオブジェクトを参照する。
JavaScript
function show(){
var myObject = {
value: 1,
show: function(){
console.log(this.value);//1
console.log(this);//myObject
function myFunc(){
//thisは、windowオブジェクトを指す。
console.log(this.value);//underfined
console.log(this);//windowオブジェクトを見る
}
myFunc();
}
};
myObject.show();
MEMO
メソッドの中で関数呼び出しをした場合、メソッド呼び出しではく、関数呼び出しになる!コンストラクタ呼び出しパターン
コンストラクタ呼び出しのthisは、インスタンス自身を指す。
JavaScript
function MyObject(value){
this.myValue = value;//myObject.myValue ・ myObject2.myValueと同じ意味
this.myFunc = function(){//myObject.myFunc ・ myObject2.myFuncと同じ意味
this.myValue++;
};
}
var myObject = new MyObject(0);//インスタンス作成
console.log(myObject.myValue);//0
myObject.myFunc();
console.log(myObject.myValue);//1
var myObject2 = new MyObject(3);//インスタンス作成
console.log(myObject2.myValue);//3
myObject2.myFunc();
console.log(myObject2.myValue);//4
newをつけない場合は、インスタンスではなくただの関数呼び出しになるため、
グローバルオブジェクトを参照するのにきをつけてください。
JavaScript
var myObject = MyObject(0);//newがないので関数呼び出しになる、
console.log(window);
console.log(window.myValue);//windowオブジェクトに指定したmyValueを読みに行く
console.log(window.myFunc);//windowオブジェクトに指定したmyFuncを読みに行く
apply,call呼び出しバターン
apply,callはオブジェクトが作られた時に自動で作られるメソッド。
これを使うことによってthisを束縛することができる。
apply,callの機能はどちらも同じ。
JavaScript
var myObject = {
value: 1,
show: function(){
console.log(this.value);
}
};
var yourObject = {
value:3
};
myObject.show();//1 myObjectのthisを扱う。
myObject.show.apply(yourObject);//3 yourObjectオブジェクトのthisとして扱う。
myObject.show.call(yourObject);//3yourObjectオブジェクトのthisとして扱う。
まとめ
実際には4種類ではないのですが、
thisはこの4種類を理解してれば問題ないと思います。
コメントを残す