空变量为什么赋值为null

null

拭目以待 发布于

日常编码中,经常需要提前声明一些空变量,如:

var _table;
// 当条件满足时,获取 class 为 table 的元素
if(true){
    _table = document.querySelector('.table');
}
// 当条件不满足时,获取标签为 table 且存在属性 grid-manager的元素
else{
    _table = document.querySelector('table[grid-manager]');
}


通过上面的示例声明的变量 _table 是个空值, 在声明但未执行条件判断语句时, 该变量会被解释器自动赋值为 undefined ,如下所示:

var _table;
console.log(_table);  // => undefined
// 与直接显示声明为undefined效果相同。
var _table2 = undefined;
console.log(_table2);  // => undefined
console.log(_table === _table2); // ==> true


但是我们通常在使用一些变量时,需要验证这个变量是否已经声明,这对于程序的健壮性是很必要的。但是在执行中,会存在一些问题,如下所示:

// 实际的应用场景: 验证指定变量是否未声明,如果未声明则进行异常处理。
if(typeof age === 'undefined'){
    console.log('变量age 未声明'); // =>变量age 未声明
}
var _name;
if(typeof _name === 'undefined'){
    alert(_name); // 虽然_name已被声明,但是这里依然被执行
}


出现这种情况,主要是由于操作符 typeof 在检测变量时,声明但未初始化 与 未经声明的变量都会返回undefined。

虽然这个结果从逻辑上存在一定的合理性,但是却会影响我们的正常使用。 

所以我们在声明空变量时,需要对变量进行显式声明,即为其赋上空值 null , 如下所示:

var _name = null;
    if(typeof _name === 'undefined'){
    alert(_name); // 未进入, 因为该值已经声明 且 已初始化
}