JavaScript中直接寫(xiě)undefined的錯(cuò)誤及用法剖析
介紹
眾所周知,在JavaScript 語(yǔ)言中,一個(gè)沒(méi)有被賦值的變量會(huì)有個(gè)默認(rèn)值 undefined ,而 undefined 作為全局對(duì)象的一個(gè)屬性經(jīng)常會(huì)用作一些賦值返回,邏輯判斷等業(yè)務(wù)場(chǎng)景中。可本期要說(shuō)的是,盡量不要直接去拼寫(xiě) undefined 了,因?yàn)槟鞘遣惶珖?yán)謹(jǐn)?shù)男袨?,可能出現(xiàn)很多意外情況。
原因
我們經(jīng)常在判斷某個(gè)變量是否等于 undefined ,如下:
function test(value) {
if (value === undefined) {
return `value is undefined`;
}
return `value is not undefined`;
}
let value;
test(value); // 'value is undefined'
這樣看上去沒(méi)有什么毛病,而且 window.undefined 的 writable 為 false 這意味著它是只讀的沒(méi)發(fā)寫(xiě)入修改,你在 window 下,修改 undefined 也是無(wú)濟(jì)于事。
undefined = "hello world"; console.log(undefined); // undefined
對(duì)這樣是沒(méi)錯(cuò),看似萬(wàn)無(wú)一失。但是還有一種情況沒(méi)有考慮到,那就是 undefined 它是 window 對(duì)象的一個(gè)全局屬性,那么我們可以局部也起一個(gè)也叫 undefined 的變量給它賦值,那么問(wèn)題就來(lái)了。如下:
function test(value) {
let undefined = "hello world";
if (value === undefined) {
return `value is undefined`;
}
return `value is not undefined`;
}
let value;
test(value); // 'value is not undefined'
我們可以看到驗(yàn)證入?yún)⑹欠袷?undefined 的方法就出現(xiàn)了bug。因?yàn)?,我們?undefined 賦了一個(gè)新值,在這個(gè)作用域下找到的所有 undefined 都是那個(gè)新的值,這樣我們就沒(méi)法通過(guò)這種方式去驗(yàn)證判斷 undefined 了。
解決
不賣(mài)關(guān)子了,我們通常會(huì)用 void 0 或者 void(0) 來(lái)去直接替代 undefined ,因?yàn)樗祷氐囊彩?undefined 。
function test(value) {
let undefined = "hello world";
if (value === void 0) {
return `value is undefined`;
}
return `value is not undefined`;
}
let value;
test(value); // 'value is undefined'
void 運(yùn)算符是對(duì)給定的表達(dá)式進(jìn)行求值,然后返回 undefined 。而且, void 是不能重新定義的,不然會(huì)報(bào)語(yǔ)法錯(cuò)誤,這樣也保證了用 void 來(lái)代替 undefined 的不會(huì)出現(xiàn)被重定義而造成的bug。
function func() {
var void = function() {};
return void(0);
}
// Uncaught SyntaxError: Unexpected token 'void'
結(jié)語(yǔ)
其實(shí)在很早之前,很多大廠(chǎng)的前端規(guī)范都會(huì)寫(xiě)到用 void 0 去代替 undefined 作為準(zhǔn)則,去防止一些意外發(fā)生。對(duì)于大型項(xiàng)目來(lái)說(shuō),這點(diǎn)嚴(yán)謹(jǐn)也是值得考慮的。 PS:隨著前端工程化的推進(jìn),打包和校驗(yàn)時(shí)都會(huì)規(guī)避掉這個(gè)問(wèn)題,但我們依然要認(rèn)識(shí)到這個(gè)寫(xiě)法背后的原因,養(yǎng)成習(xí)慣,雖然后面遇到的可能性概率幾乎為0。
以上就是不要在JavaScript中直接寫(xiě)undefined了的詳細(xì)內(nèi)容,更多關(guān)于JavaScript undefined的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序 less文件編譯成wxss文件實(shí)現(xiàn)辦法
這篇文章主要介紹了微信小程序 less文件編譯成微信小程序wxss文件實(shí)現(xiàn)辦法的相關(guān)資料,這里給出具體實(shí)現(xiàn)方法,需要的朋友可以參考下2016-12-12
微信小程序之滾動(dòng)視圖容器的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序之滾動(dòng)視圖容器的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家,讓大家掌握這部分內(nèi)容,需要的朋友可以參考下2017-09-09
JavaScript中塊級(jí)作用域與函數(shù)作用域深入剖析
這篇文章主要為大家介紹了JavaScript中塊級(jí)作用域與函數(shù)作用域的實(shí)現(xiàn)原理深入剖析,2023-05-05
微信小程序 Template詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 Template詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
微信小程序報(bào)錯(cuò):this.setData is not a function的解決辦法
這篇文章主要介紹了微信小程序報(bào)錯(cuò):this.setData is not a function的解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家解決這樣類(lèi)似的問(wèn)題,需要的朋友可以參考下2017-09-09
JS前端可視化canvas動(dòng)畫(huà)原理及其推導(dǎo)實(shí)現(xiàn)
這篇文章主要為大家介紹了JS前端可視化canvas動(dòng)畫(huà)原理及其推導(dǎo)實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
Proxy Facade設(shè)計(jì)模式簡(jiǎn)化系統(tǒng)訪(fǎng)問(wèn)的強(qiáng)大工具原理詳解
這篇文章主要為大家介紹了 Proxy Facade設(shè)計(jì)模式簡(jiǎn)化系統(tǒng)訪(fǎng)問(wèn)的強(qiáng)大工具原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定
這篇文章主要介紹了微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08
深入講解JavaScript之繼承的多種方式和優(yōu)缺點(diǎn)
本文講主要解JavaScript各種繼承方式和優(yōu)缺點(diǎn),文章將六種繼承方式說(shuō)明,分別有原型鏈繼承、借用構(gòu)造函數(shù)(經(jīng)典繼承)、組合繼承、原型式繼承、寄生式繼承、 寄生組合式繼承,這六種方式,需要的朋友可以參考一下2021-10-10
微信小程序 頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03

