预解析和变量、函数提升

JavaScript引擎执行js代码 分两步： 预解析、代码执行

1 预解析

js引擎会把js里面所有的var还有function提升到当前作用域的最前面

• 变量预解析（变量提升）

  • 把所有变量声明提升到当前作用域的最前面
  • 不提升赋值操作

• 函数预解析（函数提升）

  • 把所有函数声明提升到当前作用域的最前面
  • 不调用函数
  • 函数表达式声明的函数，调用时，一定要在函数表达式的下面

2 代码执行

按照代码书写的顺序从上往下执行

3 代码示例

f1()
console.log(c)
console.log(b)
console.log(a)

function f1 () {
  var a = b = c = 9
  console.log(a)
  console.log(b)
  console.log(c)
}

如以上代码，经过预解析的变量提升和函数提升，上述代码相当于

function f1 () {
  var a = 9 // 局部变量
  b = 9 // 全局变量
  c = 9 // 全局变量
  console.log(a) // 9
  console.log(b) // 9
  console.log(c) // 9
}

f1()
console.log(c) // 9
console.log(b) // 9
console.log(a) // 报错：局部变量外部不能访问

这里需要特别注意的是：

var a = b = c = 9
// 相当于
var a = 9; b = 9; c = 9;

// 然而
var a = 9, b = 9, c = 9
// 相当于
var a = 9
var b = 9
var c = 9

如果 var a = b = c = 9 和 var a = 9, b = 9, c = 9 在函数中定义，那他们的作用域需要格外注意

如果文章对你有帮助，可以关注我。后期我会陆续发布一些平时学习和项目中踩过的坑，包括前端、Java、Python、MATLAB和数据库等等知识。希望对大家有所帮助。