JavaScript中變量提升和函數(shù)提升實(shí)例詳解
🌰 1:
console.log(num)var numnum = 6
預(yù)編譯之后
var numconsole.log(num) // undefinednum = 6
🌰 2:
num = 6console.log(num)var num
預(yù)編譯之后
var numnum = 6console.log(num) // 6
🌰 3:
function bar() { if (!foo) {var foo = 5 } console.log(foo) // 5}bar()
預(yù)編譯之后
function bar() { var foo // if語句內(nèi)的聲明提升 if (!foo) {foo = 5 } console.log(foo)}bar()函數(shù)提升 函數(shù)聲明和初始化都會(huì)被提升 函數(shù)表達(dá)式不會(huì)被提升
🌰 1: 函數(shù)聲明可被提升
console.log(square(5)) // 25function square(n) { return n * n}
預(yù)編譯之后
function square(n) { return n * n}console.log(square(5))
🌰 2: 函數(shù)表達(dá)式不可被提升
console.log(square) // undefinedconsole.log(square(5)) // square is not a functionvar square = function(n) { return n * n}
預(yù)編譯之后
var squareconsole.log(square)console.log(square(5))square = function() { return n * n}
🌰 3:
function bar() { foo() // 2 var foo = function() {console.log(1) } foo() // 1 function foo() {console.log(2) } foo() // 1}bar()
預(yù)編譯之后:
function bar() { var foo foo = function foo() {console.log(2) } foo() // 2 foo = function() {console.log(1) } foo() // 1 foo() // 1}函數(shù)提升在變量提升之前
🌰 1:
console.log(foo) // 會(huì)打印出函數(shù)function foo() { console.log(’foo’)}var foo = 1
🌰 2:
var foo = ’hello’ // hello;(function(foo) { console.log(foo) var foo = foo || ’world’ console.log(foo) //hello})(foo)console.log(foo) // hello
預(yù)編譯之后
var foo = ’hello’;(function(foo) { var foo foo = ’hello’ // 傳入?yún)?shù)的foo值 console.log(foo) // hello foo = foo || ’world’ // foo有值為hello,所以沒有賦值為world console.log(foo) // hello})(foo)console.log(foo) // hello, 打印的事全局作用域下的var foo = ’hello’JS變量提升和函數(shù)提升的順序
最近筆試時(shí)碰到考察變量提升與函數(shù)提升順序的一道題目,之前只知道var定義的變量會(huì)有變量提升以及函數(shù)聲明也會(huì)提升,但沒有深入研究他們的順序以及詳細(xì)過程。事后查閱資料加上自己的驗(yàn)證,得出了自己對(duì)于它們順序的一些理解,話不多說,直接進(jìn)入正題。
首先給出我的結(jié)論:函數(shù)提升優(yōu)先級(jí)高于變量提升,且不會(huì)被同名變量聲明時(shí)覆蓋,但是會(huì)被同名變量賦值后覆蓋
大家可以看下面這段代碼:
console.log(a) // ƒ a(){} 變量a賦值前打印的都會(huì)是函數(shù)a var a=1; function a(){} console.log(a) // 1 變量a賦值后打印的都會(huì)是變量a的值
首先變量和函數(shù)聲明都提升,但函數(shù)提升優(yōu)先級(jí)高于變量,都提升后變量只是定義沒有賦值,所以輸出的是函數(shù)a。詳細(xì)過程如下:
function a(){} // 函數(shù)聲明提升 a-> f a (){} var a;// 變量提升 console.log(a) // 此時(shí)變量a只是聲明沒有賦值所以不會(huì)覆蓋函數(shù)a --> 輸出函數(shù)a f a (){} a=1; //變量賦值 console.log(a) // 此時(shí)變量a賦值了 --> 輸出變量a的值 1
總結(jié):由于函數(shù)聲明和變量都會(huì)提升,如果函數(shù)與變量同名,那么只要在變量賦值前打印的都會(huì)是函數(shù),在變量賦值之后打印都是變量的值。
現(xiàn)在讓我們?cè)倏匆欢未a:
a(); // 2 var a = function(){ // 看成是一個(gè)函數(shù)賦值給變量aconsole.log(1) } a(); // 1 function a(){console.log(2) } a(); // 1
其實(shí)只是想告訴大家只有函數(shù)聲明才會(huì)提升函數(shù)表達(dá)式不會(huì)提升,所以在函數(shù)表達(dá)式后面的代碼會(huì)輸出1,因?yàn)樽兞縜賦值后把提升的函數(shù)a覆蓋了。詳細(xì)過程如下:
function a(){ // 函數(shù)提升 console.log(2) } var a; // 變量提升 a(); // 2 a = function(){ // 變量a賦值后覆蓋上面的函數(shù)a console.log(1) } a(); // 1 a(); // 1
再看一段代碼:
a(); function a(){ console.log(1) } function a(){ console.log(2) }
打印的是2,道理很簡(jiǎn)單先聲明的會(huì)被后聲明的覆蓋。
總結(jié)到此這篇關(guān)于JavaScript中變量提升和函數(shù)提升的文章就介紹到這了,更多相關(guān)js變量提升和函數(shù)提升內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. vue實(shí)現(xiàn)web在線聊天功能2. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)3. Springboot 全局日期格式化處理的實(shí)現(xiàn)4. idea配置jdk的操作方法5. Docker容器如何更新打包并上傳到阿里云6. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法7. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題8. VMware中如何安裝Ubuntu9. python 浮點(diǎn)數(shù)四舍五入需要注意的地方10. JAMon(Java Application Monitor)備忘記
