子类的子类？

Question

我一直在写一个游戏引擎，我想重新组织我的代码，使它更加模块化。目前，我有一个名为Isometric的主要函数，它接受画布绘制。

var iso = new Isometric('canvas');

到目前一切尚好。接下来，我让.newMap()创建一个新的地图。

var map = iso.newMap(10,1,10); // Creates 10x1x10 map

但是，我想改变这一点，因为可能与.map属性有一些混淆(因为它返回一个名为map的数组)。

我希望语法看起来像这样：

iso.Map.create(10,1,10);

所以我尝试了这样的方法：

function Isometric(id) {
    this.Map = function() {
        this.create = function() {
        }
    }
}

但是当我去访问它的时候，我意识到this的第二层仍然是指同样的第一层。所以，我不能创建Map对象的子类。

我看过几种不同的方法，但没有一个有明确的例子，我无法让它们发挥作用。

其中，我知道您可以使用prototype和Object.create()，但我并没有取得多大的成功。

我该怎么做？

我的另一个解决方案是这样做：

function Isometric('id') {
    this.Map = {
        'create': function() { },
        'load': function() {}
    }
}

然后访问它

iso.Map['create'];

但我一点也不喜欢这样。有什么干净的方法吗？

我主要感兴趣的是第三层方法..create()在.map中的例子。如果你能向我提供与我尚未找到的问题有关的文件，那就太好了。但就连mozilla的医生似乎也帮不上忙。

Answer 1

我认为合适的方法是在等距构造函数下命名Map构造函数。这是你怎么做的。

function Isometric(id) {
  this.id = id;
}

Isometric.prototype = {
  constructor: Isometric,

  test: function() {
    return "I'm an instance of Isometric.";
  }
};

在这里，我们执行命名空间，并向Map构造函数中添加一个create()助手方法来创建它的实例。

Isometric.Map = function Map(x, y, z) {
  this.x = x;
  this.y = y;
  this.z = z;
}

Isometric.Map.prototype = {
  constructor: Isometric.Map,

  test: function() {
    return "I'm an instance of Isometric.Map.";
  }
};

// Helper method to create `Map` instances
Isometric.Map.create = function create(x, y, z) {
  return new Isometric.Map(x, y, z);
};

使用

var iso = new Isometric('id123');
var map = new Isometric.Map(0, 7, 99);
var map2 = Isometric.Map.create(1, 2, 3);

iso.test(); //=> "I'm an instance of Isometric."
map.test(); //=> "I'm an instance of Isometric.Map."
map2.test(); //=> "I'm an instance of Isometric.Map."

命名空间

需要注意的是，我们刚才使用的名称空间可以防止与ES6 (新的JS版本)中的新ES6类发生冲突--这里有更多关于ES6地图的信息：Objects/Map。

尽管如此，在一个主对象(您可以称之为app)下命名您的代码，并且只使该名称空间全局可用是非常重要的。

在您的例子中，您可以执行如下示例：

;(function(win) {
  // Isometric
  function Isometric(id) {
    this.id = id;
  }

  Isometric.prototype = {
    constructor: Isometric,

    test: function() {
      return "I'm an instance of Isometric.";
    }
  };


  // Map
  function Map(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  Map.prototype = {
    constructor: Map,

    test: function() {
      return "I'm an instance of Isometric.Map.";
    }
  };

  // Helper method to create `Map` instances
  Map.create = function create(x, y, z) {
    return new Map(x, y, z);
  };


  // Namespace Map under Isometric
  Isometric.Map = Map;


  // Expose globally
  // --------------------
  win.app = {
    Isometric: Isometric
  };
}(this));

示例：

var nativeMap = new Map();
nativeMap.set('name', 'joe'); //=> {"name" => "joe"}

var myMap = new app.Isometric.Map(33, 7, 99);
myMap.test(); //=> "I'm an instance of Isometric.Map."

// Native map wasn't affected (good)
nativeMap.test(); //=> TypeError: undefined is not a function

Answer 2

我将留下另一个被接受的答案，因为它更详细，甚至告诉我我的代码可能会被废弃。

话虽如此，我想重新迭代费利克斯·金的解决方案。我将找到一种将这两种想法结合起来的方法(使用名称空间和Felixs)，但部分解决方案是这样的。

function Isometric(id) {
    this.Map = function() {
        this.create = function() {
            return 5;
        };
    };
}

我就是这么安排的。5只是一个任意的值。

 var iso = new Isometric(); // New instance of Isometric()
 var mapping = new iso.Map(); // Access to Iso's mapping functions
 var map = mapping.create(); // Should return a map array 

 console.log(map); // Prints 5

如果您想了解我是如何实现它的，那么请参阅我的Github项目：https://github.com/joshlalonde/IsometricJS。

我会在这个周末的某个时候玩代码。

再次感谢大家的帮助！祝任何想做类似事情的人好运。