小編給大家分享一下js中解析順序、作用域、嚴(yán)格模式的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司于2013年開(kāi)始,先為白城等服務(wù)建站,白城等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為白城企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
一、javascript的解析順序
我們大家所理解的代碼的執(zhí)行順序都是從上到下的,但是實(shí)際上確不是這樣的。我們看一下下面的代碼。
alert(a); var a = 1;
如果執(zhí)行順序是從上到下的,在上面彈出一個(gè)a,瀏覽器會(huì)認(rèn)為從上到下執(zhí)行的,那么當(dāng)它alert(a)的時(shí)候,他就會(huì)發(fā)現(xiàn)沒(méi)有這個(gè)東西,那么他就會(huì)報(bào)錯(cuò),但是實(shí)際上他彈出來(lái)的結(jié)果是undefined。返回值是undefined說(shuō)明a沒(méi)有被定義也就是沒(méi)有賦值。下面我來(lái)講解一下javascript的解析順序。
1.ES5中有聲明意義的關(guān)鍵字
var 會(huì)存在變量提升
function也有聲明變量的的作用。
2.解析順序
1.找聲明 var、function 聲明:只是聲明變量,而不包括賦值。
2. 執(zhí)行
注意:以上兩步 都遵循從上至下,執(zhí)行的時(shí)候遇到等號(hào),先看等號(hào)的右邊。
注意:當(dāng)function聲明的變量和var聲明的變量重名時(shí),function的變量權(quán)重會(huì)比var聲明的要高。
下面多來(lái)幾個(gè)例子解析一下就清楚許多了,但是看例子之前要知道一下什么叫作用域。
二、作用域
作用域就是:起作用的范圍分為下面兩種
1.全局作用域
2.函數(shù)作用域
他們兩個(gè)的區(qū)別看下面的例子仔細(xì)分析。
三、看幾個(gè)例子解析一下執(zhí)行順序的步驟
1. 第一個(gè)例子:
var x = 5; a(); function a(){ alert(x); var x = 10; } alert(x);
解析過(guò)程
1,.尋找聲明 (看全局作用域)
var x; function a(){}
2.執(zhí)行
x = 5;
a() ------------->執(zhí)行到這個(gè)函數(shù)的過(guò)程中在重新進(jìn)行以上兩步
1,尋找聲明 var x;(函數(shù)作用域)
2. 執(zhí)行
alert(x); 這個(gè)x在函數(shù)作用域中存在,并且還沒(méi)有執(zhí)行到賦值的那一步,那么彈出的東西就是undefined;
x = 10;
alert(x) 這里彈窗是全局變量 5;
所以瀏覽器彈窗的內(nèi)容是 undefined 5
2. 第二個(gè)例子
a() function a(){ alert(x); var x = 10; } alert(x);
解析過(guò)程 按照上面的例子一樣分析
1. 尋找聲明
function a(){}
2.執(zhí)行
a()------------------------->函數(shù)
1.尋找聲明
var x;
2.執(zhí)行
alert(x) 彈出未定義
x = 10;
alert(x); 這里的x會(huì)從全局中尋找x,但是發(fā)現(xiàn)并沒(méi)有x,所 以瀏覽器會(huì) 報(bào)錯(cuò) x is not defined x沒(méi)有被定義
所以瀏覽器的彈出的內(nèi)容是 undefined 報(bào)錯(cuò)
我相信看了這兩個(gè)例子的人都對(duì)這個(gè)解析過(guò)程都有了清除的了解,如果還是不太了解,建議重新看一次。
下面介紹幾個(gè)需要注意的地方, 直接上例子
3. 第三個(gè)例子
前面講到了當(dāng)function聲明的變量和var聲明的變量重名時(shí),function的變量權(quán)重會(huì)比var聲明的要高。來(lái)一個(gè)例子證明一下
alert(a) function a() { alert("函數(shù)") } var a = 1; alert(a)
解析過(guò)程
1.尋找聲明
function a(){}
var a;
2. 執(zhí)行
alert(a) 前面說(shuō)到了function的聲明比var聲明的權(quán)重高,所有執(zhí)行這個(gè)的時(shí)候他會(huì)彈出這個(gè) 函數(shù)塊(函數(shù)體)
a = 1;
alert(a); 這里彈出的就是 1 了
所以最后的結(jié)果就是 函數(shù)塊 1;
4.第四個(gè)例子
子作用域可以向父級(jí)作用域找變量,直到全局作用域?yàn)橹?,反之不行?如果子作用域有同樣的變量,那么他就會(huì)使用自己的,不會(huì)去找爸爸要。
var a = 5; function fn() { alert(a) } fn()
解析過(guò)程
1.尋找聲明
var a;
function fn(){}
2.執(zhí)行
a = 5;
fn()--------------------------------------> 函數(shù)
1.找聲明
2.執(zhí)行
alert(a); 他這里沒(méi)有a 所以去找爸爸要。 a = 5; 所以彈窗是 5
所以最后結(jié)果為 彈窗5
下面看一下爸爸會(huì)不會(huì)去找兒子要東西
function fn(){ var b = 5; return b; } fn(); alert(b);
1.尋找聲明
function fn(){}
2. 執(zhí)行
fn()----------------------------------------> 函數(shù)
1.尋找聲明
1.var b;
2.執(zhí)行
return b;
alert(b); //我們看一下返回值是多少 b is not defined 他說(shuō)b沒(méi)有被定義,說(shuō)明父作用域不可以向自作用域去尋找變量。
5. 第五個(gè)例子
當(dāng)一個(gè)變量無(wú)中生有時(shí),不管從哪個(gè)作用域出來(lái)的,統(tǒng)統(tǒng)歸到window下,下面看兩個(gè)例子
fn(); alert(a); var a = 0; alert(a); function fn(){ var a = 1; }
這一個(gè)例子應(yīng)該可以自己分析了 最后的結(jié)果是 undefined 0
我們?cè)賮?lái)看一下下面這個(gè)你會(huì)很吃驚
fn() alert(a) var a = 0; alert(a); function fn(){ a = 1; }
明明都一樣,我吃驚什么 返回值不是還是 undefined 和 0 嗎
但是你有沒(méi)有發(fā)現(xiàn)倒數(shù)第二行 上面的聲明了 下面的沒(méi)有聲明,來(lái)解析一波
1.尋找變量
var a;
function fn(){}
2.fn()---------------------------->函數(shù)
a = 1; 這個(gè)時(shí)候就說(shuō)到了那一點(diǎn),無(wú)中生有的變量,統(tǒng)統(tǒng)歸到window下面
所以下面的執(zhí)行過(guò)程
alert(a) 這里的彈窗就是 1 了
a = 0;
alert(a) 彈出 0
所以最后的結(jié)果是 1 0
四、嚴(yán)格模式
嚴(yán)格模式下的代碼執(zhí)行時(shí),非常嚴(yán)格
變量不允許無(wú)中生有
意義:規(guī)范代碼開(kāi)發(fā)的流暢,邏輯
"use strict" a = 1; alert(a);
當(dāng)我們寫(xiě)后面兩句代碼的時(shí)候不會(huì)報(bào)錯(cuò)和出現(xiàn)問(wèn)題,但是當(dāng)我們加上第一句代碼的時(shí)候,我們?cè)谶@樣寫(xiě)的時(shí)候就會(huì)報(bào)錯(cuò)了。所以我們還是按照規(guī)范的標(biāo)準(zhǔn)來(lái),提高自己的能力
五、可能好多人做了上面的例子感覺(jué)不太過(guò)癮,下面我再給出幾個(gè)例子,可以自己去分析分析,我會(huì)在最后面給出答案。
1. 第一個(gè)例子 // 10 報(bào)錯(cuò)
var a = 10; alert(a); a() function a(){ alert(20); }
2.第二個(gè)例子 undefined 1 0
var a = 0; function fn(){ alert(a); var a = 1; alert(a); } fn(); alert(a);
3.第三個(gè)例子 當(dāng)同樣的聲明同樣的名字重復(fù)時(shí),后面寫(xiě)的會(huì)覆蓋前面寫(xiě)的 //2 1 1 3
a() var a = function(){ alert(1) } a(); function a(){ alert(2); } a(); var a = function(){ alert(3); } a()
以上是“js中解析順序、作用域、嚴(yán)格模式的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!