背景

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

什么是undefined

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

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

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

什么是null

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

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

重頭戲來了

• 在 typeof 中分別對 undefined和null進行類型檢查,請看以下代碼:

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

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

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

在 V8 引擎中,會把 JavaScript 熱點代碼編譯成機器碼,它是電腦CPU直接讀取運行的機器碼，運行速度最快，但是非常晦澀難懂，同時也比較難編寫；機器碼就是計算機可以直接執(zhí)行，并且執(zhí)行速度最快的代碼；

• 而 undefined 和 null 是特殊的:

• undefined:是整數(shù) (-2)^30(超出整數(shù)的范圍的數(shù)字);
• null: 是機器代碼 NULL 指針,或者說是一個對象類型標記加上一個為 0 的引用;

• 好了,繞了這么遠,該回來了,還是這個問題,為什么 typeof null 返回的是 "object",這下子應該就很好理解了吧。
• 因為對象的類型標簽是 0,由于 null 代表的是 空指針,在 JavaScript 中沒有指針的概念,所以 null 32位全為 0 來表示。因此,typeof null 返回的是 "object"。
• 所以通過上面的總結, null 本質上是 0,請看以下代碼示例:

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

• null 轉化為 number 類型時,會轉換為 0。
• undefined 轉換為 number 類型時,會轉換為 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

神奇吧,刺激吧,但是結束了??????

參考文章

• MDN
• MDN推薦文章

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