JS 执行上下文

参考链接：

blog.csdn.net/weixin_3951… www.jianshu.com/p/6f8556b10…

function foo() {
  console.log(bar)
  var bar = 10
  var bar = function() {
    return 20
  }
  function bar() {
    return 30
  }
  console.log(bar)
}
foo();

代码中两个打印语句的结果分别是什么？

先来了解一下：

执行上下文(Execution Context): 函数执行前进行的准备工作（也称执行上下文环境）

关键词：单线程，执行栈（函数调用栈），先进后出，执行上下文的生命周期……

执行上下文的生命周期

执行上下文的生命周期有两个阶段：

1. 创建阶段（进入执行上下文）
2. 执行阶段（代码执行）

创建阶段：函数被调用时，进入函数环境，为其创建一个执行上下文，此时进入创建阶段。

执行阶段：执行函数中代码时，此时执行上下文进入执行阶段。

创建阶段的操作

1. 创建变量对象
   • 函数环境会初始化创建 Arguments对象（并赋值）
   • 函数声明（并赋值）
   • 变量声明，函数表达式声明（未赋值）
2. 确定this指向（this由调用者确定）
3. 确定作用域（词法环境决定，哪里声明定义，就在哪里确定）

执行阶段的操作

1. 变量对象赋值
   • 变量赋值
   • 函数表达式赋值
2. 调用函数
3. 顺序执行其它代码

"创建阶段对函数声明做赋值，变量及函数表达式仅做声明，真正的赋值操作要等到执行上下文代码执行阶段。"

优先级：函数声明优先 > 变量，函数表达式

// 所以实际执行过程
function foo() {
  function bar() {
    return 30
  }
  console.log(bar)
  var bar = 10
  var bar = function() {
    return 20
  }
  console.log(bar)
}
foo();