[1] JavaScriptの「this」は「4種類」??
[2] jQuery入門 > thisについて
1:メソッド呼び出しパターン[1]
var myObject = {
value: 10,
show: function() {
alert(this.value); // 10 (thisはmyObject)
}
}
myObject.show();
thisはmyObject。
2:関数呼び出しパターン[1]
var myObject = {
value: 10,
show: function() {
alert(this.value); // 10 (thisはmyObject)
show_this();
function show_this() {
alert(this.value); // undefined (thisはグローバルオブジェクト)
}
var self = this; // myObjectを使いたい場合はthisをselfに退避する
show_self();
function show_self() {
alert(self.value); // 10 (selfはmyObject)
}
}
};
myObject.show();
thisはグローバルオブジェクト
myObjectを使いたい場合はthisをselfに退避する
myObjectを使いたい場合はthisをselfに退避する
3:コンストラクタ呼び出しパターン[1]
var MyObject = function(value){
this.value = value;
this.show = function() {
alert(this.value); // 10 (thisは生成されたインスタンスmyObject)
};
}
var myObject = new MyObject(10);
myObject.show();
thisは生成されたインスタンスmyObject
4:apply,call呼び出しパターン[1]
省略
5:jquery呼び出しパターン[2]
var MyObject = function(value){
this.value = value;
this.show = function() {
alert(this.value); // 10 (thisは生成されたインスタンスmyObject)
};
var self = this; // myObjectを使いたい場合はthisをselfに退避する
$("#target").click(function(){
alert(this.id); // target (thisはイベントが発生したDOM要素)
alert($(this).text()); // click me (DOM要素をjQueryオブジェクトに変換している)
alert(this.value); // undefined (thisはイベントが発生したDOM要素)
alert(self.value); // 10 (selfはmyObject)
});
}
var myObject = new MyObject(10);
jqueryでは、
イベントで設定したfunction内で、thisはイベントが発生したDOM要素を指す。
元のthisを保持するために、var self = this; で退避する。