在回调中丢失此上下文

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的值。