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”创建的，但是初始化为您首先分配它的值。

要解决您的问题，只需在函数顶部声明变量即可明确说明，就像我在上面的第二个代码段中所做的那样。

Answer 2

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

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

Answer 3

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

Answer 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抱怨的原因，尽管你的脚本仍然有效。无论语句存在于何处，变量声明都放在正确范围内的过程称为“提升”。

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

4 个答案: