JavaScript中變量提升和函數(shù)提升實(shí)例詳解
js 執(zhí)行
- 詞法分析階段：包括分析形參、分析變量聲明、分析函數(shù)聲明三個(gè)部分。通過(guò)詞法分析將我們寫的 js 代碼轉(zhuǎn)成可以執(zhí)行的代碼。
- 執(zhí)行階段
變量提升
- 只有聲明被提升，初始化不會(huì)被提升
- 聲明會(huì)被提升到當(dāng)前作用域的頂端
🌰 1:
console.log(num) var num num = 6
預(yù)編譯之后
var num console.log(num) // undefined num = 6
🌰 2:
num = 6 console.log(num) var num
預(yù)編譯之后
var num num = 6 console.log(num) // 6
🌰 3:
function bar() {
if (!foo) {
var foo = 5
}
console.log(foo) // 5
}
bar()
預(yù)編譯之后
function bar() {
var foo // if語(yǔ)句內(nèi)的聲明提升
if (!foo) {
foo = 5
}
console.log(foo)
}
bar()
函數(shù)提升
- 函數(shù)聲明和初始化都會(huì)被提升
- 函數(shù)表達(dá)式不會(huì)被提升
🌰 1: 函數(shù)聲明可被提升
console.log(square(5)) // 25
function square(n) {
return n * n
}
預(yù)編譯之后
function square(n) {
return n * n
}
console.log(square(5))
🌰 2: 函數(shù)表達(dá)式不可被提升
console.log(square) // undefined
console.log(square(5)) // square is not a function
var square = function(n) {
return n * n
}
預(yù)編譯之后
var square
console.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ì)過(guò)程。事后查閱資料加上自己的驗(yàn)證，得出了自己對(duì)于它們順序的一些理解，話不多說(shuō)，直接進(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ì)過(guò)程如下：
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ù)賦值給變量a
console.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ì)過(guò)程如下：
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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章介紹了AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法，有需要的朋友可以參考一下2013-11-11
JS+CSS簡(jiǎn)單樹形菜單實(shí)現(xiàn)方法
這篇文章主要介紹了JS+CSS簡(jiǎn)單樹形菜單實(shí)現(xiàn)方法,涉及JavaScript結(jié)合css動(dòng)態(tài)操作頁(yè)面元素結(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解
這篇文章主要介紹了javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
javascript 哈希表(hashtable)的簡(jiǎn)單實(shí)現(xiàn)
javascript中沒有像c#,java那樣的哈希表(hashtable)的實(shí)現(xiàn)。在js中,object屬性的實(shí)現(xiàn)就是hash表,因此只要在object上封裝點(diǎn)方法,簡(jiǎn)單的使用obejct管理屬性的方法就可以實(shí)現(xiàn)簡(jiǎn)單高效的hashtable。2010-01-01
這篇文章主要介紹了JavaScript 拖拉時(shí)間之drag案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼，對(duì)于firefox不兼容。2009-12-12
這篇文章主要介紹了微信小程序之分享頁(yè)面如何返回首頁(yè)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于js中join()方法的相關(guān)資料,join方法用于把數(shù)組中的所有元素放入一個(gè)字符串,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了JS正則表達(dá)式修飾符global(/g)用法,結(jié)合實(shí)例形式分析了JS全局匹配修飾符/g的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS未跨域操作iframe里的DOM 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06