深化探求：null 和 undefined 畢竟有何區(qū)別？

簡便區(qū)分

總的來說 null 和 undefined 都代表空，主要區(qū)別在于 undefined 表現(xiàn)尚未初始化的變量的值，而 null 表現(xiàn)該變量故意短少目標指向。

• undefined
• 這個變量從基本上就沒有界說
• 隱蔽式 空值
• null
• 這個值固然界說了，但它并未指向任何內(nèi)存中的目標
• 聲明式 空值

MDN 中給出的界說

null

值 null 是一個字面量，不像 undefined ，它不是全局目標的一個屬性。null 是表現(xiàn)短少的標識，指示變量未指向任何目標。把 null 作為尚未創(chuàng)建的目標，約莫更好了解。在 API 中，null 常在前往典范應(yīng)是一個目標，但沒有關(guān)聯(lián)的值的場合使用。

undefined

undefined 是 全局目標 的一個屬性。也就是說，它是全局作用域的一個變量。undefined 的最初值就是原始數(shù)據(jù)典范 undefined 。

一張神奇的圖片

接下去我們看一張比力經(jīng)典的圖片，該圖來自 stackoverflow 的回復(fù)，本人沒有找到準確的出處。

體現(xiàn)情勢

在更深化了解 null 和 undefined 的區(qū)別前，我們起主要曉得 null 和 undefined 在 JS 中有什么不同的體現(xiàn)情勢，用以便利我們更好的了解 null 和 undefined 的區(qū)別。

typeof

typeof null // 'object' typeof undefined // 'undefined'

Object.prototype.toString.call

typeof null // '[object Null]' typeof undefined // '[object Undefined]'

== 與 ===

null == undefined // true null === undefined // false !!null === !!undefined // true

Object.getPrototypeOf(Object.prototype)

JavaScript 中第一個目標的原型指向 null 。

Object.getPrototypeOf(Object.prototype) // null

+ 運算 與 Number()

let a = undefined + 1 // NaN let b = null + 1 // 1 Number(undefined) // NaN Number(null) // 0

JSON

JSON.stringify({a: undefined}) // '{}' JSON.stringify({b: null}) // '{b: null}' JSON.stringify({a: undefined, b: null}) // '{b: null}'

let undefiend = 'test'

function test(n) { let undefined = 'test' return n === undefined } test() // false test(undefined) // false test('test') // ture let undefined = 'test' // Uncaught SyntaxError: Identifier 'undefined' has already been declared

深化探究

為什么 typeof null 是 object？

typeof null 輸入為 'object' 但是是一個底層的錯誤，但直到現(xiàn)階段都無法被修復(fù)。

緣故是，在 JavaScript 初始版本中，值以 32位 存儲。前 3位 表現(xiàn)數(shù)據(jù)典范的標志，其他位則是值。

關(guān)于一切的目標，它的前 3位 都以 000 作為典范標志位。在 JavaScript 早前版本中， null 被以為是一個特別的值，用來對應(yīng) C 中的 空指針 。但 JavaScript 中沒有 C 中的指針，以是 null 意味著什么都沒有大概 void 并以 全0(32個) 表現(xiàn)。

因此每當(dāng) JavaScript 讀取 null 時，它前端的 3位 將它視為 目標典范 ，這也是為什么 typeof null 前往 'object' 的緣故。

為什么 Object.prototype.toString.call(null) 輸入 '[object Null]'

toString() 是 Object 的原型辦法，調(diào)用該辦法，默許前往如今目標的 [[Class]] 。這是一個內(nèi)里屬性，其格式為 [object Xxx] ，此中 Xxx 就是目標的典范。

JavaScript 萬物皆目標，為什么 xxx.toString() 不克不及前往變量典范？

這是由于 各個類中重寫了 toString 的辦法，因此必要調(diào)用 Object 中的 toString 辦法，必需使用 toString.call() 的辦法調(diào)用。

關(guān)于 Object 目標，直接調(diào)用 toString() 就能前往 '[object Object]' 。而關(guān)于其他目標，則必要經(jīng)過 call / apply 來調(diào)用才干前往準確的典范信息。

為什么 == 和 === 比力會顯現(xiàn) true 和 false ？

很多文章說：undefined 的布爾值是 false ， null 的布爾值也是 false ，以是它們在比力時都轉(zhuǎn)化為了 false ，以是 undefined == null 。
實踐上并不是如此的。

ECMA 在 11.9.3 章節(jié)中明白報告我們：

If x is null and y is undefined, return true.

If x is undefined and y is null, return true.

這是 JavaScript 底層的內(nèi)容了，至于更深化的內(nèi)容，假如有興致可以扒一扒 JavaScript 的源碼。

為什么null + 1和undefined + 1體現(xiàn)不同？

這觸及到 JavaScript 中的隱式典范轉(zhuǎn)換，在實行 加法運算 前，隱士典范轉(zhuǎn)換會實驗將表達式中的變量轉(zhuǎn)換為 number 典范。如：'1' + 1 會取得后果 11。

• null 轉(zhuǎn)化為 number 時，會轉(zhuǎn)換成 0
• undefined 轉(zhuǎn)換為 number 時，會轉(zhuǎn)換為 NaN

至于為什么實行云云的轉(zhuǎn)換辦法，我推測是 JavaScript 早前的一個糟糕計劃。

從言語學(xué)的角度來看：
null 意味著一個明白的沒有指向的空值，而 undefined 則意味著一個未知的值。
在某種水平上， 0 意味著數(shù)字空值。
這固然看起來有些牽強，但是我在這一階段能所最能想到的約莫了。

為什么 JSON.stringify 會將值為 undefined 的內(nèi)容刪除？

但是這條沒有很好的表明辦法， JSON 會將 undefined 對應(yīng)的 key 刪除，這是 JSON 本身的轉(zhuǎn)換準則。

在 undefined 的情況下，有無該條數(shù)據(jù)是沒有區(qū)別的，由于他們在體現(xiàn)情勢上并無不同：

let obj1 = { a: undefined } let obj2 = {} console.log(obj1.a) // undefined console.log(obj2.a) // undefined

但必要注意的是，你約莫在調(diào)用接口時，必要對 JSON 格式的數(shù)據(jù)中的 undefied 舉行特別處理。

為什么 let undefiend = 'test' 可以掩蓋掉 JavaScript 本身的 undefined？

JavaScript 關(guān)于 undefined 的限定辦法為全局創(chuàng)建了一個只讀的 undefined ，但是并沒有徹底克制局部 undefined 變量的界說。

聽說在 JavaScript 高版本克制了該利用，但我沒有準確的依據(jù)。

請在任何時分，都不要舉行 undefined 變量的掩蓋，就算是你的 JSON 轉(zhuǎn)換將 undefined 轉(zhuǎn)換為 '' 。也不要經(jīng)過該利用舉行，這將是及其傷害的舉動。

總結(jié)

關(guān)于使用 undefined 照舊 null

這是一條公說共有理婆說婆有理的爭議內(nèi)容。
本人更傾向于使用 null ，由于這是體現(xiàn)界說空值的辦法。我并不克不及給出準確的來由。

但關(guān)于使用 undefined 我有一條發(fā)起：
假如你必要使用 undefined 界說空值，請不要接納以下兩種辦法：

• let a;
• let a = undefined;

進而接納底下這種辦法顯式聲明 undefined ：

• let a = void 0;

結(jié)語

終于將 undefined 和 null 的基本區(qū)別搞定了。