2015-10-25

javascript:this

参考:
[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に退避する


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; で退避する。