javascript變數範圍一點總結

文章目錄

• 題目一
•  
• 題目二
• 題目三
• 題目四
•  
• 題目五
• 題目六
• 題目七
• 題目八
• 題目九
• 題目十
•  

前言：javascript裡變數範圍是個經常讓人頭痛抓狂的問題，下面通過10++個題目，對經常遇到又容易出錯的情況進行了簡單總結，代碼範例很短很簡單

題目一

var name = 'casper';alert(name);  //毫無疑問地輸出：casper

 題目二

alert(name);  //報錯：對象未定義，即使用一個壓根就不存在的變數，所以出錯age = 24;  //這裡木有錯，但age不是為定義嗎？翻下犀牛書，明白了           //給一個未定義的變數賦值，會建立一個全域變數，相當於：var age = 24

題目三

alert(name);  //name下面才定義，這裡肯定報錯了吧？錯！這裡彈出：undefinedvar name = 'casper';

解釋：javascript代碼在解析的時候，都會搜尋下var聲明的變數，並將其聲明提前，實際的過程如下：

var name;  //光聲明name變數，但未賦值，所以為此時為：undefinedalert(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);};

 

題目八

alert(typeof show);  //結果：function，請相信你的眼睛，你沒有看錯function show(){}

解釋：javascript代碼解析的過程，類似 function show() 這種形式聲明的函數，跟var聲明的變數一樣，都會被提到最前面，不同的是，函式宣告跟定義同時完成，但var聲明的變數的賦值在後面才會完成

 

題目九

alert(typeof show);  //結果：undefined，請再次擦亮你的眼睛，你的確沒有看錯var show = function(){};

解釋：採用函數定義式以及函數運算式定義函數，兩者過程之間存在一些區別

函數定義式：function show(){}

函數運算式：var show = function(){}

採用函數定義式聲明的方法，函數的定義會提前；而採用函數運算式聲明的方法，函數的定義，跟採用var聲明的局部變數一樣，函式宣告會提前，但函數定義位置不變，過程如下：

var show;alert(typeof show);show = function(){};

 

題目十

var data = {name:'casper'};function data(){    alert('casper');}data();  //TypeError: object is not a function

是不是有砸顯示器的衝動。。。data此時其實為{name:'casper'}，把一個object當函數調用，於是報錯了

前面說過，函式宣告（通過函數定義式）、var聲明的變數會被提前，但是會有先後順序之分，如下：

function data(){    alert('casper');}var data;data = {name:'casper'};data();

略微修改下，結果就不同鳥：

var data = {name:'casper'};var data = function (){  //通過函數運算式聲明函數    alert('casper');}data();  //結果：casper

結合上文不難猜想過程如下：

var data;data = {name:'casper'};data = function (){    alert('casper');}data();  //結果：casper

 

小結：javascript範圍的問題著實令人頭疼，作為基礎中的基礎，把它搞清楚還是很有必要的，上面列舉了不少容易出錯的情境，但實際情況可能比這還複雜，閉包、this、不同段之間的指令碼（即指令碼分散寫在多段<script>標籤中）等這裡就不展開了。以上內容如有錯漏 或 講解不當之處，歡迎指出。

 

背景：昨晚被某兄弟某了一道關於變數範圍的問題，灰常自信地給出答案，然後。。。乖乖回去翻下犀牛書好生重溫了一遍，以下僅做備忘，過幾天再來看下自己還能不能正確看出答案。。。