本篇內(nèi)容主要講解“es6 import會(huì)不會(huì)產(chǎn)生變量提升的現(xiàn)象”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“es6 import會(huì)不會(huì)產(chǎn)生變量提升的現(xiàn)象”吧!
成都創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)潞州,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
ES6 import會(huì)產(chǎn)生變量提升的現(xiàn)象。變量提升是將變量聲明提升到它所在作用域的最開始的部分。js要經(jīng)歷編譯跟執(zhí)行階段，在編譯階段的時(shí)候，會(huì)搜集所有的變量聲明并且提前聲明變量，而其他的語(yǔ)句都不會(huì)改變他們的順序，因此，在編譯階段的時(shí)候，第一步就已經(jīng)執(zhí)行了，而第二部則是在執(zhí)行階段執(zhí)行到該語(yǔ)句的時(shí)候才執(zhí)行。
JavaScript是單線程語(yǔ)言，所以執(zhí)行肯定是按順序執(zhí)行。但是并不是逐行的分析和執(zhí)行，而是一段一段地分析執(zhí)行，會(huì)先進(jìn)行編譯階段然后才是執(zhí)行階段。在編譯階段階段，代碼真正執(zhí)行前的幾毫秒，會(huì)檢測(cè)到所有的變量和函數(shù)聲明，所有這些函數(shù)和變量聲明都被添加到名為L(zhǎng)exical Environment的JavaScript數(shù)據(jù)結(jié)構(gòu)內(nèi)的內(nèi)存中。所以這些變量和函數(shù)能在它們真正被聲明之前使用。
先從一個(gè)簡(jiǎn)單的例子來入手：
a = 2;
var a;
console.log(a);
以上的代碼會(huì)輸出什么，假如這段代碼是從上到下執(zhí)行的話，肯定會(huì)輸出undefined，然而JavaScript卻不是自上而下執(zhí)行的語(yǔ)言。 這段代碼的輸出結(jié)果是2，意外嗎？那么，為什么會(huì)這樣，這個(gè)關(guān)鍵點(diǎn)就在于--變量提升。他會(huì)將當(dāng)前作用域的所有變量的聲明，提升到程序的頂部，因此，上面的代碼等價(jià)于以下代碼，這樣是不是就能明白一些了？
var a;
a = 2;
console.log(a);
那么我們?cè)倏匆粋€(gè)例子：
console.log(a);
var a = 2;
這段代碼又會(huì)輸出什么？輸出2嗎？ 其實(shí)這段代碼會(huì)輸出undefined。這又是為什么呢？剛剛說過，JavaScript會(huì)將變量的聲明提升到頂部，但是賦值語(yǔ)句是不會(huì)提升的，對(duì)于js來說，var a = 2是分為兩步解析的：
var a;
a = 2;
而js只會(huì)提升 var a 這句，所以剛剛的語(yǔ)句等價(jià)于：
var a;
console.log(a);
a = 2;
為什么會(huì)出現(xiàn)變量提升這個(gè)現(xiàn)象呢？ 因?yàn)閖s與其他語(yǔ)言一樣，都要經(jīng)歷編譯跟執(zhí)行階段。而js在編譯階段的時(shí)候，會(huì)搜集所有的變量聲明并且提前聲明變量，而其他的語(yǔ)句都不會(huì)改變他們的順序，因此，在編譯階段的時(shí)候，第一步就已經(jīng)執(zhí)行了，而第二部則是在執(zhí)行階段執(zhí)行到該語(yǔ)句的時(shí)候才執(zhí)行。
ES6 import 會(huì)產(chǎn)生變量提升的現(xiàn)象。
比如以下的測(cè)試代碼，
// a.js
console.log('I am a.js...')
import { foo } from './b.js';
console.log(foo);
// b.js
console.log('I am b.js...')
export let foo = 1;
運(yùn)行a.js，
// node -r esm a.js
I am b.js...
I am a.js...
1
打印的結(jié)果是先出現(xiàn)‘I am b.js...’，然后再出現(xiàn)‘I am a.js...’，這就是變量提升的現(xiàn)象。
這是因?yàn)?ES6 在語(yǔ)言標(biāo)準(zhǔn)層面上實(shí)現(xiàn)了模塊功能，所以當(dāng)對(duì)a.js預(yù)編譯時(shí)發(fā)現(xiàn)關(guān)鍵詞import后，先去加載b.js，所以先輸出‘I am b.js...’。
整個(gè)流程是，
.jpg)
變量提升的產(chǎn)生，其實(shí)與變量對(duì)象的創(chuàng)建過程有關(guān)。
變量對(duì)象創(chuàng)建過程
變量對(duì)象（Variable Object）的創(chuàng)建，依次經(jīng)歷以下幾個(gè)步驟。
檢查當(dāng)前上下文的函數(shù)聲明，也就是使用function關(guān)鍵字聲明的函數(shù)。在變量對(duì)象中以函數(shù)名建立一個(gè)屬性，屬性值為指向該函數(shù)所在內(nèi)存地址的引用。如果函數(shù)名的屬性已經(jīng)存在，那么該屬性將會(huì)被新的引用所覆蓋。
檢查當(dāng)前上下文中的變量聲明，每找到一個(gè)變量聲明，就在變量對(duì)象中以變量名建立一個(gè)屬性，屬性值為undefined。如果該變量名的屬性已經(jīng)存在，為了防止同名的函數(shù)被修改為undefined，則會(huì)直接跳過，原屬性值不會(huì)被修改。
function聲明會(huì)比var聲明優(yōu)先級(jí)更高一點(diǎn)。
function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();
直接從test()的執(zhí)行上下文開始理解。
// 創(chuàng)建過程
testEC = {
// 變量對(duì)象
VO: {},
// 作用域鏈
scopeChain: {}
}
// VO 為 Variable Object 的縮寫，即變量對(duì)象
VO = {
arguments: {...},
foo:
test()執(zhí)行的結(jié)果是，
// node -r esm demo01.js
undefined
2
其實(shí)，上面的代碼demo01.js，變成了這樣的執(zhí)行順序，
function test() {
function foo() {
return 2;
}
var a;
console.log(a);
console.log(foo());
a = 1;
}
test();
到此，相信大家對(duì)“es6 import會(huì)不會(huì)產(chǎn)生變量提升的現(xiàn)象”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
