記isNaN與Number.isNaN的區別

有一次項目中發現原來isNaN和Number.isNaN是有着不同的判斷結果。記錄一下避免下次踩坑。

要了解他們的區別，首先得明確NaN究竟是什麼？

在MDN的官方解釋中

The global NaN property is a value representing Not-A-Number.

NaN是一個全局表明「Not-A-Number」的值。這樣的解釋我的以爲仍是有些模糊。

在You-Dont-Know-JS中給出了更詳細的解釋：

NaN literally stands for "not a number", though this label/description is very poor and misleading, as we'll see shortly. It would be much more accurate to think of NaN as being "invalid number," "failed number," or even "bad number," than to think of it as "not a number."

你們應該也知道：typeof NaN === 'number'。

那麼結合"invalid number"、"failed number"、"bad number"等描述說明NaN首先得是一個Number類型的值，其次再判斷是否是「not a number」。

目前的結論：」not-a-number「的類型是number，這仍是有點使人困惑。咱們來看下的You-Dont-Know-JS中的場景描述：（怕翻譯產生歧義仍是直接貼了原文）

NaN is a kind of "sentinel value" (an otherwise normal value that's assigned a special meaning) that represents a special kind of error condition within the number set. The error condition is, in essence: "I tried to perform a mathematic operation but failed, so here's the failed number result instead."

再來看一個例子：

var a = 2 / "foo";        // NaN
typeof a === "number";    // true

看到這裏相信你們對NaN已經有了較爲完整的認識。那麼咱們如何來判斷計算產生的結果是NaN呢？

JS原生提供了isNaN的方法，拿上面的例子來舉例：

var a = 2 / "foo";
isNaN(a) // true;

看似沒什麼問題，但其實isNaN是有着致命的缺陷。它把對NaN的判斷就如同字面意思所寫的那樣：test if the thing passed in is either not a number or is a number。但從咱們上述對NaN的理解來看，這樣的判斷顯然不正確。
例如：

var a = 2 / "foo";
var b = "foo";

a; // NaN
b; // "foo"

window.isNaN( a ); // true
window.isNaN( b ); // true

b顯然是一個字符串，從咱們以前對NaN的定義(NaN的類型是number)來看，b明顯不該該是NaN。這個Bug由來許久，因此在es6中提供了替代方案Number.isNaN。咱們來看下polyfill就知道他修復了什麼問題。

if (!Number.isNaN) {
  Number.isNaN = function(n) {
    return (
      typeof n === 'number' &&
             window.isNaN(n)
    );
  };
}

再試驗下剛纔的例子：

var a = 2 / "foo";
var b = "foo"

Number.isNaN(a); // true
Number.isNaN(b); // false

就能得出咱們理想的結果了。

還有一種polyfill很是簡單，利用了NaN不等於他自身的特性，NaN是惟一有此特性的值，其餘值都等於它們自身（包括undefined和null）:

if (!Number.isNaN) {
    Number.isNaN = function(n) {
        return n !== n;
    };
}

最後就是建議你們都使用Number.isNaN來進行判斷，若是用了eslint的話，那隻寫isNaN是會報錯的哦。