jQuery的變量總是爲「未定義」

Question

我想是這樣的：

var usernameDone = false; 
/*Some application logic*/ 
alert(usernameDone); 

這是總爲undefined。但是，如果我將變量名稱從usernameDone更改爲其他任何內容，即使usrnameDone，該腳本也能正常工作。 usernameDone與jQuery有衝突嗎？如果不是，那麼爲什麼會發生？

（我測試在Chrome與jQuery-1.6.1和目前還沒有嘗試過其他瀏覽器。）

[更新]
變量的計算結果爲undefined即使應用程序邏輯被消除。

[更新-2的完整代碼]
我已標記使用//評論

$('document').ready(function() { 

/** 
* The following set manages the effects for the login menu. The effects including highlighting 
* the login box when focused, showing guidance through a pop-up menu and handling transformation 
* through fade effects. 
* 
*/ 
var usernameDone = false;  //Declared here 
/** 
* @function login-box focus() 
* Handles the onFocus() effects of the login box and displays the initial guidance pop-up box. 
* 
*/ 

$('#login-box').focus(function() { 

/** 
* Color change effect of the login box 
*/ 

    $(this).css('background-color' , '#000'); 
    $(this).css('color' , '#FFF'); 
    $(this).css('border' , '2px solid #000'); 

/** 
* Fade in effect of the login guide 
*/ 

    $('#login-guide').fadeIn(1200); 
    $('#login-guide-triangle').fadeIn(1200); 

}); 


/** 
* @function login-box focusout() 
* Handles the focusOut effects of the login box and hides the guidance pop-up box. 
* 
*/ 

$('#login-box').focusout(function() { 

/** 
* Color change effects of the login box 
*/ 

    $(this).css('background-color' , '#FFF'); 
    $(this).css('color' , '#000'); 
    $(this).css('border' , '3px solid #000'); 

/** 
* Fade out effect of the login guide 
*/ 

    $('#login-guide').fadeOut(1200); 
    $('#login-guide-triangle').fadeOut(1200); 
}); 

/** 
* @function login-box bind(keypress) 
* Handles the progression of the login steps. Specifically, what state the login box is in 
* (ie, username or password) and how to respond when the state change key ('return/enter key') 
* is pressed. 
* 
*/ 

$('#login-box').bind('keypress' , function(e) { 
/** 
* Checks for the current state (using usernameDone) if not, then registers the current username 
* changes the state to username done and converts the login box into password. Also, changes the 
* guidance contents. 
*/ 
    alert(usernameDone); //Always undefined (no modification before this) 
    if(e.keyCode == 13 && usernameDone == false) { //Owing to undefined it never evaluates to true. 
     var loginUsername = $(this).val(); 
     $(this).val(''); 
     var usernameDone = true; 
     $(this).fadeOut(0); 
     document.getElementById('login-box').setAttribute('type' , 'password'); 
     $('#login-guide-title').html('Password'); 
     $('#login-guide-info').html('Press enter to login'); 
     $(this).fadeIn(800); 
    } 
}); 

}); 

Answer 1

當然這將是undefined的使用，因爲你聽絃上一個ready事件'document'不在變量document上。不要將變量document用單引號或雙引號括起來，否則ready事件將永遠不會觸發，因此爲什麼您的變量永遠不會被定義。此外，不要重新聲明變量usernameDone與var usernameDone = true;，只需爲它分配一個值，如usernameDone = true;，因爲它已被定義。

Answer 2

在分配函數內部的值時刪除var，var使變量變爲私有。

Answer 3

問題就出在

var loginUsername = $(this).val(); 
    $(this).val(''); 
    var usernameDone = true; // <-- PROBLEM HERE 

您重新定義按鍵方法中的變量..所以這是不確定的..

刪除var部分

usernameDone = true; 

和你會很好..

demo http://jsfiddle.net/gaby/3CrZG/1/

Answer 4

您正在重新聲明最後一條if語句中的變量。由於第二個聲明發生在子作用域（函數）內部，但是在調用警報之後，JavaScript分析器正在等待要分配的新值，並且在此之前它未定義。

如果你刪除var，你會沒事的。

Answer 5

這裏需要解釋一下：

道格拉斯Crockford的recomends你聲明在你最近的範圍的頂部所有你的JavaScript變量，因爲這是當它解釋代碼JavaScript本身有什麼影響。

這是一個術語，稱爲「提升」。

這是一個完美的例子，可能由於不這樣做而導致混淆，爲什麼他的JSLint工具突出了這一點。

您最近的作用域是上面的函數。 JavaScript沒有'塊'範圍，if塊沒有定義任何本地範圍。

因此，在你的例子中，聲明有效地移動到函數的頂部，並在稍後（在你這樣做的地方）做出分手。這意味着該變量事實上在您檢查時未定義，因爲它重載了上面範圍中聲明的變量。

Answer 6

兩件事情：

1. usernameDone將 你<document>標籤時，可以定義完全 加載。在不存在這些 的情況下，您需要 $(document).ready()。
2. 你在哪裏試圖訪問usernameDone？在您的示例中我沒有看到alert函數，所以我只能假設您試圖在$(document).ready()之外訪問它。這是行不通的。如果您需要該功能，請在該功能塊的外部之外聲明var usernameDone。

下面的例子只是正常工作：

$(document).ready(function() { 
    var usernameDone = false; 
    alert(usernameDone); 
}); 

和

var usernameDone; 

function testMe() { 
    alert(usernameDone); 
} 

$(document).ready(function() { 
    usernameDone = false; 
    testMe(); 
});