@拭目以待：首發于空變量為什么賦值為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); // 未進入， 因為該值已經聲明 且 已初始化
}

@拭目以待

個人站點：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公眾賬號：loveJavascript

《野生前端工程師》專輯中所有文章均為@拭目以待 原創，轉載請注明出處。