了解javascript中變量及函數(shù)的提升
javascript中變量以及函數(shù)的提升,在我們平時(shí)的項(xiàng)目中其實(shí)還是挺常用的,尤其是大型項(xiàng)目中,不知不覺就會順手添加一些變量,而有時(shí)候自己的不小心就會釀成一些不必要錯(cuò)誤,趁有時(shí)間整理一下自己對于js中變量及函數(shù)提升的理解。
首先,看一個(gè)題目:
console.log(a); // undefined var a = 1; console.log(a); // 1 console.log(b()); function b(){return 2;} // 2 console.log(c) //報(bào)錯(cuò) let c = 4; console.log(d()) // 報(bào)錯(cuò) var d = function(){return 3;} // 報(bào)錯(cuò) (function(){ var m = n = 1; })() console.log(m) //報(bào)錯(cuò) console.log(n) // 1
上面的實(shí)例對于javascript變量及函數(shù)提升的可謂是淋漓盡致...
一、javascript 變量的提升
-函數(shù)及變量的聲明都將被提升到函數(shù)的最頂部
-變量可以在使用后聲明,也就是變量可以先使用再聲明
敲黑板,劃重點(diǎn),是變量的聲明,聲明,聲明,當(dāng)變量或函數(shù)已經(jīng)初始化之后,就不會提升到函數(shù)的最頂部。這里上面的變量a已經(jīng)初始化了,所以第一個(gè)console取不到變量a得值,為undefined;
注意:變量的提升只會提升到當(dāng)前作用域下
二、javascript函數(shù)的提升
而函數(shù)b僅僅是先聲明了一個(gè)函數(shù)方法,函數(shù)c是函數(shù)表達(dá)式無法提升,所以在嚴(yán)格模式下b=2;d報(bào)錯(cuò)
對于m,n,這里就涉及到j(luò)avascript作用域的問題
首先,var m = n = 1的執(zhí)行順序是什么?并不是我們大多數(shù)人心中所想的連續(xù)賦值,javascript的賦值是從右向左的,而是 n=1;var m = n;很好,一目了然,在函數(shù)作用域內(nèi)的變量m=n,n是全局變量,最后嚴(yán)格模式下輸出結(jié)果,n=1,m報(bào)錯(cuò);
三、關(guān)于es6兩個(gè)關(guān)鍵字——let和const
let 聲明的變量只在 let 命令所在的代碼塊內(nèi)有效,不存在變量的提升
const 聲明一個(gè)只讀的常量,一旦聲明,常量的值就不能改變。一旦聲明必須初始化,否則就會報(bào)錯(cuò)
來個(gè)對比很明顯的栗子(完美的體現(xiàn)出let命令只在代碼塊內(nèi)有效的意思):
{ let test = 2; var web = 'font'; } console.log(test); // 報(bào)錯(cuò) console.log(web); // font
再次回到上面的題目,c就是報(bào)錯(cuò)的
ES6 明確規(guī)定,代碼塊內(nèi)如果存在 let 或者 const,代碼塊會對這些命令聲明的變量從塊的開始就形成一個(gè)封閉作用域。代碼塊內(nèi),在聲明變量 PI 之前使用它會報(bào)錯(cuò)。
var PI = "a"; if(true){ console.log(PI); // 報(bào)錯(cuò),即使函數(shù)外面全局聲明了PI,但在代碼塊內(nèi)還是會報(bào)錯(cuò) const PI = "3.1415926"; }
以上,就是關(guān)于javascript中變量提升的理解。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解nodejs的express如何自動(dòng)生成項(xiàng)目框架
本篇文章主要介紹了nodejs的express如何自動(dòng)生成項(xiàng)目框架,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07如何利用node實(shí)現(xiàn)靜態(tài)文件緩存詳解
HTTP 緩存機(jī)制作為 Web 應(yīng)用性能優(yōu)化的重要手段,對于從事 Web 開發(fā)的同學(xué)們來說,應(yīng)該是知識體系的基礎(chǔ)環(huán)節(jié),也是想要成為前端架構(gòu)的必備技能,這篇文章主要給大家介紹了關(guān)于如何利用node實(shí)現(xiàn)靜態(tài)文件緩存的相關(guān)資料,需要的朋友可以參考下2021-07-07在Linux系統(tǒng)中搭建Node.js開發(fā)環(huán)境的簡單步驟講解
這篇文章主要介紹了在Linux系統(tǒng)中搭建Node.js開發(fā)環(huán)境的步驟,Node使得JavaScript程序可以在本地操作系統(tǒng)環(huán)境中解釋運(yùn)行,需要的朋友可以參考下2016-01-01nodejs連接mysql數(shù)據(jù)庫簡單封裝示例-mysql模塊
本篇文章主要介紹了nodejs連接mysql數(shù)據(jù)庫簡單封裝(mysql模塊),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04使用node.js中的Buffer類處理二進(jìn)制數(shù)據(jù)的方法
大家應(yīng)該都知道在客戶端JavaScript腳本代碼中,對二進(jìn)制數(shù)據(jù)并沒有提供一個(gè)很好的支持。然而,在處理TCP流或文件流時(shí),必須要處理二進(jìn)制數(shù)據(jù)。因此,下面通過這篇文章來一起看看利用node.js中的Buffer類處理二進(jìn)制數(shù)據(jù)的方法,有需要的朋友們可以參考借鑒。2016-11-11Lua表達(dá)式和控制結(jié)構(gòu)學(xué)習(xí)筆記
這篇文章主要介紹了Lua表達(dá)式和控制結(jié)構(gòu)學(xué)習(xí)筆記,本文講解了算術(shù)操作符、關(guān)系操作符、邏輯操作符、局部變量與作用域、控制結(jié)構(gòu)等內(nèi)容,需要的朋友可以參考下2014-12-12nodejs抓取notion?emoji?svg資源的腳本示例
這篇文章主要為大家介紹了nodejs抓取notion?emoji?svg資源腳本實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Node綁定全局TraceID的實(shí)現(xiàn)方法
這篇文章主要介紹了Node 綁定全局 TraceID的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11