Javascript：作用域和保留值

我有一段代码，它可视化了我正在开发的游戏的平铺集

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);
}

---

for（var i=0；i您可以通过从另一个函数返回函数并将
位置作为参数传递给顶级函数来保留
位置的值，如下所示

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

现在，外部函数保留参数
pos
中
position
的当前值，内部函数也可以使用该值。
您可以通过从另一个函数返回函数并将
position
作为参数传递给顶级函数来保留
position
的值像这样

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

现在，外部函数在参数
pos
中保留
position
的当前值，内部函数也可以使用该值。
这种类型的for循环没有自己的作用域块，因此onClick的闭包总是引用相同的位置变量。在位置d前面添加一个varoes不会创建位置变量的新实例（请参见变量）

您可以通过执行以下操作来创建范围块：

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

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

    for (var j = 0; j <= grid; j++) {
        (function(){
            var $tile = document.createElement('div'),
                position = {x:i,y:j};
            $tile.className = 'tile';
            $tile.onclick = function(){
                console.log(position);
                engine.popTile(position);
            }
            $row.appendChild($tile);
        }());
    }

    $holder.appendChild($row);
}

var$tile=document.createElement（'div'），
位置={x:i，y:j}；
for（var i=0；i这种类型的for循环没有自己的作用域块，因此onClick的闭包总是引用同一个位置变量。在位置前面添加var不会创建位置变量的新实例（请参见变量）

您可以通过执行以下操作来创建范围块：

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

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

    for (var j = 0; j <= grid; j++) {
        (function(){
            var $tile = document.createElement('div'),
                position = {x:i,y:j};
            $tile.className = 'tile';
            $tile.onclick = function(){
                console.log(position);
                engine.popTile(position);
            }
            $row.appendChild($tile);
        }());
    }

    $holder.appendChild($row);
}

var$tile=document.createElement（'div'），
位置={x:i，y:j}；
对于（var i=0；iAwesome！我唯一关心的是，由于这看起来有点复杂，这对系统是否会有任何影响？我的意思是，基本上，如果我有1024个tile，这意味着1024个函数。但现在我看到它们达到2048个，这让我有点沮丧：D
单击每个
$tile
对象都需要它自己的函数如果让他们共享相同的功能，那么你的程序就会变得有点复杂。我会说，这更好。太棒了！我唯一关心的是，因为这看起来有点复杂，这对系统是否会有任何影响？我的意思是，基本上，如果我有1024个tile，这意味着1024个函数。但现在我看到的是，它们达到了2048，这是一个非常简单的问题给我一点启发？：D
onclick
每个
$tile
对象都需要它自己的函数。如果你想让它们共享相同的函数，那么你的程序会变得有点复杂。我会说，这样更好。