JavaScript 执行过程

• javascript是单线程的解释性语言，
• 单线程就是先执行完一个，再执行另一个；
• 解释性语言就是先翻译一行，再执行一行，先翻译一行，再执行一行

语法分析

扫描一遍是否有低级语法错误

词法分析（预编译阶段）

例子

function foo (a) {
	console.log(a)
	var a = 123
	console.log(a)
	function a () {}
	console.log(a)
	var b = function () {}
	console.log(b)
	function d () {}
}
foo(1)

创建 AO 对象

AO {

}

找形参和变量声明

将形参和变量名作为 AO 属性名，值为 undefined

AO {
  a: undefined,
  b: undefined
}

形参和实参统一

AO {
  a: 1,
  b: undefined
}

函数体里找函数声明，赋值函数体

AO {
  a: [Function a],
  b: undefined,
  d: [Function d]
}

AO 创建完成后执行函数（执行阶段）

function foo (a) {
	console.log(a)                // [Function a]
	var a = 123
	console.log(a)                // 123
	function a () {}
	console.log(a)                // 123
	var b = function () {}
	console.log(b)                // [Function b]
	function d () {}
	console.log(d)                // [Function d]
}
foo(1)

解释

1. 创建 AO，并声明形参 -> 变量 -> 函数

• 形参 a = undefined，变量 a = undefined，变量 b = undefined
• 函数 foo 声明并赋值函数体
• 函数 a 声明并赋值函数体
• 函数 d 声明并赋值函数体

2. 执行并赋值

• 形参 a = 1， 函数 a 赋值已提前，输出 a => [Function a]
• 变量 a = 123，输出 a => 123
• 函数 a 赋值函数体 已被提前，还是 输出 a => 123
• 变量 b 赋值为函数体，输出 b => [Function b]
• 函数 d 赋值已提前，输出 d => [Function d]

例子

var a = "10"

function foo (a) {
  console.log(a)
  var a = 20
}

foo()       // undefined
foo(123)       // 123

总结

1. 先声明形参和变量，再声明函数
2. 变量提升 (声明和赋值都提前)

   function foo () {}
   foo()