【避坑】请谨慎使用 undefined !

作者: jie 分类: JavaScript 发布时间: 2023-08-08 13:31

1. undefined 的全局修改问题

let undefined ="小前端大梦想";

输出结果: Uncaught SyntaxError: Identifier 'undefined' has already been declared

解释:  这步是在外层全局去声明一个变量undefined值为小前端大梦想,由于全局已经有这个变量了所以声明会报错

//众所周知var可以重复声明
var undefined ="小前端大梦想";

输出结果: console.log(undefined)

这里打印依旧是值undefined,而不是小前端大梦想

解释:  这样的确可以(修改)而且不报错, 但是由于undefined这个是不可枚举、不可写、不可配置的所以打印输出的值是undefined

总结: 如果平常开发中直接使用undefined没有任何问题,因为不可改嘛; 但是问题不是出在这,而是出在undefined不是关键字上

2. 关键词的问题

let null ="789";

输出结果: Uncaught SyntaxError: Unexpected token 'null'

解释:  报错由于 null  是关键字所以不能定义名为 null 的变量。讲通俗点就是null是人家创造 js 语言的时候就用了这个null,你用不了。

undefined不是关键字因此可以作为变量名去声明;

console.log(undefined)//undefined

function bar(){
    let undefined ="小前端大梦想";    
    return undefined
}
console.log(bar()); //输出结果: 小前端大梦想;

console.log(undefined); //输出结果: undefined

由这个输出可以清楚地说明, undefined不是被修改了

而是定义了一个名为 undefined 的变量根据作用域查找规则找到了这个变量而不是正主 undefined 而已.

注意:这里是在函数作用域中而不是全局作用域,因此可以声明这个 undefined 变量

总结: 在上面的函数返回小前端大梦想不是因为undefined被修改了而是你定义了一个变量undefined跟人家名重复了,所以返回的时候就近原则拿的是你定义而不是js语言定义的。

3. vue 等框架/库的操作

根据前面铺垫,那么我只需要拿到最外层的undefined即可,那么拿他也有很多办法。框架和库通常使用void 0去获取undefined

void 运算符对给定的表达式进行求值,然后返回 \`undefined\`

function bar(){
    let undefined ="小前端大梦想";
    return void 0
}
console.log(bar())//undefined;

当然除了 void 0 这种写法,你用 window.undefinedglobalThis.undefined 也完全没有问题,只是 B 格不够高而已。

解释:
由于 undefined 不是关键字。根据变量查找规则很有可能找错。

为了防止我拿到并返回的是你定义的名为 undefined  的变量而不是 undefined 本身,所以我要去那一个稳定稳妥百分百是 undefined 的值,void0 也好  window.undefined/globalThis.undefined 也好只是为了拿到真实的js语言定义的undefined变量

总结: 可以通过 void 0window.undefinedgloblThis.undefined 获取最外面的 undefined:

  • undefined 不可以修改;
  • undefined 不是关键字,因此可以定义变量名为 undefined;
  • 我们无法保证拿到的 undefined 是正主 undefined 还是某个人定义的变量名为 undefined 的变量,所以往往在库中使用 void 去求一个 undefined(正主);

发表回复