Javascript:范围和保留值

Question

我有这段代码可以可视化我正在开发的游戏的图 block 集

for(var i = 0;i<=grid;i++){
    var $row = document.createElement('div');
    $row.className = 'row';

    for (var j = 0; j <= grid; j++) {
        var $tile = document.createElement('div'),
            position = {x:j,y:i};

        $tile.className = 'tile';
        $tile.onclick = function(){
            console.log(position);
            engine.popTile(position);
        }

        $row.appendChild($tile);
    }

    $holder.appendChild($row);
}

但我遇到了这个问题，在每个图 block 上的位置是 x:15,y:15。现在我假设那是因为我在循环完成它们的工作很久之后才触发 onclick 函数。我的问题是 - 如何在不将 onclick 函数添加到 DOM 的情况下保留它的位置数据？

我还尝试将 position 的声明移动到 onclick 函数中，但没有成功。

Answer 1

您可以通过从另一个函数返回函数并将 position 作为参数传递给顶级函数来保留 position 的值，如下所示

$tile.onclick = (function(pos) {
    return function() {}
        engine.popTile(pos);
    }
})(position);

现在，外部函数在参数 pos 中保留了 position 的当前值，并且该值也可用于内部函数。