JavaScript:错误 - 变量已经定义？为什么？

Question

我正在使用很棒的 JSLint 工具来确保我的 JavaScript 是“严格的”。

但是，当我使用它时，出现以下错误:

'hexRed', 'hexGreen', 'hexBlue', 'color' are already defined (referring to the "else if" clause)

我的代码如下。有什么想法可以修复我的代码以使其 JavaScript 变得“严格”吗？

function fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue) {

    if (currentStep < numSteps) {
        var hexRed   = zeroPad(currentRed.toString(16), 2);
        var hexGreen = zeroPad(currentGreen.toString(16), 2);
        var hexBlue  = zeroPad(currentBlue.toString(16), 2);
        var color = "#" + hexRed + hexGreen + hexBlue;

        document.getElementById('abc').style.backgroundColor = color;

        currentRed   += deltaRed;
        currentGreen += deltaGreen;
        currentBlue  += deltaBlue;

        timerID = setTimeout("fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue)", 70); 

    } else if (currentStep == numSteps) { 

        var hexRed   = endingRed.toString(16);  // <-- JSLint flags this line
        var hexGreen = endingGreen.toString(16);  // <-- JSLint flags this line
        var hexBlue  = endingBlue.toString(16);  // <-- JSLint flags this line
        var color = "#" + hexRed + hexGreen + hexBlue;  // <-- JSLint flags this line

        document.getElementById('abc').style.background = color;
    }
}

Answer 1

JavaScript 将变量范围限定在它们所在的函数内，而不是在 { 和 } 之间的 block 内。

例如:

function test(){
   var i=0;
   if (i > 5) {
      var x = i + 1;
      alert(x);
   }
}

实际意思是:

function test(){
   var i, x;
   i = 0;
   if (i > 5) {
      x = i + 1;
      alert(x);
   }
}

您可以将 is 视为实际上是在函数顶部使用“var”创建的所有变量，但初始化为您首先为其分配的值。

要解决您的问题，只需通过在函数顶部声明变量来明确这一点，就像我在上面的第二个代码片段中所做的那样。