在回调中丢失 this 的上下文

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 的上下文吗？

奇怪的是this.test 在这两种情况下都能正确打印foo！

我也尝试过使用$.proxy 和var self = this 无济于事。

谢谢！

Answer 1

请注意，初始化回调正在将提到的变量更改为 this.$element.find('nav.controls') 并且构造函数也在更改此变量。

我会说构造函数或 init 回调在 initUI 之后运行，然后更改了 controlsHolder 的值。