javascript變數作用域使用中常見錯誤總結_javascript技巧

今天在rainweb的部落格上，看到了這篇非常好的文章，覺得非常有必要分享出來，相信大家認真讀完這篇文章，對js作用域的理解又會上升到一個新的台階。

前言：javascript裡變數作用域是個經常讓人頭痛抓狂的問題，以下透過10 個題目，對經常遇到又容易出錯的情況進行了簡單總結，程式碼範例很短很簡單

題目一

複製代碼 代碼如下:

代碼如下:

var name = ' casper'; alert(name); //無疑慮>

程式碼如下: alert(name); //報錯：物件未定義，即使用一個壓根就不存在的變量，所以出錯age = 24; //這裡木有錯，但age不是為定義嗎？翻下犀牛書，明白了//給一個未定義的變量賦值，會創建一個全局變量，相當於：var age = 24

題目三

複製程式碼

程式碼如下: alert(name); //name下面才定義，這裡肯定報錯了吧？錯！這裡彈出：undefined var name = 'casper';

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

複製程式碼

程式碼如下: var 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); };
題目八

複製程式碼 程式碼如下:

alert(typeof); /結果：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(){};

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; {name:'casper'};
data = function (){ alert('casper'); }

data(); //結果：casper