JavaScript：错误 - 变量已定义？为什么？答案

【问题标题】：JavaScript: Error - variable already defined? Why?JavaScript：错误 - 变量已定义？为什么？
【发布时间】：2011-05-09 03:35:25
【问题描述】：

我正在使用很棒的 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;
    }
}

【问题讨论】：

标签： javascript

【解决方案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”创建的，但初始化为您首先为其分配的值。

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

【讨论】：

【解决方案2】：

在函数顶部声明一次变量：

function fade(...) {
    var hexRed, hexGreen, hexBlue, color;
    ...

【讨论】：

其实这样不好... var hexRed 声明在函数作用域，其他的其实都是窗口级别声明
@Calgary：这不可能。 Crockford 的工具建议您为每个函数使用单个 var 语句，如果在窗口级别声明 hexGreen、hexBlue 和 color，那将是疯狂的。
@Jakob - 似乎是精神失常
@Calgary：JSLint 抱怨，因为变量在他的函数中定义了多次（不是窗口范围）。此外，JSLint 希望每个范围块有一个 var 语句。
@Calgary：只是为了确定：不要忘记, 运算符。 ;)

【解决方案3】：

输入var hexRed, hexGreen, hexBlue, color
作为函数的第一行，在 if
之前删除所有其他 var 声明

【讨论】：

【解决方案4】：

Javascript 作用域不像其他 c 风格的语言那样工作。只有几个可能的范围级别 - 全局、function、with，可能还有其他奇怪的一两个。 if 语句不会创建新范围。你正在做的是有效的

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

    var hexRed;
    var hexGreen;
    var hexBlue;  
    var color;
    var hexRed;
    var hexGreen;
    var hexBlue;  
    var color;


    if (currentStep < numSteps) {
         hexRed   = zeroPad(currentRed.toString(16), 2);
         hexGreen = zeroPad(currentGreen.toString(16), 2);
         hexBlue  = zeroPad(currentBlue.toString(16), 2);
         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) { 

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

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

这就是 jslint 抱怨的原因，尽管您的脚本应该仍然可以工作。无论语句存在于何处，将变量声明置于正确范围内的过程称为“提升”。

【讨论】：