js代码执行顺序简单介绍,javascript代码怎么运行

本篇文章给大家谈谈js代码执行顺序简单介绍，以及javascript代码怎么运行，希望对各位有所帮助，不要忘了收藏本站喔。

JavaScript 代码的执行流程

实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 。

JavaScript 的执行机制：先编译，再执行

• JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译GPT改写。
• 在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数
• 如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。

经过编译后，会生成两部分内容：执行上下文（Execution context）和可执行代码

执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等，在执行上下文中存在一个变量环境的对象（Viriable Environment）这样就生成了变量环境对象。接下来 JavaScript 引擎会把声明以外的代码编译为字节码

执行上下文
由变量环境、词法环境、可执行代码环境组成，在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为 outer。

• 当 JavaScript 执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。
• 当调用 一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。
• 当使用 eval 函数的时候，eval 的代码也会被编译，并创建执行上下文

调用栈
调用栈就是用来管理函数调用关系的一种数据结构。
JavaScript 的调用栈JavaScript 引擎正是利用栈的这种结构来管理执行上下文的。在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。

调用栈是 JavaScript 引擎追踪函数执行的一个机制，当一次有多个函数被调用时，通过调用栈就能够追踪到哪个函数正在被执行以及各函数之间的调用关系。在分析复杂结构代码，或者检查 Bug 时，调用栈都是非常有用的。
除了通过断点来查看调用栈，你还可以使用 console.trace()来输出当前的函数调用关系

• 每调用一个函数，JavaScript 引擎会为其创建执行上下文，并把该执行上下文压入调用栈，然后 JavaScript 引擎开始执行函数代码。
• 如果在一个函数 A 中调用了另外一个函数 B，那么 JavaScript 引擎会为 B 函数创建执行上下文，并将 B 函数的执行上下文压入栈顶。
• 当前函数执行完毕后，JavaScript 引擎会将该函数的执行上下文弹出栈。当分配的调用栈空间被占满时，会引发“堆栈溢出”问题。

解决栈溢出问题

function foo() { 
  setTimeout(foo, 0) 
} 
foo()

foo像setTimeout、setInterval、promise 这样的全局函数不是js 的一部分，而是webapi 部分。当遇到 webApi 时，会将其回调函数(foo)交给webapis 处理，此时 调用栈 中foo 函数执行完毕，出栈，栈为空； 回调函数会被发送到任务队列中，等待eventloop事件循环将其捞出重新放入到堆栈中…
参考：https://juejin.im/post/5d2d146bf265da1b9163c5c9#heading-15

作用域（scope）
作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。ES6之前只有两种：全局作用域和函数作用域。ES6 为了解决变量提升带来的缺陷引入了 let 和 const 关键字，形成块作用域。

JavaScript 是如何支持块级作用域的

由于 JavaScript 的变量提升存在着变量覆盖、变量污染等设计缺陷，所以 ES6 引入了块级作用域关键字来解决这些问题。
块级作用域就是通过词法环境的栈结构来实现的，而变量提升是通过变量环境来实现，通过这两者的结合，JavaScript 引擎也就同时支持了变量提升和块级作用域了。

• 函数内部通过 var 声明的变量，在编译阶段全都被存放到变量环境里面了。
• 通过 let 声明的变量，在编译阶段会被存放到词法环境（Lexical Environment）中。
• 在函数的作用域块内部，通过 let 声明的变量并没有被存放到词法环境中。
  

在词法环境内部，维护了一个小型栈结构，栈底是函数最外层的变量，进入一个作用域块后，就会把该作用域块内部的变量压到栈顶；当作用域执行完成之后，该作用域的信息就会从栈顶弹出，这就是词法环境的结构。需要注意下，我这里所讲的变量是指通过 let 或者 const 声明的变量。这个区域中的变量并不影响作用域块外面的变量。查找一个变量的时候，沿着词法环境的栈顶向下查询，如果在词法环境中的某个块中查找到了，就直接返回给 JavaScript 引擎，如果没有查找到，那么继续在变量环境中查找。

作用域链
每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为 outer。当一段代码使用了一个变量时，JavaScript 引擎首先会在“当前的执行上下文”中查找该变量，如果在当前的变量环境中没有查找到，那么 JavaScript 引擎会继续在 outer 所指向的执行上下文中查找。我们把这个查找的链条就称为作用域链。

bar 函数和 foo 函数的 outer 都是指向全局上下文的，这也就意味着如果在 bar 函数或者 foo 函数中使用了外部变量，那么 JavaScript 引擎会去全局执行上下文中查找。

词法作用域

词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。

词法作用域是代码编译阶段就决定好的，和函数是怎么调用的没有关系。

词法作用域和动态作用域

1、作用域：
作用域是指程序代码中定义变量的区域,JavaScript采用词法作用域，也就是静态作用域.

2、词法作用域和动态作用域
因为JavaScript采用的是词法作用域，函数的作用域在函数定义的时候就决定了。
而与词法作用域对应的是动态作用域，函数的作用域是在函数调用的时候才决定的。
动态作用域并不关心函数和作用域是如何声明以及在何处声明的，只关心他们从何处调用。
换句话说，作用域链是基于调用栈的，而不是代码中的作用域嵌套。

闭包

产生闭包的核心有两步：第一步是需要预扫描内部函数；第二步是把内部函数引用的外部变量保存到堆中。在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包。

从图中可以看出来，当调用 bar.getName 的时候，右边 Scope 项就体现出了作用域链的情况：Local 就是当前的 getName 函数的作用域，Closure(foo) 是指 foo 函数的闭包，最下面的 Global 就是指全局作用域，从“Local–>Closure(foo)–>Global”就是一个完整的作用域链。

闭包是怎么回收的
如果该闭包会一直使用，那么它可以作为全局变量而存在；但如果使用频率不高，而且占用内存又比较大的话，那就尽量让它成为一个局部变量。
通常，如果引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭；但如果这个闭包以后不再使用的话，就会造成内存泄漏。

从JavaScript执行上下文的视角讲清楚this

this只有这三种:

• 全局执行上下文中的 this，作用域链的最底端包含了 window 对象，全局执行上下文中的 this 也是指向 window 对象。
• 函数中的 this
  • 通过函数的 call 方法设置
  • 通过对象调用方法设置，在全局环境中调用一个函数，函数内部的 this 指向的是全局变量 window。通过一个对象来调用其内部的一个方法，该方法的执行上下文中的 this 指向对象本身
  • 通过构造函数中设置
• eval 中的 this。

new CreateObj()
执行 new CreateObj() 的时候，JavaScript 引擎做了如下四件事：

  var tempObj = {}
  CreateObj.call(tempObj)
  return tempObj

• 首先创建了一个空对象 tempObj；
• 接着调用 CreateObj.call 方法，并将 tempObj 作为 call 方法的参数，这样当 CreateObj 的执行上下文创建时，它的 this 就指向了 tempObj 对象；
• 然后执行 CreateObj 函数，此时的 CreateObj 函数执行上下文中的 this 指向了 tempObj 对象；
• 最后返回 tempObj 对象。

this 的设计缺陷以及应对方案

• 嵌套函数中的 this 不会从外层函数中继承
  • 第一种是把 this 保存为一个 self 变量，再利用变量的作用域机制传递给嵌套函数
  • 第二种是继续使用 this，但是要把嵌套函数改为箭头函数，因为箭头函数没有自己的执行上下文，所以它会继承调用函数中的 this

var myObj = {
  name : "极客时间", 
  showThis: function(){
    console.log(this)
    function bar(){console.log(this)}
    bar()
  }
}
myObj.showThis()

• 普通函数中的 this 默认指向全局对象 window，在默认情况下调用一个函数，其执行上下文中的 this 是默认指向全局对象 window 的。
  • 如果要让函数执行上下文中的 this 指向某个对象，最好的方式是通过 call 方法来显示调用
  • 这个问题可以通过设置 JavaScript 的“严格模式”来解决。在严格模式下，默认执行一个函数，其函数的执行上下文中的 this 值是 undefined，这就解决上面的问题了

this总结：

• 当函数作为对象的方法调用时，函数中的 this 就是该对象；
• 当函数被正常调用时，在严格模式下，this 值是 undefined，非严格模式下 this 指向的是全局对象 window；
• 嵌套函数中的 this 不会继承外层函数的 this 值。

最后，我们还提了一下箭头函数，因为箭头函数没有自己的执行上下文，所以箭头函数的 this 就是它外层函数的 this