Javascript继承最佳策略

实现类类型代码结构至少有两种不同且有用的策略。一个是原型继承，另一个是工厂风格继承。

原型继承

JavaScript的原型继承是经典而有效的。

// A viewable device.
function Device() {
  var _element = null,
  _type = 'div';
  // Get or set the element type.
  this.type = function type(type_) {
    if (!arguments.length)
      return _type;
    _type = type_;
    return this;
  };
  // Lazy creation of the element, or set it explicitly.
  this.element = function element(element_) {
     if (!arguments.length)
       return _element || (_element = $('<' + _type + '>').get(0));
     _element = element_;
     return this;
  };
  // Allow constructor chaining on subclasses.
  return this;
}
Device.prototype = Object.create(null);
Device.prototype.constructor = Device;
// Get/set. Hide or show this device.
Device.prototype.visible = function visible(show) {
  if (!arguments.length)
    return $(this.element()).css('display') !== 'none';
  $(this.element()).css('display', show ? '' : 'none');
  return this;
};
// Add or remove a css class, or check for its presence.
Device.prototype.classed = function classed(css_class, classed_) {
  if(arguments.length === 1)
    return $(this.element()).hasClass(css_class);
  if (classed_)
    $(this.element()).addClass(css_class);
  else
    $(this.element()).removeClass(css_class);
  return this;
};

虽然Device是一个基类，但它可以像这样实例化和配置:

// Create a list item device.
var ul = new Device()
  .type('ul')
  .classed('list-items', true)
  .visible(false);
// Check for the class.
ul.classed('list-items'); // => true
// Is the device visible?
ul.visible() // => false
// Show the device.
ul.visible(true);
ul.visible(); // => true

使list-items设备成为子类:

function ListItems() {
  Device.call(this)
    .classed('list-items', true)
    .visible(false);
  return this;
}
ListItems.prototype = Object.create(Device.prototype);
ListItems.prototype.constructor = ListItems;
ListItems.prototype.addItem = function addItem(content, css_class) {
  $(this.element()).append($('<li>')
    .addClass(css_class || 'list-item')
    .html(content));
  return this;
};

实例化子类:

var ul = new ListItems()
  .addItem('Item 1')
  .addItem('Item 2')
  .addItem('Item 3')
  .visible(true);
ul.element();
/*
<ul class="list-items">
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
</ul>
*/

工厂继承

工厂继承是优雅的，避免了new关键字的麻烦。

function device() {
  var self = {},
  _type = 'div',
  _element = null;
  self.type = function type(type_) {
    if (!arguments.length)
      return _type;
    _type = type_;
    return this;
  };
  self.element = function element(element_) {
     if (!arguments.length)
       return _element || (_element = $('<' + _type + '>').get(0));
     _element = element_;
     return this;
  };
  self.visible = function visible(show) {
    if (!arguments.length)
      return $(this.element()).css('display') !== 'none';
    $(this.element()).css('display', show ? '' : 'none');
    return this;
  };
  self.classed = function classed(css_class, classed_) {
    if(arguments.length === 1)
      return $(this.element()).hasClass(css_class);
    if (classed_)
      $(this.element()).addClass(css_class);
    else
      $(this.element()).removeClass(css_class);
      return this;
  };
  return self;
}

实例化一个设备:

var ul = device()
  .type('ul')
  .classed('list-items', true)
  .visible(false);

从device继承:

function listItems() {
  var _super = device()
    .type('ul')
    .classed('list-items', true)
    .visible(false),
  self = Object.create(_super);
  self.addItem = function addItem(content, css_class) {
    $(this.element()).append($('<li>')
      .addClass(css_class || 'list-item')
      .html(content);
    return this;
  };
  return self;
}

实例化listtitem:

var ul = listItems()
  .addItem('Item 1')
  .addItem('Item 2')
  .addItem('Item 3')
  .visible(true);
ul.element();
/*
<ul class="list-items">
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
</ul>
*/

使用哪种模式在很大程度上是一个偏好问题，尽管原型继承类在调试器中具有不同的标识，因此可能更适合调试和分析情况。

原型继承也适用于instanceof，所以这是另一个需要考虑的问题。一个instanceOf类型的机制可以通过一些努力添加到工厂继承中。

我在一个基于java脚本的项目中也有类似的需求。它是Java实现的JS移植，其中一个要求是代码结构和逻辑应该与Java一样相似。这是我想出来的。

免责声明:我对Java Script有点陌生。下面的解决方案是基于就我目前对语言的理解，我希望是这样在公认的指导方针和最佳实践范围内。

下面的代码演示了如何在JS中模仿Java中的"extends"关键字。

Function.prototype.extends = function (parent) {
  var child = this;
  child.prototype.inherit = function () {
   var parentProto = parent;
   var childProto = child;
   var parentObj =  new parentProto();
   childProto.prototype = parentObj;
   childProto.prototype.$super = parentObj;   
   var newObj;
   if(child.arguments.length >0) newObj = new childProto(child.arguments[0]);
   else  newObj = new childProto();
   /*Restore the inherit function back in type prototype so that subsequent
   creation of unique objects are possible*/
   if(typeof this == "function") childProto.prototype.inherit = this;
   return newObj;
  };
 } ;

下面是剩下的代码。

//Class A
var A = function(){
//some field
//some methods
}
//Class B
var B = function(){
//Check if inheritance needed
  if(this.inherit){
   var newInst = this.inherit.call(this.inherit);
   return newInst;
  }
//rest of class B specific code
}
//Here goes the inheritance statement like "Class B extends A"
B.extends(A);

到目前为止，这对我来说是有效的，只用于1级继承。