JS执行流程&变量提升

写在前面

不知道作为初学者前端的你有没有这样的困扰，有关变量提升，执行栈，执行上下文，作用域，作用域链，闭包，this总是那么不能理解的特别清楚。

我自己就是这样一个典型的例子，感觉总在很多博客中查到有关这些知识的解释，但没过多久就忘记了。

如何真正的理解，并且把这些东西连成线一起学，是我写文章的目的。我希望自己可以通过把这些知识连着一起学。长路漫漫，一起加油吧。

一段代码的执行

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，而是报错了。
从上面的例子可以得到下面三个结论：

1. 使用了未声明的变量，那么js执行会报错
2. 在一个变量定义之前使用它，不会报错，但是该变量的值为undefined，而不是之后会定义的值
3. 在一个函数定义之前使用它，不会出错，函数能正确执行。

第一个结论很好理解，未声明报错。那第二，三个呢？
让我们看看之前说过的所谓变量提升：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引擎开始执行“可执行代码”，按照顺序一行行的执行。

写在后面

一名自学的小白，摸索着如何学习前端，组织语言可能也不是很好。文章是在学习了“浏览器的原理与解析”这门课的读后感，老师讲得很好，但东西也很多，感觉还是要靠自己慢慢学习。
我是婧大，在这里没有什么技术交流群，只有自己的微信号，如果你也是初学前端的人，欢迎加我好友哦，一起交流一起学习。

文章开头的那些知识点，也是希望能每天写一点，慢慢理解吧。