Почему это не признается функцией?

Question

У меня есть эта функция в моем объекте:

var time = { 

    warps : 3, 
    warpCounter : 50, 

    warp : function(){ 
     if (this.warps > 0){ 
      this.warps--; 
      this.warpLoop = 50; 
      this.warpLoop(); 
     } 
    }, 

    warpLoop : function(){ 
     setTimeout(function() { 
      this.increment();    
      if (warpCounter--){ 
      this.warpLoop(); 
      }else{ 
      if(this.warps > 0){ 
       htmlInteraction.enableButton('warp-button'); 
      } 
      } 
     }, 100); 
    }, 

}; 

Когда я пытаюсь вызвать его из другого метода (с помощью this.warpLoop()) я получаю:

Uncaught TypeError: Property 'warpLoop' of object #<Object> is not a function 

Почему это?

Answer 1

Оценка: this Значение в JavaScript не определено lexically. Он определяется тем, как функция была вызвана.

Типичное исправление заключается в том, чтобы сохранить значение this в переменной в охватывающей области, а затем ссылаться на нее во внутренней области.

var that = this; 

setTimeout(function() { 
    that.whatever() 
}, 1000) 

В то время как вы можете также связать внешний this значение обратного вызова с помощью Function.prototype.bind(), вы, кажется, есть .increment() метод, который не бросает ошибку. Поэтому привязка может нарушить это.

Answer 2

Этот контекст в setTimeout изменяется, вы можете использовать закрытие, чтобы сохранить этот контекст.

var test={ 
warpLoop : function(){ 
    var me=this;//set closure to get the right this context 
    setTimeout(function() { 
    console.log("this is:",this); // is window 
    console.log("me is:",me); // is test 
    // can call me.warpLoop() but not this.warpLoop() 
    }, 100); 
} 
} 
test.warpLoop(); 

ваш код может выглядеть следующим образом:

var time = { 

    warps : 3, 
    warpCounter : 3, 

    warp : function(){ 
     if (this.warps > 0){ 
      this.warps--; 
      this.warpLoop = 50; 
      this.warpLoop(); 
     } 
    }, 

    warpLoop : function(){ 
     //the setTimeout calls me.warpCounter not this.warpCounter 
     // wich is the same as window.warpCounter since the next 
     // line is not part of the setTimeout execution you can 
     // use this 
     console.log("warpLoop called,warpCounter is",this.warpCounter); 
     var me=this; 
     setTimeout(function() { 
      //me.increment();    
      if (me.warpCounter--){ 
      me.warpLoop(); 
      }else{ 
      if(me.warps > 0){ 
       //htmlInteraction.enableButton('warp-button'); 
      } 
      } 
     }, 100); 
    }, 

}; 
time.warpLoop();