Backbone扩展视图：如何扩展父方法且不覆盖原有逻辑添加自定义代码？

嘿，这个需求在Backbone开发里太常见了——想要给父视图的方法加新逻辑，但又不想丢掉原来的代码对吧？其实核心就是显式调用父类的方法实现，再在前后加上自己的代码，我给你一步步讲清楚：

核心原理 #

Backbone的extend方法会创建一个子类构造函数，子类的原型链指向父类原型。当你在子类里重写同名方法时，父类的方法并不会消失，你只需要通过父类原型去调用它，同时用call/apply把当前子类实例的this绑定进去，这样父类方法里的上下文（比如this.el、this.model）就能正确指向子类实例。

具体实现方式 #

方式一：直接调用父类原型方法（硬编码父类名） #

这是最直观的方式，适合你明确知道父类是谁的场景：

var SomeView = Backbone.View.extend({
  parentMethod: function() {
    // 父类原有逻辑
    console.log("执行父类的parentMethod逻辑");
    this.$el.addClass("parent-styled");
  }
});

var MyView = SomeView.extend({
  parentMethod: function() {
    // 第一步：调用父类的parentMethod，保留原有逻辑
    SomeView.prototype.parentMethod.call(this);
    
    // 第二步：添加你的自定义代码
    console.log("执行子类扩展的parentMethod逻辑");
    this.$el.append("<p>这是子类新增的内容</p>");
  }
});

这里的call(this)非常关键——它把父类方法里的this替换成当前的子类实例，确保父类方法里的所有操作都作用在子类视图上。

方式二：用__super__实现通用调用（无需硬编码父类名） #

如果你不想在子类里硬写父类的名称（比如父类可能会被重构），可以用Backbone自动生成的__super__属性，它指向父类的原型：

var MyView = SomeView.extend({
  parentMethod: function() {
    // 通用方式调用父类方法，适配父类名称变更的情况
    this.constructor.__super__.parentMethod.call(this);
    
    // 自定义逻辑
    this.$el.css("color", "red");
  }
});

this.constructor指向当前子类的构造函数（也就是MyView），它的__super__属性就是父类SomeView的原型，这样调用更灵活。

处理有返回值的父方法 #

如果父类方法有返回值，你可以先保存返回结果，再结合自己的逻辑处理：

var SomeView = Backbone.View.extend({
  parentMethod: function() {
    return { status: "parent-done", data: [1,2,3] };
  }
});

var MyView = SomeView.extend({
  parentMethod: function() {
    // 保存父类方法的返回值
    var parentResult = this.constructor.__super__.parentMethod.call(this);
    
    // 扩展返回结果
    parentResult.data.push(4,5);
    parentResult.subStatus = "child-extended";
    
    return parentResult;
  }
});

额外提示 #

• 调用顺序可以按需调整：如果你的逻辑需要先执行子类代码，再执行父类代码，把父类方法的调用放在子类代码后面就行。
• 对于initialize这类特殊方法，Backbone不会自动调用父类的initialize，所以也需要用同样的方式显式调用。

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