JavaScript變量提升和嚴(yán)格模式實(shí)例分析
本文實(shí)例講述了JavaScript變量提升和嚴(yán)格模式。分享給大家供大家參考,具體如下:
1.什么是變量提升
所謂的變量提升指的是:函數(shù)聲明和變量聲明總是會(huì)被解釋器悄悄地被"提升"到方法體(作用域)的最頂部。
下面我們通過一個(gè)例子來詳細(xì)說明一下。
//變量聲明在使用之前 var x; console.log(x);//undefined //變量聲明在使用之后 console.log(y);//undefined var y; //上面的式子可以寫成下面的樣子 /* 變量提升:把x,y提升到頂部 var x; var y; console.log(x); console.log(y); */
從上面這個(gè)例子我們可以看到:
①變量的使用有兩種形式,先聲明再使用或者先使用后聲明;
②無論是哪一種形式都不影響變量的使用,這是因?yàn)橛凶兞刻嵘拇嬖冢恳粋€(gè)你定義的變量都會(huì)被提升到頂部,也就是函數(shù)最開始的部分,這就變成了你在使用變量時(shí)其實(shí)都已經(jīng)聲明變量了。
下面我舉一個(gè)經(jīng)典的例子來更好地理解一下。
//經(jīng)典案例:window表示全局,判斷條件(變量a是否有在全局下)是在變量a聲明之前 if(a in window){ var a; console.log('a in window'); }else{console.log('a not in window');} //a in window //相當(dāng)于: /* var a; //a被提升到頂部 if(a in window){ console.log('a in window'); }else{console.log('a not in window');} */
這是變量提升的一個(gè)很好的例子,可以看到打印出來的結(jié)果表明,在我們使用a之前,聲明變量a就被提升到頂部。
但是,要注意的是JavaScript 只有聲明的變量會(huì)提升,初始化的不會(huì)。
console.log(c);//undefined var c = 1; //初始化 /* var c; console.log(c); c = 1; */ var d;//聲明d d = 1;//初始化 console.log(d);//1
上面的c打印結(jié)果為undefined,這是因?yàn)樘嵘闹挥新暶髯兞?code>var c,而初始化的c=1
沒有提升而在使用之后。
為了避免上面出現(xiàn)的變量提升的問題,通常我們?cè)诿總€(gè)作用域開始前聲明我們要使用的變量。
2.嚴(yán)格模式
嚴(yán)格模式的寫法就是在代碼編寫之前加上"use strict",嚴(yán)格模式要求你不能使用未聲明的變量,否則會(huì)報(bào)錯(cuò)。
例如:
"use strict"; //嚴(yán)格模式 m =1; console.log(m);//m is not defined //在嚴(yán)格模式下,因?yàn)閙未被聲明就被使用或者初始化則會(huì)報(bào)錯(cuò) var n = 1; console.log(n);//1
但是在沒有使用嚴(yán)格模式的時(shí)候:
m =1; console.log(m);//1 //在非嚴(yán)格模式下,同樣這樣寫就不會(huì)報(bào)錯(cuò)
雖然還是沒有聲明變量m但還是可以使用的。
所以,還是建議大家盡可能得使用嚴(yán)格模式來編寫javascript代碼,以消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處,讓自己成為一個(gè)更優(yōu)秀的程序員。
感興趣的朋友還可以使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript 引用類型實(shí)例詳解【數(shù)組、對(duì)象、嚴(yán)格模式等】
- JS嚴(yán)格模式原理與用法實(shí)例分析
- JavaScript 嚴(yán)格模式(use strict)用法實(shí)例分析
- javascript嚴(yán)格模式詳解(含嚴(yán)格模式與非嚴(yán)格模式的區(qū)別)
- 在JavaScript中使用嚴(yán)格模式(Strict Mode)
- 深入淺析JS中的嚴(yán)格模式
- JS嚴(yán)格模式知識(shí)點(diǎn)總結(jié)
- JavaScript嚴(yán)格模式下關(guān)于this的幾種指向詳解
- 深入理解javascript嚴(yán)格模式(Strict Mode)
- JavaScript嚴(yán)格模式不支持八進(jìn)制的問題講解
相關(guān)文章
在element-ui的select下拉框加上滾動(dòng)加載
這篇文章主要介紹了在element-ui的select下拉框加上滾動(dòng)加載,本文以以element-ui中的select為例,給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-04-04Javascript表格翻頁效果實(shí)現(xiàn)思路及代碼
表格翻頁的實(shí)現(xiàn)方式有很多,下面以js為例為大家詳細(xì)介紹下表格翻頁效果的具體實(shí)現(xiàn),感興趣的朋友可以參考下2013-08-08JavaScript+HTML5實(shí)現(xiàn)的日期比較功能示例
這篇文章主要介紹了JavaScript+HTML5實(shí)現(xiàn)的日期比較功能,涉及javascript結(jié)合HTML5針對(duì)日期的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-07-07JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】
這篇文章主要介紹了JavaScript計(jì)時(shí)器用法,結(jié)合實(shí)例形式分析了setTimeout和clearTimeout函數(shù)的具體使用技巧,需要的朋友可以參考下2017-01-01微信小程序授權(quán)登錄及解密unionId出錯(cuò)的方法
這篇文章主要介紹了微信小程序授權(quán)登錄及解密unionId出錯(cuò)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09JavaScript實(shí)現(xiàn)一個(gè)空中避難的小游戲
最近利用Javascript實(shí)現(xiàn)了一個(gè)小游戲,覺著還不錯(cuò),所以分享給大家,下面這篇文章主要給大家介紹了利用JavaScript實(shí)現(xiàn)一個(gè)空中避難的小游戲的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來一起看看吧。2017-06-06