Backbone.js继承Master View后初始化参数options为何未定义？

嘿，我来帮你拆解这个问题的核心原因，以及给出对应的修复方案！

核心问题：子视图模块返回的是实例而非构造函数 #

你看你的子视图代码最后一行是return new subView();——这就意味着，当MainView通过require引入mySubView的时候，拿到的不是可以用来创建实例的构造函数，而是一个已经提前实例化好的视图对象。

所以你在MainView里写new mySubView({'foo': 'bar'})的时候，本质上是在对一个已经实例化的对象执行new操作，这根本不会触发子视图的initialize方法，自然options就是undefined了。

而当你直接继承Backbone.View时，应该是无意中改了返回逻辑（返回构造函数而非实例），所以参数能正常传递。

次要问题：继承时的变量引用错误 #

另外，在MainView和子视图的events函数里，你写了coreView.prototype.events，但你引入的masterView变量是mView，这里会报coreView未定义的错误，虽然这不是options未定义的直接原因，但也得一起修复。

修复步骤 #

1. 修正子视图的返回值 #

把子视图模块最后一行改成返回构造函数，而不是提前实例化的对象。同时去掉不必要的mySubView依赖（子视图不需要引入自己），修正events里的变量引用：

define(['backbone','masterView'], function (Backbone, mView) {
  var subView = mView.extend({
    events: function () {
      // 把coreView改成mView，对应引入的变量名
      return _.extend({}, mView.prototype.events, { });
    },
    initialize: function (options) {
      console.log(options); // 现在就能正常拿到{foo: 'bar'}啦
    }
  });
  return subView; // 返回构造函数，而非实例
});

2. 修正MainView的引用错误 #

把MainView里的coreView.prototype.events改成mView.prototype.events，确保继承逻辑正确：

define(['backbone','masterView', 'mySubView'], function (Backbone, mView, mySubView) {
  var mainView = mView.extend({
    events: function () {
      return _.extend({}, mView.prototype.events, { }); // 修正变量引用
    },
    render: function () {
      var sub = new mySubView({'foo': 'bar'}); // 现在mySubView是构造函数，能正常传参
    }
  });
  return new mainView();
});

3. 额外检查 #

确保你已经正确引入了Underscore（_），因为用到了_.extend——如果模块里没引入，需要在define的依赖数组里加上'underscore'，并作为参数传入。

总结 #

问题的核心就是子视图错误地返回了实例，导致无法通过new传递初始化参数，改成返回构造函数就解决了这个问题，同时修复继承时的变量引用错误，整个逻辑就能正常运行啦！

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