javascript继承。如何扩展一个类

Question

我正在做一个国际象棋游戏。我想做一个抽象的片断类，然后可以通过pawn/knight/rook/etc进行扩展。假设我的作品类如下所示：

"use strict";
function Piece(color) {
    this.color = color;
    this.type = "Abstract";
}
Piece.prototype.sayName = function sayName(){
    alert(this.type);
}
Piece.prototype.movePiece(oldPosition, newPosition){
};

我会这样实例化它：

var abstractPiece = new Piece("Black");

现在假设我想创建一个 Pawn 类，我想实例化如下。

var pawnOne = new Pawn("Black");

我希望 Pawn 具有相同的 sayName 函数，但我希望它具有不同的 movePiece 函数，因为 Pawn 有自己独特的移动方式。我将如何制作 Pawn，使其扩展 Piece，并覆盖 Piece 的 movePiece 函数？

Answer 1

我会稍微不同地定义一个片段以使其更具可扩展性。

var Piece = function(color) {
    return {
        color : color,
        type : "Abstract",
        sayName : function sayName(){
            alert(this.type);
        },
        movePiece : function(oldPosition, newPosition){
        }
    };
}

var Pawn = function(color) {
    var pawn = Piece("Black");
    pawn.movePiece = function(oldPosition, newPosition) { 
        // pawn move here 
    };
    return pawn;
}

然后您可以通过执行Piece("Black") 或Pawn("Black") 来创建棋子或棋子。

Answer 2

这是另一个解决方案，

作为另一种通用解决方案，我将一个函数附加到默认的 javascript 超级函数。然后它将应用于所有 javascript 实例。

Function.prototype.extend=function(superClass){
    for (var property in superClass.prototype){
        if(property!='extend' && property!='type' && !this.prototype[property]){
            this.prototype[property] = superClass.prototype[property];
        }
    }
}

在加载任何 javascript 之前，应首先应用上述代码。

那你就可以这样使用了。

//Super class constructor
function Collection(){
    this.type = 'Collection';   
}

//sub class
function HashSet(){
    this.type='HashSet';
    HashSet.extend(Collection);
}

Answer 3

为了补充 Matt 的答案，我还将通过简单地提供不同的名称来让每种特定类型调用 movePiece 的“基本”逻辑，如下所示：

var Pawn = function(color) {
    var pawn = Piece("Black");
    pawn.movePawn = function(oldPosition, newPosition) { 
        // special pawn-specific logic for moving here
        // now call 'base' logic to actually move piece to the new position
        pawn.prototype.movePiece(oldPosition, newPosition);
    };
    return pawn;
}

这将允许所有棋子共享相同的逻辑以实际移动到板上的新位置，但也允许根据棋子的类型自定义逻辑。

Answer 4

当您在 Coffeescript 中扩展类时，编译器生成的代码将一个 JS 类“扩展”到另一个。我得到了这个：

var Animal, Dog, _ref,
  __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) {
     // This function takes a child class and extends it with all
     // attributes that are included in the parent class.
     for (var key in parent) {
         // Need to check that this property was actually a key of the parent.
         // The Coffeescript compiler was defensive here against changes to
         // the hasOwnProperty function, but you can probably get by with
         // parent.hasOwnProperty(key).
         if (__hasProp.call(parent, key))
             child[key] = parent[key];
     }
     function ctor() {
         this.constructor = child;
     }
     // Set the default constructor of the child based on the parents.
     ctor.prototype = parent.prototype;
     child.prototype = new ctor();
     // Make it possible to call the __super__ easily.
     child.__super__ = parent.prototype;
     return child;
 };

Animal = (function() {
  function Animal() {}

  // To add methods to this class, you would do this:
  //   Animal.prototype.foo = function() {...}

  return Animal;

})();

Dog = (function(_super) {
  __extends(Dog, _super);

  function Dog() {
    _ref = Dog.__super__.constructor.apply(this, arguments);
    // This is where you would extend the constructor to add
    // functionality to the subclass.
    return _ref;
  }

  // To add methods to this subclass, or to override base class
  // methods, you would do this:
  //   Dog.prototype.bar = function() {...}

  return Dog;

})(Animal);

通过输入

class Animal

class Dog extends Animal

在http://coffeescript.org/ 处进入编译器，然后对结果进行注释。