vue 访问 const 变量_知道临时死区你才能更好的使用 JS 变量

首先，来个一个简单的问题。下列哪段代码会产生错误：

第一个创建实例，然后定义使用的类：

new Car('red'); // 是否会报错?

class Car {
    
  constructor(color) {
    
    this.color = color;
  }
}

或者先于函数定义之前调用函数：

greet('World'); // 是否会报错?

function greet(who) {
    
  return `Hello, ${who}!`;
}   

正确的答案是:第一个代码片段会报 ReferenceError: Cannot access 'Car' before initialization 错误。第二个代码正常运行。

如果你的答案与上述不同，或者你在不知道这背后的原理是什么而进行了猜测，那么你需要掌握临时死区(TDZ)的知识。

TDZ 管理 let、const 和 class 语法的可用性。变量在 JS 中的工作方式非常重要。

1.什么是临时死区

咱们先从一个简单的 const 变量声明开始。首先声明并初始化变量，然后访问它，一切正常运行：

const white = '#FFFFFF';

white; // => '#FFFFFF'

那如果在 声明之前访问 white 变量，会怎么样》

white; // throws `ReferenceError`

const white = '#FFFFFF';

white;

在 const white = '#FFFFFF' 语句之前的代码行中，变量 white 位于临时死区。

在 TDZ 中访问 white 后，JS抛出ReferenceError: Cannot access 'white' before initialization