预编译阶段变量函数的提升 和 多个函数的执行顺序

下面这道题讲解变量和函数的提升

function fn(a, c){
  console.log('a', a)
  var a = 123
  console.log('a', a)
  console.log('c', c);
  function a(){}
  if(false){
    var d = 678
  }
  console.log('d', d);
  console.log('b', b);
  var b = function(){}
  console.log('b', b);
  function c(){}
  console.log('c', c);
}
fn(1, 2)

预编译
js的变量对象 AO对象 让js引擎去访问
1、创建AO对象
2、找形参和变量的申明
3、实参和形参相统一
4、找函数申明 会覆盖变量的申明

// 1 创建AO对象
AO = {

}

// 2找形参和变量（变量会提升）
AO = {
  a: undefined,
  c: undefined,
  d: undefined,  // 虽然有判断false, 在预编译阶段也会变量提升
  b: undefined,
}

// 3 实参和形参相统一  （如果fn函数里面没有 函数 a和 函数c ，执行函数时，打印就会打印 1，2了）
AO = {
  a: 1,
  c: 2,
  d: undefined,  // 虽然有判断false, 在预编译阶段也会变量提升
  b: undefined,
}

// 4 找函数申明 会覆盖变量的申明
AO = {
  a: function a(){},
  c: function c(){},
  d: undefined,  // 虽然有判断false, 在预编译阶段也会变量提升
  b: undefined,
}

// 打印的结果

// a ƒ a(){}
// a 123
// c ƒ c(){}
// d undefined
// b undefined
// b ƒ (){}
// c ƒ c(){}

如果没有函数重新覆盖的情况下，会打印形参的例子

function fn(a, b){
  console.log(a)
  console.log(b)
  var a = 11
  var b = 12
}
fn(1, 2)

// 打印的结果
// 1
// 2

多个函数的执行顺序

function fn1(){
  console.log('1111');
  fn2()
}
function fn2() {
  console.log('2222');
}
function fn3() {
  console.log('3333');
  fn4()
}
function fn4() {
  console.log('4444');
}
fn1()
fn3()

打印的是1111 2222 3333 4444

再看一个

function fn1(){
  console.log('1111');
  setTimeout(() => {
    fn2()
  }, 0);  
}
function fn2() {
  console.log('2222');
}

function fn3() {
  console.log('3333');
  fn4()
}
function fn4() {
  console.log('4443');
}
fn1()
fn3()

打印1111 3333 4444 2222

var i = 1;
function fn1(){
  console.log('1111');
  if(i++<100){
    fn1()
  }  
}
function fn2() {
  console.log('2222');
}

fn1()
fn2()

打印的是 1111 1111 1111 。。。。。。。 2222

可以看出只要函数里面没有异步任务， 函数会一直执行下去，知道函数执行完，才会执行接下来的函数。