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将变量范围限定为它们所在的函数,而不是{和}之间的块.

例如:

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

您可以想到的是,所有变量实际上都是使用函数顶部的"var"创建的,但是初始化为您首先分配它的值.

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