JavaScript變量提升

Zoom 發(fā)布于2019-08-21 10:44 / 3560人閱讀

摘要：變量提升需要注意兩點(diǎn)提升的部分只是變量聲明，賦值語(yǔ)句和可執(zhí)行的代碼邏輯還保持在原地不動(dòng)提升只是將變量聲明提升到變量所在的變量范圍的頂端，并不是提升到全局范圍，說(shuō)明如下會(huì)輸出變量提升之后的效果函數(shù)聲明會(huì)提升，但是函數(shù)表達(dá)式就不了。

問(wèn)題

有些朋友可能會(huì)覺(jué)得javascript的代碼是從上到下，一行一行的解釋執(zhí)行的。如果按照這樣的思路，在有些情況下閱讀代碼會(huì)得到錯(cuò)誤的結(jié)果，考慮以下代碼：

a = 2;
var a;
console.log(a);

console.log(a)應(yīng)該輸出什么呢？有些開(kāi)發(fā)者覺(jué)得會(huì)輸出undefined，因?yàn)?b>var a在"a = 2"之后，變量a被重復(fù)定義了，但是沒(méi)有被賦值，所以是"undefined"。但是結(jié)果輸出是2。如下圖所示：

我們?cè)賮?lái)考慮另一段代碼，如下所示：

console.log(a);
var a = 2;

這段代碼會(huì)輸出什么樣的結(jié)果呢？有些人可能會(huì)覺(jué)得輸出ReferenceError。因?yàn)樽兞?b>a在沒(méi)有聲明的情況下就被使用了。真實(shí)結(jié)果呢，如下圖所示：輸出的是undefined

為什么會(huì)這樣呢？這就牽出了本文的主題：JavaScript聲明提升

JavaScript代碼的運(yùn)行規(guī)則

在JavaScript代碼運(yùn)行之前其實(shí)是有一個(gè)編譯階段的。編譯之后才是從上到下，一行一行解釋執(zhí)行。變量提升就發(fā)生在編譯階段，它把變量和函數(shù)的聲明提升至作用域的頂端。（編譯階段的工作之一就是將變量與其作用域進(jìn)行關(guān)聯(lián)）。
所以對(duì)于代碼var a =2;來(lái)說(shuō)，編譯器看到的是兩行代碼var a; a = 2;第一個(gè)語(yǔ)句是聲明語(yǔ)句，在編譯階段處理。第二個(gè)語(yǔ)句是賦值語(yǔ)句，在運(yùn)行階段處理。
那么我們?cè)倩剡^(guò)頭來(lái)看看問(wèn)題中出現(xiàn)的代碼：

a = 2;
var a;
console.log(a);

應(yīng)該這樣來(lái)處理：

var a;            //編譯階段
a = 2;            //運(yùn)行階段
console.log(a);   //運(yùn)行階段

所以這段代碼的最終輸出的結(jié)果是2。

第二段代碼：

console.log(a);
var a = 2;

應(yīng)該這樣來(lái)處理：

   var a;            //編譯階段
   console.log(a);   //運(yùn)行階段 
   a = 2;            //運(yùn)行階段

所以這段代碼的最終輸出結(jié)果是undefined。

變量提升需要注意兩點(diǎn)：

提升的部分只是變量聲明，賦值語(yǔ)句和可執(zhí)行的代碼邏輯還保持在原地不動(dòng)

提升只是將變量聲明提升到變量所在的變量范圍的頂端，并不是提升到全局范圍，說(shuō)明如下：

foo();
function foo(){
    console.log(a); //會(huì)輸出undefined
    var a = "2";
}
//變量提升之后的效果
function foo(){
    var a;
    console.log(a);
    a = "2";
}
foo();

函數(shù)聲明會(huì)提升，但是函數(shù)表達(dá)式就不了?？慈缦麓a：

foo();
var foo = function bar(){    //這是一個(gè)函數(shù)表達(dá)式，不再是函數(shù)聲明。
    console.log("bar");
}

處理方式如下：

var foo;    
foo();    //TypeError，因?yàn)檫€沒(méi)有賦值
bar();    //bar不可以在全局范圍內(nèi)引用
foo = function bar(){            
    console.log("bar");
}

函數(shù)是一等公民

變量聲明和函數(shù)聲明都會(huì)得到變量提升，但函數(shù)聲明會(huì)最先得到提升，然后是變量聲明。
考慮如下代碼：

foo();    //輸出的結(jié)果為1
var foo;
function foo(){
    console.log(1);
}
foo = function(){
    console.log(2);
}

處理方式如下：

function foo(){
    console.log(1);
} 
foo();
foo = function(){
    console.log(2);
}

注意：var foo;由于是重復(fù)聲明變量，所以被編譯優(yōu)化去掉。

最后再來(lái)說(shuō)明幾種情況

對(duì)于函數(shù)聲明來(lái)說(shuō)，如果定義了相同的函數(shù)變量聲明，后定義的聲明會(huì)覆蓋掉先前的聲明，看如下代碼：

foo();    //輸出3
function foo(){
    console.log(1);
}
var foo = function(){
    console.log(2);
}  
function foo(){
    console.log(3);
}

JavaScript中是沒(méi)有塊級(jí)作用域的概念（ps：ES6中有改進(jìn)了），看如下代碼：

foo();    //輸出結(jié)果為2
var a = true;
if(a){
    function foo(){
        console.log(1);
    }
}else{
    function foo(){
        console.log(2);
    }
}

這段代碼輸出結(jié)果為2，if語(yǔ)句沒(méi)有塊級(jí)作用域的功能，所以函數(shù)聲明都被提升到全局作用域中，又因?yàn)槎x了兩個(gè)foo，后來(lái)的定義覆蓋了前邊的定義，所以輸出結(jié)果為2。

云服務(wù)器 GPU云服務(wù)器 js變量聲明提升 javascript提升 javascript變量 javascript定義變量

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86101.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Zoom

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【力扣】40. 組合總和 II

閱讀 2679·2021-11-12 10:36
PacificRack秋季促銷：洛杉磯VPS $18.00/年起，采用SSD硬盤(pán)，支持Linux/W

閱讀 2338·2021-08-23 09:47
把富文本的 ? 轉(zhuǎn)為</br>標(biāo)簽

閱讀 1776·2019-08-30 15:44
前端iPhone X適配總結(jié)

閱讀 1457·2019-08-30 14:10
小白面試之制作一個(gè)本地個(gè)人信息網(wǎng)頁(yè)

閱讀 2324·2019-08-29 16:52
面向web前端及node開(kāi)發(fā)人員的vim配置

閱讀 2396·2019-08-29 16:40
移動(dòng)前端開(kāi)發(fā)經(jīng)驗(yàn)小結(jié)

閱讀 1650·2019-08-29 16:17
玩轉(zhuǎn)3D Swiper性感秀之思路分析總結(jié)

閱讀 2476·2019-08-26 13:21

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript變量提升

相關(guān)文章

Javascript中的變量提升、函數(shù)提升及變量訪問(wèn)原則