⏱️

变量提升(Hoisting)

💡
Notion Tip: Use this page to describe your approach to interviewing product candidates.
 

什么是变量提升

JavaScript 代码在执行过程中, JavaScript 引擎把(var修饰)变量的声明部分和函数的声明部分提升到代码'开头'
变量被提升后, 会给变量设置默认值 undefine
notion image

变量提升的本质

  • 被提升的变量和函数在代码中的位置是不变的
  • JS 引擎在编译阶段将其放入内存中(执行上下文)
一段 JS 代码在执行之前需要被 JS 引擎编译, 编译完成之后, 才会进入执行阶段
区分是否为编译性语言的标准应该「是否有中间代码产生」 JavaScript在执行前进行过编译(分词/词法分析、解析/句法分析以及生成代码)
notion image
  • 一段代码经过编译, 会才生成两部分内容
      1. 执行上下文(Execution context) ⇒ 是 JS 执行一段代码时的运行环境
      1. 可执行代码
 

代码中出现相同的变量或者函数怎么办?

function showName() {
console.log('极客邦');
}
showName();
function showName() {
console.log('极客时间');
}
showName();
结论: 一段代码如果定义了两个相同名字的函数, 那么最终生效的是最后一个函数
 

变量提升带来的问题

变量容易在不被察觉的情况下被覆盖掉
var myname = "极客时间"
function showName(){
  console.log(myname);
  if(0){
   var myname = "极客邦"
  }
  console.log(myname);
}
showName()
当刚执行到 showName 函数调用时, 执行上下文和调用栈状态如下图
notion image
当执行第一个 console.log(myname); 的时候, 此时有两个变量 myname , 一个在全局执行上下文, 另一个在 showName 函数执行上下文, 此时会优先使用函数执行上下文中的变量, 也就是 undefined
本应销毁的变量没有被销毁
for 循环结束, i 并没有被销毁

思考题

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

// 1