分享更有价值
被信任是一种快乐

es6 import会不会产生变量提升的现象

文章页正文上

本篇内容主要讲解“es6 import会不会产生变量提升的现象”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6 import会不会产生变量提升的现象”吧! ES6 import会产生变量提升的现象。变量提升是将变量声明提升到它所在作用域的最开始的部分。js要经历编译跟执行阶段,在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二部则是在执行阶段执行到该语句的时候才执行。JavaScript是单线程语言,所以执行肯定是按顺序执行。但是并不是逐行的分析和执行,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。在编译阶段阶段,代码真正执行前的几毫秒,会检测到所有的变量和函数声明,所有这些函数和变量声明都被添加到名为Lexical Environment的JavaScript数据结构内的内存中。所以这些变量和函数能在它们真正被声明之前使用。先从一个简单的例子来入手:

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

以上的代码会输出什么,假如这段代码是从上到下执行的话,肯定会输出undefined,然而JavaScript却不是自上而下执行的语言。
这段代码的输出结果是2,意外吗?那么,为什么会这样,这个关键点就在于–变量提升。他会将当前作用域的所有变量的声明,提升到程序的顶部,因此,上面的代码等价于以下代码,这样是不是就能明白一些了?

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

那么我们再看一个例子:

console.log(a);
vara=2;

这段代码又会输出什么?输出2吗?
其实这段代码会输出undefined。这又是为什么呢?刚刚说过,JavaScript会将变量的声明提升到顶部,但是赋值语句是不会提升的,对于js来说,var a = 2是分为两步解析的:

vara;
a=2;

而js只会提升 var a 这句,所以刚刚的语句等价于:

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

为什么会出现变量提升这个现象呢?
因为js与其他语言一样,都要经历编译跟执行阶段。而js在编译免费云主机、域名阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二部则是在执行阶段执行到该语句的时候才执行。ES6 import 会产生变量提升的现象。比如以下的测试代码,

//a.js
console.log('Iama.js...')
import{foo}from'./b.js';
console.log(foo);
//b.js
console.log('Iamb.js...')
exportletfoo=1;

运行a.js,

//node-resma.js
Iamb.js...
Iama.js...
1

打印的结果是先出现‘I am b.js…’,然后再出现‘I am a.js…’,这就是变量提升的现象。这是因为 ES6 在语言标准层面上实现了模块功能,所以当对a.js预编译时发现关键词import后,先去加载b.js,所以先输出‘I am b.js…’。整个流程是,变量提升的产生,其实与变量对象的创建过程有关。变量对象创建过程变量对象(Variable Object)的创建,依次经历以下几个步骤。检查当前上下文的函数声明,也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性,属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在,那么该属性将会被新的引用所覆盖。检查当前上下文中的变量声明,每找到一个变量声明,就在变量对象中以变量名建立一个属性,属性值为undefined。如果该变量名的属性已经存在,为了防止同名的函数被修改为undefined,则会直接跳过,原属性值不会被修改。function声明会比var声明优先级更高一点。

functiontest(){
console.log(a);
console.log(foo());

vara=1;
functionfoo(){
return2;
}
}

test();

直接从test()的执行上下文开始理解。

//创建过程
testEC={
//变量对象
VO:{},
//作用域链
scopeChain:{}
}

//VO为VariableObject的缩写,即变量对象
VO={
arguments:{...},
foo://表示foo的地址引用
a:undefined
}

test()执行的结果是,

//node-resmdemo01.js
undefined
2

其实,上面的代码demo01.js,变成了这样的执行顺序,

functiontest(){
functionfoo(){
return2;
}
vara;
console.log(a);
console.log(foo());
a=1;
}
test();

到此,相信大家对“es6 import会不会产生变量提升的现象”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: react router不显示如何解决

本篇内容介绍了“react router不显示如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! react router不显示的解决办法:1、在父路由组件…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册