JavaScript提升 - 移动和停留什么-js教程-PHP中文网

JavaScript提升 - 移动和停留什么

心靈之曲

发布： 2025-01-30 08:42:01

原创

815人浏览过

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存在，但尚未赋值。

立即学习“Java免费学习笔记（深入）”；

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提升 - 移动和停留什么的详细内容，更多请关注php中文网其它相关文章！