欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript變量作用域使用中常見錯誤總結(jié)

 更新時間：2013年03月26日 11:14:11   作者：  
剛看了一篇文章對js作用域的理解又會上升到一個新的臺階，javascript里變量作用域是個經(jīng)常讓人頭痛抓狂的問題,接下來對經(jīng)常遇到又容易出錯的情況進(jìn)行了簡單總結(jié)，感興趣的各位可以參考下哈

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

前言：javascript里變量作用域是個經(jīng)常讓人頭痛抓狂的問題，下面通過10++個題目，對經(jīng)常遇到又容易出錯的情況進(jìn)行了簡單總結(jié)，代碼樣例很短很簡單

題目一

復(fù)制代碼 代碼如下:

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

題目二
復(fù)制代碼 代碼如下:

alert(name); //報錯：對象未定義，即使用一個壓根就不存在的變量，所以出錯
age = 24; //這里木有錯，但age不是為定義嗎？翻下犀牛書，明白了 //給一個未定義的變量賦值，會創(chuàng)建一個全局變量，相當(dāng)于：var age = 24

題目三
復(fù)制代碼 代碼如下:

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

解釋：javascript代碼在解析的時候，都會搜索下var聲明的變量，并將其聲明提前，實際的過程如下：
復(fù)制代碼 代碼如下:

var name; //光聲明name變量，但未賦值，所以為此時為：undefined
alert(name); name = 'casper';

題目四
復(fù)制代碼 代碼如下:

var name = 'casper';
function show(){
alert(name);
name = 'hello'; //全局變量name的值改為'hello'
}
show(); //輸出：casper

題目五
復(fù)制代碼 代碼如下:

var name = 'casper';
function show(){ alert(name); //輸出：undefined，是不是有想死的心
var name = 'hello'; //注意：與題目四相比，此處name前多了個var，
} show();

解釋：在函數(shù)show中，name是個局部變量，題目三的原理同樣適用于此，即函數(shù)show內(nèi)部實際為
（小知識點補充：當(dāng)函數(shù)內(nèi)部存在與外部全局變量同名的局部變量，優(yōu)先使用局部變量，此處為name）
function show(){ var name; alert(name); name = 'hello'; }
題目六
復(fù)制代碼 代碼如下:

var list = [1,2,3];
function show(){ if(typeof list === 'undefined')
{ list = []; }
alert(list.length);
};
show(); //結(jié)果：3，是不是一目了然= =，稍等，請接著看第七題

題目七
復(fù)制代碼 代碼如下:

var list = [1,2,3];
function show(){
if(typeof list === 'undefined')
{ var list = []; //請注意，與題目六相比，這里多了個var
} alert(list.length); };
show(); //結(jié)果：0，是不是突然有了想死的沖動

解釋：javascript沒有塊級作用域（即由{}限定的作用域），函數(shù)中聲明的所有變量，無論在哪里聲明，在整個函數(shù)中都是有定義的，這點跟C++等灰常不同，趕緊扭轉(zhuǎn)思想與時俱進(jìn)
于是，再來看下show方法實際的內(nèi)部解析邏輯
復(fù)制代碼 代碼如下:

function show(){ var list; //list為局部變量，且此處尚未賦值
if(typeof list === 'undefined'){
list = []; }
alert(list.length); };

題目八
復(fù)制代碼 代碼如下:

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

解釋：javascript代碼解析的過程，類似 function show() 這種形式聲明的函數(shù)，跟var聲明的變量一樣，都會被提到最前面，不同的是，函數(shù)聲明跟定義同時完成，但var聲明的變量的賦值在后面才會完成
題目九
復(fù)制代碼 代碼如下:

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

解釋：采用函數(shù)定義式以及函數(shù)表達(dá)式定義函數(shù)，兩者過程之間存在一些區(qū)別
函數(shù)定義式：function show(){}
函數(shù)表達(dá)式：var show = function(){}
采用函數(shù)定義式聲明的方法，函數(shù)的定義會提前；而采用函數(shù)表達(dá)式聲明的方法，函數(shù)的定義，跟采用var聲明的局部變量一樣，函數(shù)聲明會提前，但函數(shù)定義位置不變，過程如下：
復(fù)制代碼 代碼如下:

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

題目十
復(fù)制代碼 代碼如下:

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

是不是有砸顯示器的沖動。。。data此時其實為{name:'casper'}，把一個object當(dāng)函數(shù)調(diào)用，于是報錯了
前面說過，函數(shù)聲明（通過函數(shù)定義式）、var聲明的變量會被提前，但是會有先后順序之分，如下：
復(fù)制代碼 代碼如下:

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

略微修改下，結(jié)果就不同鳥：
復(fù)制代碼 代碼如下:

var data = {name:'casper'};
var data = function (){ //通過函數(shù)表達(dá)式聲明函數(shù)
alert('casper'); }
data(); //結(jié)果：casper

結(jié)合上文不難猜想過程如下：
復(fù)制代碼 代碼如下:

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

相關(guān)文章

最新評論