同一Backbone视图中this可在多数函数识别但在updateModel中失效？

问题原因 #

你在loadData方法中把this.updateModel作为配置参数传入renderComponent时，仅传递了函数的引用，没有绑定该函数的执行上下文。当renderComponent内部调用updateModel时，函数的执行上下文已脱离当前Backbone视图实例，严格模式下this默认值为undefined，因此触发Cannot read property 'trigger' of undefined报错。

其余位置this可正常使用的原因：

• Backbone视图内置回调（如render、事件绑定的renderMain）会被框架自动绑定视图实例作为执行上下文
• renderMain中你主动使用_.bind(this.loadData, this)为loadData绑定了上下文，因此loadData内部的this指向正常

修复方案 #

你可以任选以下任意一种方案修复问题：

• 传递函数时手动绑定上下文
  修改loadData内的传参逻辑，给updateModel绑定当前视图实例作为上下文，逻辑和你处理setTimeout回调的方式一致：

loadData: function () {
    this.renderComponent(microPlane, {
        model: this.model, 
        updateModel: _.bind(this.updateModel, this) }, 
        '.modelLayout');
}

• 视图初始化时预绑定方法上下文
  在视图的initialize方法中使用_.bindAll批量固定方法的执行上下文，后续该方法无论以什么形式被调用，this都指向当前视图实例：

initialize: function() {
    // 把所有需要固定上下文的方法都加入参数列表
    _.bindAll(this, 'updateModel', 'loadData');
}

• 改用ES6箭头函数定义updateModel（环境支持ES6+时可用）
  箭头函数会继承定义位置的执行上下文，不会出现调用时上下文丢失的问题：

updateModel: () => {
    this.trigger('change', this.model);
}

内容的提问来源于stack exchange，提问作者SkyeBoniwell