【避坑】请谨慎使用 undefined !
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.undefined
、globalThis.undefined
也完全没有问题,只是 B 格不够高而已。
解释:
由于 undefined
不是关键字。根据变量查找规则很有可能找错。
为了防止我拿到并返回的是你定义的名为 undefined
的变量而不是 undefined
本身,所以我要去那一个稳定稳妥百分百是 undefined
的值,void0
也好 window.undefined
/globalThis.undefined
也好只是为了拿到真实的js
语言定义的undefined
变量
总结: 可以通过 void 0
、window.undefined
、globlThis.undefined
获取最外面的 undefined:
undefined
不可以修改;undefined
不是关键字,因此可以定义变量名为 undefined;- 我们无法保证拿到的
undefined
是正主 undefined 还是某个人定义的变量名为 undefined 的变量,所以往往在库中使用void
去求一个 undefined(正主);