今天在rainweb的博客上,看到了這篇非常好的文章,覺得非常有必要分享出來,相信大家認真讀完這篇文章,對js作用域的理解又會上升到一個新的臺階。
前言:javascript里變量作用域是個經常讓人頭痛抓狂的問題,下面通過10++個題目,對經常遇到又容易出錯的情況進行了簡單總結,代碼樣例很短很簡單
題目一
代碼如下:
var name = 'casper'; alert(name); //毫無疑問地輸出:casper
題目二
代碼如下:
alert(name); //報錯:對象未定義,即使用一個壓根就不存在的變量,所以出錯
age = 24; //這里木有錯,但age不是為定義嗎?翻下犀牛書,明白了 //給一個未定義的變量賦值,會創建一個全局變量,相當于:var age = 24
題目三
代碼如下:
alert(name); //name下面才定義,這里肯定報錯了吧?錯!這里彈出:undefined
var name = 'casper';
解釋:javascript代碼在解析的時候,都會搜索下var聲明的變量,并將其聲明提前,實際的過程如下:
代碼如下:
var name; //光聲明name變量,但未賦值,所以為此時為:undefined
alert(name); name = 'casper';
題目四
代碼如下:
var name = 'casper';
function show(){
alert(name);
name = 'hello'; //全局變量name的值改為'hello'
}
show(); //輸出:casper
題目五
代碼如下:
var name = 'casper';
function show(){ alert(name); //輸出:undefined,是不是有想死的心
var name = 'hello'; //注意:與題目四相比,此處name前多了個var,
} show();
解釋:在函數show中,name是個局部變量,題目三的原理同樣適用于此,即函數show內部實際為
(小知識點補充:當函數內部存在與外部全局變量同名的局部變量,優先使用局部變量,此處為name)
function show(){ var name; alert(name); name = 'hello'; }
題目六
代碼如下:
var list = [1,2,3];
function show(){ if(typeof list === 'undefined')
{ list = []; }
alert(list.length);
};
show(); //結果:3,是不是一目了然= =,稍等,請接著看第七題
題目七
代碼如下:
var list = [1,2,3];
function show(){
if(typeof list === 'undefined')
{ var list = []; //請注意,與題目六相比,這里多了個var
} alert(list.length); };
show(); //結果:0,是不是突然有了想死的沖動
解釋:javascript沒有塊級作用域(即由{}限定的作用域),函數中聲明的所有變量,無論在哪里聲明,在整個函數中都是有定義的,這點跟C++等灰常不同,趕緊扭轉思想與時俱進
于是,再來看下show方法實際的內部解析邏輯
代碼如下:
function show(){ var list; //list為局部變量,且此處尚未賦值
if(typeof list === 'undefined'){
list = []; }
alert(list.length); };
題目八
新聞熱點
疑難解答
圖片精選