JavaScript提升 - 移动和停留什么

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript提升 - 移动和停留什么》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

JavaScript提升机制如同舞台搭建，在代码执行前（“创建阶段”），所有声明会被移动到其作用域顶部。这就好比舞台工作人员在幕布升起前将道具摆放到位。需要注意的是，只有声明被移动，初始化操作则保留在原位。

根据ECMAScript规范，此行为是JavaScript在创建阶段创建“词法环境”的一部分。简单来说，JavaScript会在运行代码前对其进行“预扫描”。

var 提升:

console.log(x); // 输出: undefined
var x = 5;
console.log(x); // 输出: 5

var声明的变量x被提升到作用域顶部，但x = 5的初始化操作未被提升。因此，第一次console.log(x)输出undefined，而非报错，因为变量x存在，但尚未赋值。

let 和 const 提升及暂时性死区 (TDZ):

console.log(y); // 抛出错误: ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 输出: 10

let和const声明的变量也会被提升，但它们被放置在暂时性死区 (TDZ) 中，直到初始化的那一行代码被执行。在初始化之前访问let或const变量会导致ReferenceError错误。这与var不同，var在类似情况下会返回undefined。

TDZ 意味着在初始化之前访问const声明的变量也会报错。这与var不同，var在类似情况下会返回undefined。ECMAScript规范称此行为为“暂时性死区语义”，简单来说，就是JavaScript防止我们在变量初始化之前访问它。

更复杂的例子:

function setUpEventHandler() {
  handleClick(); // 可执行!

  const config = {
    debug: true,
  };

  function handleClick() {
    if (config?.debug) {
      // undefined!
      console.log("debug mode");
    }
  }
}

setUpEventHandler();

函数声明handleClick被提升，因此可以提前调用。但config对象则没有被提升，所以handleClick内部访问config时，config尚未被初始化，导致config.debug为undefined。

类提升:

类的提升机制与函数不同。

const dog = new Animal(); // 抛出错误!

class Animal {
  constructor() {
    this.type = "mammal";
  }
}

类声明在初始化之前无法访问，它们一直处于TDZ，直到其定义被评估。这意味着在声明之前无法使用类。

总结: 记住，虽然声明被提升到顶部，但初始化操作仍然保留在原位。

今天关于《JavaScript提升 - 移动和停留什么》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！