背景

• 通過(guò)當(dāng)前文章所在專(zhuān)欄的上一篇的文章學(xué)習(xí)我們可以知道 undefined == null 進(jìn)行相等比較返回的結(jié)果是 true,但是具體是怎么樣的,ES5 規(guī)范好像并沒(méi)有明確的說(shuō)明,這便引起了我的極度好奇,那么通過(guò)這篇這篇文章我們將揭開(kāi)這個(gè)神秘的面紗。
• 如果你還不是很熟悉 js 的類(lèi)型,你可以看本專(zhuān)欄的往期文章,關(guān)注此專(zhuān)欄我想你能找到你想要的內(nèi)容。

什么是undefined

• 全局屬性 undefined 表示原始值 undefined。它是一個(gè) JavaScript 的原始數(shù)據(jù)類(lèi)型。
• 一個(gè)沒(méi)有被賦值的變量是 undefined 類(lèi)型。
• 如果正在執(zhí)行的變量沒(méi)有分配值,則該 方法 或者 語(yǔ)句返回undefined`。請(qǐng)查看下圖:

• 在上圖中,聲明變量返回的是 undefined,而 typeof 返回的是類(lèi)型字符串。
• 如果一個(gè)函數(shù)沒(méi)有返回值,那么該函數(shù)的返回結(jié)果是 undefined。
• 如果函數(shù)定義了有參數(shù),但是沒(méi)有函數(shù)調(diào)用參數(shù),那么它也是 undefined。
• 為了證明以上的說(shuō)法,請(qǐng)看下列代碼:

function foo(x, y) {
  console.log(x); // 77
  console.log(y); // undefined
}
const bar = foo(77);
console.log(bar); // undefined

什么是null

• 值 null 特指對(duì)象的值未設(shè)置,它是 JavaScript 基本類(lèi)型之一,在布爾值運(yùn)算中被人誤是 falsy。
• 值 null 是一個(gè)字面量,不像 undefined,它不是全局對(duì)象的一個(gè)屬性,指示變量未指向任何對(duì)象,把 null 作為尚未創(chuàng)建的對(duì)象也許更好理解。從邏輯上講,null 表示一個(gè)空對(duì)象指針,這也是給 typeof 傳一個(gè) null 會(huì)返回 "object"的原因
• 在獲取 DOM 元素時(shí),如果沒(méi)有獲取到,返回的是 null,原型鏈的最頂端也是 null,請(qǐng)看代碼:

console.log(document.querySelector("moment")); // null
function foo() {}
console.log(foo.__proto__.__proto__.__proto__); // null
console.log(Object.__proto__.__proto__.__proto__); // null

重頭戲來(lái)了

• 在 typeof 中分別對(duì) undefined和null進(jìn)行類(lèi)型檢查,請(qǐng)看以下代碼:

console.log(typeof undefined); // undefined
console.log(typeof null); // object

• typeof undefined 輸出 "undefined"估計(jì)已經(jīng)家喻戶(hù)曉了吧,但是為什么 typeof null 輸出的 "object",通過(guò)查閱資料得知,這是一個(gè)歷史遺留問(wèn)題,曾經(jīng)有有一個(gè) ECMAScript 的修復(fù)提案,但被拒絕了,這個(gè)似乎無(wú)法修復(fù),因?yàn)樗鼤?huì)破壞現(xiàn)有代碼(此項(xiàng)目依靠該bug運(yùn)行...)。
• 在 JavaScript 的第一個(gè)版本中,值存儲(chǔ)在32位的單元中(相當(dāng)于一條機(jī)器碼),它由一個(gè)小型類(lèi)型標(biāo)記(1-3位)和值的實(shí)際數(shù)據(jù)組成。類(lèi)型標(biāo)記存儲(chǔ)在單元的低位,其中:

• 000: 對(duì)象,數(shù)據(jù)是對(duì)象的引用;
• 1: 整型,數(shù)據(jù)是31位帶符號(hào)的整數(shù);
• 010: 雙精度,數(shù)據(jù)是雙精度浮點(diǎn)數(shù)的引用;
• 100:字符串,數(shù)據(jù)是字符串;
• 110: 布爾值,數(shù)據(jù)是布爾值;

在 V8 引擎中,會(huì)把 JavaScript 熱點(diǎn)代碼編譯成機(jī)器碼,它是電腦CPU直接讀取運(yùn)行的機(jī)器碼，運(yùn)行速度最快，但是非?；逎y懂，同時(shí)也比較難編寫(xiě)；機(jī)器碼就是計(jì)算機(jī)可以直接執(zhí)行，并且執(zhí)行速度最快的代碼；

• 而 undefined 和 null 是特殊的:

• undefined:是整數(shù) (-2)^30(超出整數(shù)的范圍的數(shù)字);
• null: 是機(jī)器代碼 NULL 指針,或者說(shuō)是一個(gè)對(duì)象類(lèi)型標(biāo)記加上一個(gè)為 0 的引用;

• 好了,繞了這么遠(yuǎn),該回來(lái)了,還是這個(gè)問(wèn)題,為什么 typeof null 返回的是 "object",這下子應(yīng)該就很好理解了吧。
• 因?yàn)閷?duì)象的類(lèi)型標(biāo)簽是 0,由于 null 代表的是 空指針,在 JavaScript 中沒(méi)有指針的概念,所以 null 32位全為 0 來(lái)表示。因此,typeof null 返回的是 "object"。
• 所以通過(guò)上面的總結(jié), null 本質(zhì)上是 0,請(qǐng)看以下代碼示例:

console.log(undefined + 1); // NaN
console.log(null + 1); // 1

• null 轉(zhuǎn)化為 number 類(lèi)型時(shí),會(huì)轉(zhuǎn)換為 0。
• undefined 轉(zhuǎn)換為 number 類(lèi)型時(shí),會(huì)轉(zhuǎn)換為 NaN。
• 那么使用上還有什么樣的區(qū)別呢?繼續(xù)上代碼:

function foo(x = 77, y = "moment") {
  console.log(x); // 77
  console.log(y); // null
}
foo(undefined, null);
const [x = 1, y = 2] = [undefined, null];
console.log(x); // 1
console.log(y); // null

神奇吧,刺激吧,但是結(jié)束了??????

參考文章

• MDN
• MDN推薦文章

以上就是undefined與null的區(qū)別示例詳解的詳細(xì)內(nèi)容，更多關(guān)于undefined null區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！