JS执行流程&变量提升
![59194b25b876af174ac55051ae2a3ecc.png](https://img-blog.csdnimg.cn/img_convert/59194b25b876af174ac55051ae2a3ecc.png)
一段代码的执行
1、一段js代码
在执行过程中,需要先做变量提升
,为什么要做变量提升
呢?因为在代码执行之前需要先编译
2、在编译
阶段,变量和函数会被存放在变量环境
中,变量的值会被设置为undefined 3、在执行阶段
,js引擎会从变量环境中查找自定义的变量和函数
因此我们知道 js的执行机制是:先编译,后执行
分析每个步骤的详细内容
一段代码
怎样的一段代码,会在执行之前就进行编译,并创建执行上下文
- 执行全局代码时:在整个页面的生存周期内,只有一份
- 调用一个函数时:一般情况下,函数执行网,创建的执行上下文会被销毁
- 使用eval函数时
编译阶段 -- 变量提升
在了解变量提升之前,先说一下javascript中的声明和赋值
1、变量的声明和赋值:
var nyname = 'jingda'
这段代码你可以看成两段代码组成
var myname //声明部分
myname = 'jingda' //赋值部分
2、函数的声明和赋值
function foo(){
console.log('foo')
}
var bar = function(){
console.log('bar')
}
第一个函数foo是一个完整的函数声明,没有涉及到赋值操作;第二个函数先声明变量bar,再把下面这部分赋值给bar
function(){
console.log('bar')
}
然后我们可以来说一下变量提升:
所谓变量提升,指的javascript代码执行过程中,javascript引擎把
变量的声明部分
和函数的声明部分
提升到了代码开头的“行为”。变量被提升后,会给变量设置默认值
undefined
举个例子:
showName()
console.log(myname)
var myname = 'jingda'
function showName(){
console.log('函数 showName 被执行')
}
我们可以看到函数
showName()
已经执行成功,但是console.log(myname)
输出undefined
此时我们的 myname 是在声明之前执行,于是它输出结果为undefined, 那如果它没有声明呢?可以看到当我们把声明变量的代码注释之后,没有返回undefined,而是报错了。从上面的例子可以得到下面三个结论:
- 使用了未声明的变量,那么js执行会报错
- 在一个变量定义之前使用它,不会报错,但是该变量的值为undefined,而不是之后会定义的值
- 在一个函数定义之前使用它,不会出错,函数能正确执行。
第一个结论很好理解,未声明报错。那第二,三个呢?让我们看看之前说过的所谓变量提升:javascript引擎把变量的声明部分
和函数的声明部分
提升到了代码开头的“行为”,同时会给变量设置默认值undefined
那么刚才的代码在变量提升之后就应该是这样的代码
//变量提升
var myname = undefined //变量声明
function showName(){ //函数声明
console.log('函数 showName 被执行')
}
//可执行代码
showName()
console.log(myname)
myname = 'jingda'
相信这样写你会更加明白可以在定义之前使用变量或者函数的原因:函数和变量在执行之前都提升到了代码的开头;
文章总结:
Javascrip的执行流程
1、编译阶段 存在变量提升:这里注意,实际上变量和函数声明在代码里的位置是不会改变的,而是在编译阶段被javascript引擎放入内存中。再拿刚才的例子 第一部分:变量提升部分的代码
var myname = undefined //变量声明
function showName(){ //函数声明
console.log('函数 showName 被执行')
}
第二部分:执行部分的代码
showName()
console.log(myname)
myname = 'jingda'
把javascript的执行过程细化可以看出:输入一段代码,编译之后,会生成两部分内容:
执行上下文
和可执行代码
执行上下文是javascript执行一段代码时的运行环境
这样说明一下:执行上下文里面应该是这样的:在后面学习有关执行上下文的时候会再说明。
2、执行阶段 js引擎开始执行“可执行代码”,按照顺序一行行的执行。
‘一起学习吧’
- END -