javascript - jQuery JavaScript 子类化和属性

Question

我使用与此类似的 jQuery 代码实现了一个类（我称之为 RowsEditor）及其子类（我称之为 DateRowsEditor）：

function create_RowsEditor(tableId) {
  var rowsEditor = {
    tableId: tableId,
    quit_row: function(ctl) { /*...*/ }
  };
  $('#'+tableId).click(function(event) {
    var tr = event.delegateTarget;
    rowsEditor.quit_row(tr);
  });
  return rowsEditor;
}

function create_DateRowsEditor(tableId) {
  var rowsEditor = $.extend({}, create_RowsEditor(tableId), {
    quit_row: function(ctl) { /*...*/ }
  };
  return rowsEditor;
}

然后我创建一个 DateRowsEditor() 类型的对象：

var rowsEditor = create_DateRowsEditor('come'):

问题在于，在用户单击时，quit_row() 是使用 create_RowsEditor() 创建的对象调用的，而不是使用 create_DateRowsEditor() 创建的派生对象。

如何以结构化和面向对象的方式正确地做到这一点？

Answer 1

我通过添加 .init() 方法解决了这个问题：

var rowsEditor = {
  tableId: tableId,
  init: function() {
    var self = this;
    $('#'+tableId).handleRowsBlur(function(event) {
      var tr = event.delegateTarget;
      self.quit_row(tr);
    });
    return this;
  },
  ...

并创建这样的对象：

/*var rowsEditor =*/ create_ComeEditor('come').init();

这是解决我的问题的正确方法，因为只有在应该调用事件处理程序时才会调用这种方法初始化。

Answer 2

问题在于，在用户单击时，派生对象未调用 quit_row()

然后不要extend用于那个。只需创建对象，并覆盖其quit_row方法：

function create_DateRowsEditor(tableId) {
  var rowsEditor = create_RowsEditor(tableId);
  rowsEditor.quit_row = function(ctl) { /*...*/ };
  return rowsEditor;
}