Потеря контекста этого в функции обратного вызова

Question

Вот выдержка из моего кода:

'use strict' 
var VocabApp = function (element, options) { 
    this.options   = 
    this.$element   = null 
    ... 
    this.controlsHolder  = 
    this.test    = 
    this.init(element, options) 
} 
VocabApp.prototype.init = function (element, options) { 
     this.$element   = $(element) 
     this.options   = this.getOptions(options) 
     this.controlsHolder  = this.$element.find('nav.controls') 
     this.test    = 'foo' 
... 
} 
VocabApp.prototype.initUI = function() { 
    console.log(this.controlsHolder) 
    console.log(this.test) 
    this.$element.find('.levels').on('click', ".level", _.bind(function (e)   { 
      console.log(this.controlsHolder) 
      console.log(this.test) 
    }, this)) 
} 

Почему console.log первый распечатывают правильный элемент, а затем внутри функции обратного вызова печатает undefined? Должна ли _.bind сохранить контекст этого?

Странная деталь: this.test правильно печатает foo в обоих случаях!

Я также пробовал использовать $.proxy и var self = this безрезультатно.

Спасибо!

Answer 1

Обратите внимание, что обратный вызов init меняет указанную переменную. $ Element.find ('nav.controls'), и конструктор также меняет эту переменную.

Я бы сказал, что либо конструктор, либо обратный вызов init запускают после initUI, изменяя тогда значение controlsHolder.