01_JS执行顺序

声明和赋值

• 变量的声明和赋值

var name = 'xy'; 
// 等价于
var name; // 变量声明
name = 'xy'; // 变量赋值

• 函数的声明和赋值

// 完整函数变量声明
function foo = function(){
    console.log('foo');
}

var foo; // 先声明变量
// 后赋值
foo = function(){
    console.log('foo');
}

变量提升

JS代码执行过程中，把变量的声明部分和函数的声明部分提升到代码开头，并给变量设置默认值undefined

showName();
console.log('name');
var name = 'xy';
function showName(){
    console.log('showName');
}
// showName
// undefined

​ 说明：变量提升，将变量 name 和函数 showName 提升到了代码开头，所以调用函数仍然被执行，name为默认值undefined

问题

1. 变量容易被覆盖
2. 本应销毁的变量没有被销毁

块级作用域

​ 为解决变量提升带来的问题，ES6新增

作用域:程序中定义变量的区域，该位置决定了变量的生命周期，即变量与函数的可访问范围

• 全局作用域：代码任何地方都可以访问，生命周期伴随着页面的生命周期

• 函数作用域：函数内部定义的变量或函数，只能在函数内部被访问，生命周期随函数执行结束而结束

• 块级作用域：一对大括号包裹的一段代码

• let & const

let：变量可以改变

const：变量不可以改变

​ 在执行上下文时 let 和 const 声明的变量被存放在词法环境中，独立存在

JS代码执行流程

JS代码 -> 编译 -> 执行

1. 编译

JavaScript 引擎编译JS代码，生成两部分

• 执行上下文

  • 执行一段代码的运行环境
  • 确定执行期间用到的this、变量、对象、函数等
  • 存在一个变量环境的对象，保存变量提升的内容
  • 如果存在相同变量或函数，后者会覆盖前者
  • 如果变量和函数同名，变量的声明被忽略

• 可执行代码

  • JavaScript引擎把声明以外的代码编译为可执行的字节码

2. 执行

按顺序一行一行执行可执行代码

例题：

showName() // 1
var showName = function() {
 console.log(2)
}
function showName() {
 console.log(1)
}
showName() // 2

学习资料

李兵：《07丨变量提升：JavaScript代码是按顺序执行的吗？》
《09丨块级作用域：var缺陷以及为什么要引入let和const？》