前端-答应我别再用undefined了好吗

460 阅读2分钟

前言

        众所周知,undefined是 JS 众多基本数据类型之一,用于存放 JavaScript 中未定义的值。然而,如果我告诉你undefined在 JS 中竟然不是一个关键字,你敢信😓?由于布兰登·艾克的设计失误,又让后端那群小子多了一个嘲笑 JS 的理由。且看我慢慢分析⬇。

一、undefined理解

解释: undefined其实是全局对象window的一个属性,除了undefined 之外,类似的还有 NaNInfinity 也是全局对象的属性。

  window.undefined === undefined   // 返回true

image.png

二、如何证明undefined是window的一个属性?

注意: 通过console.log打印window对象后仔细查找,发现并没有找到undefined这个属性。

原因: 这是因为,它的属性描述对象是:不可写、不可枚举、不可配置,所以无法通过console查看。

解决办法: 我们可以通过Reflect.getOwnPropertyDescriptor(obj, Key)方法,获取对象的描述符。

image.png

结论: 至此,我们可以知道,undefined 确实是 window 上的一个属性,而并非JS关键字。

三、为什么不能用undefined?

原因: 在ES5标准之前,undefined是可以被修改的,虽然自ES5标准之后,undefined是一个不能被配置(non-configurable),不能被重写(non-writable)的属性。但在一部分低级浏览器(IE7-IE8)中、或者局部作用域中undefined依然可以被修改,这样可能就会出大问题。

    function fun() {
        // 声明一个变量名为undefined
        let undefined = 1;
        // 变量a的数据类型定义为undefined
        let a = undefined;
        // 此时,undefined的值就被修改了,输出 1
        console.log(a);
    }

你可能会想:正常人谁会把undefined写为变量名?

0D9B6F00-696D-4839-BA3E-7DBDF4B7ADFE.jpg

但是在各种插件及编译器盛行的今天,代码经过层层编译打包,面向千万级用户访问,再看看你身边的那个队友,你怕了吗?

image.png

所以,从现在开始,拒绝undefined!!!

四、使用 void 0 代替 undefined

解释: void 是 JavaScript 中非常重要的关键字,该操作符用来返回一个undefined

void 0 优点:

  1. void 0 总是返回 undefined,无论全局属性 undefined 是否被修改,它都能确保其值是 undefined
  2. 使用 void 0 比使用 undefined 节省3个字节大小。
  3. void 0 几乎可以兼容所有的浏览器。

目前,几乎所有的工具库和代码压缩工具都在使用 void 0 来代替 undefined

所以,答应我,别再用undefined了好吗?

5F8D8820-1825-44d9-A9D2-5E0EA67A8121.png