jQuery JavaScript 子类化和属性答案

【问题标题】：jQuery JavaScript subclassing and propertiesjQuery JavaScript 子类化和属性
【发布时间】：2013-07-01 18:22:56
【问题描述】：

我用类似这样的 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() 创建的派生对象。

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

【问题讨论】：

标签： javascript jquery oop inheritance

【解决方案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();

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

【讨论】：

【解决方案2】：

问题在于，在用户点击时，quit_row() 没有被派生对象调用

那么不要使用extend。只需创建对象，并覆盖其quit_row 方法：

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

【讨论】：