常见js面试题之一:

提示:又是一道常见的前端面试题,什么是暂时性死区?


问题描述:

        console.log(a);
        var a = 1;
日志输出:undefined
        console.log(a);
        let a = 1;

在这里插入图片描述

下面我们可以看到这里的日志输出出现了报错,

‘Uncaught ReferenceError: Cannot access ‘a’ before initialization’
未捕获的引用错误:在初始化之前无法访问“a”

原因分析:

为什么会出现这种情况呢?这就是我们今天要了解的js中的暂时性死区( temporal dead zone,简称TDZ );
接下来我们看一下关于ES6标准中关于暂时性死区的解释:

The variables are created when their containing Lexical Environment is
instantiated but may not be accessed inany way until the variable’s
LexicalBinding is evaluated.

翻译过来的意思就是:

当程序的控制流程在新的作用域(module function 或 block
作用域)进行实例化时,在此作用域中用let/const声明的变量会先在作用域中被创建出来,但因此时还未进行词法绑定,所以是不能被访问的,如果访问就会抛出错误。因此,在这运行流程进入作用域创建变量,到变量可以被访问之间的这一段时间,就称之为暂时死区。

造成该错误的主要原因是:ES6新增的let、const关键字声明的变量会产生块级作用域,如果变量在当前作用域中被创建之前被创建出来,由于此时还未完成语法绑定,如果我们访问或使用该变量,就会产生暂时性死区的问题,由此我们可以得知,从变量的创建到语法绑定之间这一段空间,我们就可以理解为‘暂时性死区’

那么还有别的会造成引发暂时性死区的现象吗?

let/const关键字未出现之前,typeof运算符是百分之百安全的,现在也会引发暂时性死区的发生,像import关键字引入公共模块、使用new class创建类的方式,也会引发暂时性死区,究其原因还是变量的声明先与使用

与上述关键字相反、var、function等关键字却不会受到TDZ(暂时性死区)的影响,如果在变量常见之前访问,返回结果为undefined

提示:

提示:TDZ(暂时性死区)是一个很重要的概念,在很多的面试环节都有可能问到该概念,其影响let、const、import、class、typeof等关键字的可用性,不容忽视;因此大家一定要养成良好的变成习惯,变量的使用一定要在声明时候使用,否则就会引发‘暂时性死区’

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐