大家好我是安利君
写在最前面
最近有个文章很火啊叫vue为什么禁用undefined。我看了一下这个文章一会薛定谔一会二象性的把简单的问题说的很复杂。 如果说好的程序是让初级工程师能用好,那么一篇好的文章也应该是能用最简单的话讲明白而不是套用名词去过分修饰自己的文章。
正文
undefined 的问题举几个demo 就可以说明
demo1 undefined 的全局修改问题
let undefined ="anlijun";
输出结果: Uncaught SyntaxError: Identifier 'undefined' has already been declared
解释: 这步是在外层全局去声明一个变量undefined 值为anlijun,由于全局已经有这个变量了所以声明会报错
//众所周知var可以重复声明
var undefined ="anlijun";
输出结果: console.log(undefined)//这里打印依旧是值undefined 而不是 anlijun
解释: 这样的确可以(修改)而且不报错
但是由于 undefined 这个是 不可枚举不可写 不可配置的所以打印输出的值是undefined
demo1的总结
如果只看demo1 那么平常开发中直接使用undefined 没有任何问题,因为不可改嘛; 但是问题不是出在这,而是出在undefined不是关键字上,详细看demo2
demo2 关键词的问题
let null ="789";
输出结果: Uncaught SyntaxError: Unexpected token 'null'
解释: 报错 由于null 是关键字所以不能定义名为null的变量。讲通俗点就是null 是人家创造js语言的时候就用了这个null,你用不了。
而 undefined不是关键字因此可以作为变量名去声明;
//详细案例
console.log(undefined)//undefined
function bar(){
let undefined ="anlijun";
return undefined
}
console.log(bar())
输出结果: anlijun;
console.log(undefined);
输出结果: undefined
/*
由这个输出可以清楚地说明,
undefined 不是被修改了 而是定义了一个名为undefined的变量根据作用域查找规则找到了这个变量而不是正主undefined而已.
*/
注意:这里是在函数作用域中而不是全局作用域,因此可以声明这个undefined变量,对于这里不明白的同学可以看我这篇文章 [JS基础强化] var let const 你分得出区别吗? - 掘金 (juejin.cn)
demo2的总结 在上面的函数返回anlijun不是因为undefined被修改了而是你定义了一个变量undefined跟人家名重复了,所以返回的时候就近原则拿的是你定义而不是js语言定义的。
demo3 vue等框架/库的操作
根据前面铺垫,那么我只需要拿到最外层的undefined即可,那么拿他也有很多办法。
框架和库通常使用void 0去获取undefined。
void
运算符对给定的表达式进行求值,然后返回 undefined
。
function bar(){
let undefined ="anlijun";
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变量
demo3总结 可以通过 void 0 window.undefined globlThis.undefined获取最外面的undefined
结论
- undefined不可以修改;
- undefined不是关键字,因此可以定义变量名为undefined;
- 我们无法保证拿到的undefined 是正主undefined 还是某个人定义的变量名为undefined的变量,所以往往在库中使用void 去求一个undefined(正主);