Question

我刚开始摆弄JavaScript。来自Java和OO PHP的每一步都变得更加怪异：）

这是我对javascript的介绍项目，其中我已着手编写Settlers of Catan的多人游戏工作版本。下面的代码是尝试在数组中存储N个大小的六边形地图图块的立方体坐标。

我已经读过你通过将函数赋值给变量来声明javascript中的对象。

var Tile = function (x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
};

var Map = function () {
    var grid = [];

    function generate_map(radius) {
        for (width = -radius; width <= radius; width++) {
            var r1 = Math.max(-radius, -width - radius);
            var r2 = Math.min(radius, -width + radius);

            for (r = r1; r <= r2; r++) {
                grid.push(new Tile(width, r, -width - r));
            }
        }
    }
};

我已尝试实例化新的Map对象，调用其唯一的函数并在grid []数组中对结果值存储进行outprinting。但是对于每个循环都不好玩:(我得到了意想不到的标识符。

var main = function () {
    var basic_map = new Map();
    basic_map.generate_map(3);
    for each (var tile in basic_map.grid) {
        console.log(tile.x, tile.y, tile.z);
    }
};

main();

我充分意识到这是面部手掌错误之一，但是仍然会感激不尽，欢呼！

Answer 1

改变这个：

function generate_map(radius) {

......对此：

this.generate_map = function(radius) {

编辑：实际上比我最初实现的问题还多......：）

其他一些提示：

首先，我建议更改：

var Tile = function (x, y, z) {

......简单地说：

function Tile(x, y, z) {

（Map也一样）。您当前的解决方案工作正常，但它不是非常惯用，并且在ES6之前，规范中没有任何内容会导致var Tile = function导致生成的函数的'name'属性设置为“Tile”，这在它来调试。我最近写了another answer，它更深入地研究了例如function Foo() {}和var Foo = function() {}之间的差异。

第二个，您可能希望将Map重命名为其他内容。 Map现在是ES6的核心部分（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map）。

第三次，即使您可以使用generate_map创建this.generate_map函数，也可以将其移至Map's原型。此外，由于您需要公开grid值，因此您希望将其存储为属性，而不是作用于NewMapName构造函数的局部变量。。E.g，：

function NewMapName() {
    this.grid = [];
}

NewMapName.prototype.generateMap = function(radius) {
    // you can access the grid here via `this.grid`
    ...
};

通过将其移动到原型，这意味着NewMapName的所有实例将共享相同的函数引用，而不是一遍又一遍地创建它（尽管可能你真的只创建它一次无论哪种方式，它至少是惯用的。请注意，我在这里对“camelCasing”采取了一些自由（参见最后一点）。

第四次，您的generateMap实施正在泄漏一些全局变量（width和r，因为您没有使用var声明它们）。我会改变这个：

NewMapName.prototype.generateMap = function(radius) {
    for (var width = -radius; width <= radius; width++) {
        var r1 = Math.max(-radius, -width - radius);
        var r2 = Math.min(radius, -width + radius);

        for (var r = r1; r <= r2; r++) {
            grid.push(new Tile(width, r, -width - r));
        }
    }
};

第五，你的循环有点破碎。我会重构如下：

var main = function () {
    var basicMap = new NewMapName();
    basicMap.generateMap(3);

    basicMap.grid.forEach(function(tile) {
        console.log(tile.x, tile.y, tile.z);
    });
};

main();

最后，可能是最轻微的，就是在JavaScript-land中，camelCase远远超过snake_case，因此generate_map可能会“更好” “为generateMap。

获取JavaScript中的对象字段和调用对象函数

1 个答案: