js基礎之變數

代碼如下：

<style type="text/css">#myDiv { background: red;}</style>    <div id="myDiv" style="width:100px;height:100px;"></div> <script type="text/javascript">var myDiv=document.getElementById('myDiv');var CurrentStyle = function(){    return myDiv.currentStyle || document.defaultView.getComputedStyle(myDiv, null);}alert(CurrentStyle.width);</script>

前者能正確執行，即瀏覽器彈出100px；後者卻彈出undefined;

原因：不論是先定義函數後或是用函數直接返回樣式組（類數組），CurrentStyle變數始終是一個函數對象，在代碼二中它就是function(){ return……}。因此CurrentStyle.width顯然是錯誤的。可以用alert（CurrentStyle）驗證一下變數是樣式組還是函數。

驗證結果為：彈出

"function(){ return myDiv.currentStyle || document.defaultView.getComputedStyle(myDiv, null); }"
變數CurrentStyle為函數.

如果想讓代碼二輸出理想結果"100px",可以將alert(CurrentStyle.width)改為alert(CurrentStyle().width)。也就是說當變數為具體函數對象執行個體時，要在變數名後加"()"來表示其代表的完整的函數執行結果。可以理解為function(){}()。