美文网首页
关于 typeof 的暂时性死区,了解一下

关于 typeof 的暂时性死区,了解一下

作者: 零之彼岸 | 来源:发表于2019-11-09 09:52 被阅读0次

    将知识转化为能力,核心是掌握20%行业核心技能,把学习培养成习惯,持续深耕,用能力解决问题,方能持续成长!那么基础好,就是必须条件。

    最近看 数据类型,知道数据类型判断有三种方式,typeof 是其中一种,主要用来判断基础类型(8中,string, number, boolean, undefined, object, function, symbol, bigint),但是也有缺点,“暂时性死区”。

    “暂时性死区”?这是什么?了解一下。下面进入正题。

    暂时性死区

    只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

    var tmp = 123;
     
    if (true) {
      tmp = 'abc'; // ReferenceError
      let tmp;
    }
    

    上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

    ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

    总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

    if (true) {
      // TDZ开始
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
     
      let tmp; // TDZ结束
      console.log(tmp); // undefined
     
      tmp = 123;
      console.log(tmp); // 123
    }
    

    上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”。

    “暂时性死区”也意味着 typeof 不再是一个百分之百安全的操作。

    typeof x; // ReferenceError
    let x;
    

    上面代码中,变量x使用let命令声明,所以在声明之前,都属于x的“死区”,只要用到该变量就会报错。因此,typeof运行时就会抛出一个ReferenceError。

    作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错。

    typeof undeclared_variable // "undefined"
    

    上面代码中,undeclared_variable是一个不存在的变量名,结果返回“undefined”。所以,在没有let之前,typeof运算符是百分之百安全的,永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。

    有些“死区”比较隐蔽,不太容易发现。

    function bar(x = y, y = 2) {
      return [x, y];
    }
     
    bar(); // 报错
    

    上面代码中,调用bar函数之所以报错(某些实现可能不报错),是因为参数x默认值等于另一个参数y,而此时y还没有声明,属于”死区“。如果y的默认值是x,就不会报错,因为此时x已经声明了。

    function bar(x = 2, y = x) {
      return [x, y];
    }
    bar(); // [2, 2]
    

    另外,下面的代码也会报错,与var的行为不同。

    // 不报错
    var x = x;
     
    // 报错
    let x = x;
    // ReferenceError: x is not defined
    

    上面代码报错,也是因为暂时性死区。使用let声明变量时,只要变量在还没有声明完成前使用,就会报错。上面这行就属于这个情况,在变量x的声明语句还没有执行完成前,就去取x的值,导致报错”x 未定义“。

    总结

    ES6 规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。

    总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

    相关文章

      网友评论

          本文标题:关于 typeof 的暂时性死区,了解一下

          本文链接:https://www.haomeiwen.com/subject/qkbgbctx.html