Javascript变量范围问题

Question

我无法解决我的 javascript 的范围问题。我有一个从 JSON 定义的数组 dog[]，我需要从嵌套函数内部访问它。

function blah(json) {
 for (var u = 0; u < json[0][1][u].length; u ++ ) {
    var dog = 'k' + json[0][1][u].doggies;
    console.log(dog); // prints array of doggie strings
    $('#puppy').click(function(dog) {    // dog is passed in the function
       console.log(dog); // Syntax error, unrecognized expression: #[object Object]
       $('#' + dog).css('display, 'none');
     });
   }
 }

当我不将 dog 传递给点击函数时:我得到:

 $('#puppy').click(function() {
  console.log(dog) // (12)  main.js:122k4c812e3a7275e10331000000 - this is the last value in the array - from safari console
  $('#' dog).css('display', 'none);
   }

有没有人有任何建议来获取传递给点击函数的每个元素的数组？还是我错误地调用了 css 方法来隐藏那些 div？

Answer 1

问题1

闭包绑定(bind)整个函数的作用域，而不是单个变量或值。

以这段代码为例:

function foo() {
    var i, func;

    for (i = 0; i < 10; ++i) {
        if (i == 0) {
            func = function () {
                alert(i);
            }
        }
    }

    func();
}

foo();

您可能希望 foo 引起 0 被警告。但是，i 的值在分配给 func 的函数创建后发生了变化；调用 func 提示“10”。

这是说明这个概念的另一个例子:

function foo() {
    var i = 42;

    function func() {
        alert(i);
    }

    for (i = 0; i < 10; ++i) {
        // do nothing
    }

    func();
}

foo();

试着弄清楚什么会被提醒，然后运行代码作为测试。

问题2

第二个问题是变量绑定(bind)在函数作用域(而不是你期望的 block 作用域)。

拿这段代码:

function foo() {
    var i;

    for (i = 0; i < 10; ++i) {
        var j = i;
    }

    alert(j);
}

foo();

您可能希望此代码警告“未定义”、抛出运行时错误，甚至抛出语法错误。然而，“10”被警告。为什么？在 JavaScript 中，上面的代码被有效地翻译成:

function foo() {
    var i;

    var j;

    for (i = 0; i < 10; ++i) {
        j = i;
    }

    alert(j);
}

foo();

从这个例子中应该更清楚“10”确实被提醒了。

解决方案

那么你如何解决你的问题呢？最简单的方法是更改​​您的逻辑:不是为每只狗附加一个事件处理程序，而是为每一组狗攻击一个事件处理程序。例如:

function blah(json) {
    $('#puppy').click(function () {
        var u, dog;

        for (u = 0; u < json[0][1][u].length; u++) {
            dog = 'k' + json[0][1][u].doggies;

            console.log(dog);

            $('#' + dog).css('display', 'none');
        }
    });
}

如果您对现有代码的“适当”转换感兴趣(即具有相同的行为，但错误已修复)，我也可以给您举一个例子。但是，我上面给出的解决方案是一个更好的解决方案，并且代码更清晰。