在JavaScript中獲取對象字段並調用對象函數

Question

我剛剛開始擺弄JavaScript。 來自Java和OO PHP的每一步都變得越來越奇怪：)

這是我對javascript的介紹項目，在該項目中，我開始對Catan的Settlers的多人工作版本進行編程。 下面的代碼嘗試將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 []數組中的結果值。 但是對於每個循環來說，效果並不好:(我得到了意外的標識符。

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) {

（地圖也是如此）。 您當前的解決方案可以正常工作，但是不是很慣用，並且直到ES6規范中都沒有使var Tile = function導致結果函數的'name'屬性設置為“ Tile”的功能，進行調試。 我最近寫了另一個答案 ，進一步探討了function Foo() {}和var Foo = function() {}之間的區別。

其次 ，您可能想將Map重命名為其他名稱。 Map現在是ES6的核心部分（ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map ）。

第三 ，即使您可以使用this.generate_map創建generate_map函數，您也可能希望將其移至Map's原型。 另外，由於需要公開grid值，因此您希望將其存儲為屬性，而不是將范圍存儲為NewMapName構造函數的局部變量。 例如，：

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領域， camelCase比snake_case更具優勢，因此generate_map可能比generateMap更好。