JS系列(三) - JavaScript的运行过程

一. 全局代码的执行过程

1.1. ECMA的版本说明

在ECMA早期的版本中（ECMAScript3），代码的执行流程的术语和ECMAScript5以及之后的术语会有所区别：

• 目前网上大多数流行的说法都是基于ECMAScript3版本的解析，并且在面试时问到的大多数都是ECMAScript3的版本内容；

• 但是ECMAScript3终将过去， ECMAScript5必然会成为主流，所以最好也理解ECMAScript5甚至包括ECMAScript6以及更好版本的内容；

• 事实上在TC39（ ECMAScript5 ）的最新描述中，和ECMAScript5之后的版本又出现了一定的差异；

那么我们课程按照如下顺序学习：

• 通过ECMAScript3中的概念学习JavaScript执行原理、作用域、作用域链、闭包等概念；

• 通过ECMAScript5中的概念学习块级作用域、let、const等概念；

事实上，它们只是在对某些概念上的描述不太一样，在整体思路上都是一致的。

1.2. 全局代码初始化

假如我们有下面一段代码，它在JavaScript中是如何被执行的呢？

var name = "why"
function foo() {
  var name = "foo"
  console.log(name)
}

var num1 = 20
var num2 = 30
var result = num1 + num2

foo()

1.2.1. 初始化全局对象

js引擎会在执行代码之前，会在堆内存中创建一个全局对象：

• Global Object（GO） 该对象 所有的作用域（scope）都可以访问；

• 里面会包含Date、Array、String、Number、setTimeout、setInterval等等；

• 其中还有一个window属性指向自己；

全局对象

内存中创建一个全局对象

1.2.2. 执行上下文（EC）

在 JavaScript 引擎内部，有一个执行上下文栈（Execution Context Stack，简称 ECS），它是用于执行代码的调用栈，存储着当前正在执行的执行上下文。

当 JavaScript 引擎开始执行代码时，它会先创建一个全局执行上下文（Global Execution Context，简称 GEC），并将其推入 ECS 中，表示当前正在执行全局的代码块。

GEC 包含了两部分内容：

• 第一部分是在代码执行前，JavaScript 引擎会扫描全局作用域下的变量和函数，将它们添加到全局对象（Global Object）中，并分配内存空间，但是并不会赋值。这个过程称为变量的作用域提升（hoisting）。

• 第二部分是在代码执行中，JavaScript 引擎会对变量进行赋值，并执行其他的函数。

执行上下文

1.3. 全局代码的执行

1.3.1. VO和GO的理解

每一个执行上下文会关联一个VO（Variable Object，变量对象），变量和函数声明会被添加到这个VO对象中。

VO的描述

变量对象是一个抽象的概念，在 JavaScript 引擎内部，它被实现为一个与当前执行上下文相关联的对象。

• 在全局执行上下文中，变量对象是全局对象（Global Object）；

• 在函数执行上下文中，变量对象是一个称为活动对象（Activation Object）的对象。

当全局代码被执行的时候，VO就是GO对象了

• 当全局代码被执行时，变量对象（Variable Object，简称 VO）就是全局对象（Global Object，简称 GO）了。

• 全局对象是在 JavaScript 引擎内部创建的一个唯一对象，它在全局作用域下被访问，并且可以存储全局变量、函数、内置对象和浏览器提供的 API 等等。

全局代码执行

1.3.2. 全局代码执行过程（执行前）

GO 对象在执行全局代码之前就已经被创建，并且包含了一些内置对象和方法，例如 Object、Array、String、Number、Math、JSON、setTimeout、setInterval 等等。

当全局执行上下文被创建时，变量对象 VO 会被设置为 GO 对象，并且全局作用域下的变量和函数会被添加到变量对象中。

全局代码执行前

1.3.3. 全局代码执行过程（执行后）

代码执行后就会给变量进行复制操作：

全局代码执行后

二. 函数代码的执行过程

2.1. 函数代码的执行过程

2.1.1. 函数执行的概念描述

在 JavaScript 中，当函数被调用时，会创建一个函数执行上下文（Functional Execution Context，简称 FEC），并将其压入执行上下文栈（Execution Context Stack，简称 ECS）中，表示当前正在执行该函数的代码块。

函数执行上下文关联的变量对象（Variable Object，简称 VO）是一个称为活动对象（Activation Object，简称 AO）的对象。

• 在进入函数执行上下文时，JavaScript 引擎会创建一个 AO 对象，并将其关联到当前的执行上下文中。

• AO 对象是一个包含函数的参数、函数声明和变量声明的列表。

• 它的初始值使用函数的参数列表作为参数并进行初始化。

• 这个 AO 对象会作为执行上下文的变量对象（VO）来存储变量的初始化。

当函数执行完毕后，其执行上下文会从 ECS 中弹出，AO 对象会被垃圾回收，所以不能在函数执行完毕后再访问该函数的 AO 对象。

2.1.2. 函数代码执行过程（执行前）

函数代码执行前

2.1.3. 函数代码执行过程（执行后）

函数代码执行后

2.2. 作用域、作用域链

2.2.1. 作用域、作用域链的理解

在 JavaScript 中，当进入一个执行上下文时，执行上下文也会关联一个作用域链（Scope Chain）。

• 作用域链是一个对象列表，用于变量标识符的查找和求值。

• 当进入一个执行上下文时，这个作用域链被创建，并且根据代码类型，添加一系列的对象；

作用域链是由当前执行上下文的变量对象（VO）和所有外部环境的作用域链组成的。

作用域链的描述

作用域链

具体内容可以查看视频中的讲解过程。

2.2.2. 作用域、作用域链面试题

接下来我们可以利用变量的提升过程，做一些面试题：

作用域提升的面试题

// 1.面试题一:
var n = 100
function foo() {
  n = 200
}
foo()

console.log(n)

// 2.面试题二:
var n = 100
function foo() {
  console.log(n)
  var n = 200
  console.log(n)
}

foo()

// 3.面试题三:
var n = 100

function foo1() {
  console.log(n)
}
function foo2() {
  var n = 200
  console.log(n)
  foo1()
}
foo2()

// 4.面试题四:
var n = 100
function foo() {
  console.log(n)
  return
  var n = 200
  }
foo()

// 5.在开发中可能会出现这样错误的写法
function foo() {
  message = "Hello World"
}
foo()
console.log(message)

// 6.面试题五:
function foo() {
  var a = b = 100
  }
foo()
console.log(b)

2.3. 闭包和闭包的内存泄漏

2.3.1. 闭包的迷惑之处

闭包是JavaScript中一个非常容易让人迷惑的知识点：

• 有同学在深入JS高级的交流群中发了这么一张图片（这张图来自你不知道的JavaScript）；

• 并且闭包也是群里面大家讨论最多的一个话题；

你不知道的JavaScript

闭包确实是JavaScript中一个很难理解的知识点，接下来我们就对其一步步来进行剖析，看看它到底有什么神奇之处。

2.3.2. 闭包的概念定义

这里先来看一下闭包的定义，分成两个：在计算机科学中和在JavaScript中。

在计算机科学中对闭包的定义（维基百科）：

• 闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）；

• 是在支持 头等函数 的编程语言中，实现词法绑定的一种技术；

• 闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）；

• 闭包跟函数最大的区别在于，当捕捉闭包的时候，它的 自由变量 会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行；

闭包的概念出现于60年代，最早实现闭包的程序是 Scheme，那么我们就可以理解为什么JavaScript中有闭包：

• 因为JavaScript中有大量的设计是来源于Scheme的；

我们再来看一下MDN对JavaScript闭包的解释：

• 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；

• 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；

• 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来；

那么我的理解和总结：

• 一个普通的函数function，如果它可以访问外层作用于的自由变量，那么这个函数就是一个闭包；

• 从广义的角度来说：JavaScript中的函数都是闭包；

• 从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用于的变量，那么它是一个闭包；

2.3.3. 闭包的形成过程

当我们的代码没有闭包时，往往代码会有非常大的局限性：

• 如果一个函数需要使用到外面作用域的变量，那么必须将所有的变量全部传入进去。

var name = "why"
var age = 18
var height = 1.88
var address = "广州市"
var intro = "了解真相, 你才能获得真正自由!"


function foo(name, age, height, address, intro, num1, num2) {
  var message = "Hello World"
  console.log(message, name, age, height, address, intro)

  function bar() {
    console.log(name)
  }

  bar()
}


foo(name, age, height, address, intro, 20, 30)

有了闭包之后，我们可以进行如下代码的操作：

function createAdder(count) {
  function adder(num) {
    return count + num
  }

  return adder
}

var adder5 = createAdder(5)
adder5(100)
adder5(55)
adder5(12)

var adder8 = createAdder(8)
adder8(22)
adder8(35)
adder8(7)

console.log(adder5(24))
console.log(adder8(30))

2.3.4. 闭包的内存泄漏

使用闭包可能会导致内存泄漏：

• 因为闭包会引用外部函数的变量对象，如果这个闭包被长期保存，那么外部函数的变量对象就会一直存在内存中，无法被垃圾回收。

• 因此，在使用闭包时，需要注意内存的管理。

那么我们为什么经常会说闭包是有内存泄露的呢？

• 在上面的案例中，如果后续我们不再使用add10函数了，那么该函数对象应该要被销毁掉，并且其引用着的父作用域AO也应该被销毁掉；

• 但是目前因为在全局作用域下add10变量对0xb00的函数对象有引用，而0xb00的作用域中AO（0x200）有引用，所以最终会造成这些内存都是无法被释放的；

• 所以我们经常说的闭包会造成内存泄露，其实就是刚才的引用链中的所有对象都是无法释放的；

那么，怎么解决这个问题呢？

• 因为当将add8设置为null时，就不再对函数对象0xb00有引用，那么对应的AO对象0x200也就不可达了；

• 在GC的下一次检测中，它们就会被销毁掉；

function createAdder(count) {
  function adder(num) {
    return count + num
  }

  return adder
}

var adder5 = createAdder(5)
adder5(100)
adder5(55)
adder5(12)

var adder8 = createAdder(8)
adder8(22)
adder8(35)
adder8(7)

console.log(adder5(24))
console.log(adder8(30))

// 永远不会再使用adder8
// 内存泄漏: 对于那些我们永远不会再使用的对象, 
// 但是对于GC来说, 它不知道要进行释放的对应内存会依然保留着
adder8 = null