[ JS 文章收集 ] undefined 與 null 的區別

來源自 這裡
Preface
大多數計算機語言，有且僅有一個表示"無"的值，比如，C語言的NULL，Java語言的null，Python語言的None，Ruby語言的nil。有點奇怪的是，JavaScript 語言居然有兩個表示"無"的值：undefined 和 null。這是為什麼？

相似性
在 JavaScript 中，將一個變量賦值為 undefined 或 null，老實說，幾乎沒區別:

view plaincopy to clipboardprint?

1. var a = undefined ;  
2. var a =  null ;  

上面代碼中，a 變量分別被賦值為 undefined 和 null，這兩種寫法幾乎等價。undefined 和 null 在 if 語句中，都會被自動轉為 false，相等運算符甚至直接報告兩者相等。

view plaincopy to clipboardprint?

1. if  ( ! undefined )    
2.     console.log ( 'undefined is false' ) ;  
3. // undefined is false  
4.   
5. if  ( ! null )    
6.     console.log ( 'null is false' ) ;  
7. // null is false  
8.   
9. undefined ==  null  
10. // true  

上面代碼說明，兩者的行為是何等相似！
既然 undefined 和 null 的含義與用法都差不多，為什麼要同時設置兩個這樣的值，這不是無端增加 JavaScript 的複雜度，令初學者困擾嗎？Google 公司開發的 JavaScript 語言的替代品 Dart 語言，就明確規定只有 null，沒有 undefined！

歷史原因
最近，我在讀新書《Speaking JavaScript》時，意外發現了這個問題的答案！原來，這與 JavaScript 的歷史有關。1995年 JavaScript 誕生時，最初像 Java 一樣，只設置了 null 作為表示"無"的值。根據 C 語言的傳統，null被設計成可以自動轉為0。

view plaincopy to clipboardprint?

1. Number ( null )  
2. // 0  
3.   
4. 5  +  null  
5. // 5  

但是，JavaScript 的設計者Brendan Eich，覺得這樣做還不夠，有兩個原因。

首先，null 像在 Java 裡一樣，被當成一個對象。但是，JavaScript 的數據類型分成原始類型（primitive）和合成類型（complex）兩大類，Brendan Eich 覺得表示"無"的值最好不是對象。其次，JavaScript 的最初版本沒有包括錯誤處理機制，發生數據類型不匹配時，往往是自動轉換類型或者默默地失敗。Brendan Eich 覺得，如果 null 自動轉為0，很不容易發現錯誤。

因此，Brendan Eich又設計了一個 undefined!

最初設計
JavaScript 的最初版本是這樣區分的：null 是一個表示"無"的對象，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。

view plaincopy to clipboardprint?

1. Number ( undefined )  
2. // NaN  
3.   
4. 5  + undefined  
5. // NaN  

目前的用法
但是，上面這樣的區分，在實踐中很快就被證明不可行。目前，null和undefined基本是同義的，只有一些細微的差別。

null 表示"沒有對象"，即該處不應該有值。典型用法是：

* 作為函數的參數，表示該函數的參數不是對象。
* 作為對象原型鏈的終點。

view plaincopy to clipboardprint?

1. Object.getPrototypeOf ( Object.prototype )  
2. // null  

undefined 表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：

* 變量被聲明了，但沒有賦值時，就等於 undefined。
* 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
* 對像沒有賦值的屬性，該屬性的值為undefined。
* 函數沒有返回值時，默認返回undefined。

view plaincopy to clipboardprint?

1. var i ;   
2. i // undefined  
3.   
4. function  f ( x ) { console.log( x ) }   
5. f( ) // undefined  
6.   
7. var   o =  new  Object( ) ;   
8. o.p // undefined  
9.   
10. var x = f( ) ;   
11. x // undefined