JS 的動(dòng)態(tài)類(lèi)型有好有壞。好的一面，不必指明變量的類(lèi)型。不好的是，咱們永遠(yuǎn)無(wú)法確定變量的類(lèi)型。

typeof運(yùn)算符可以確定 JS 中的6種類(lèi)型：

typeof 10;    // => 'number'
typeof 'Hello';  // => 'string'
typeof false;   // => 'boolean'
typeof { a: 1 }; // => 'object'
typeof undefined; // => 'undefined'
typeof Symbol(); // => 'symbol'

同樣，instanceof 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。

class Cat { }
const myCat = new Cat();

myCat instanceof Cat; // => true

但是typeof和instanceof的一些行為可能會(huì)令人混淆。防范于未然，咱們需要提前了解一些邊緣情況。

1. typeof null

typeof myObject === 'object'會(huì)告知myObject是否是一個(gè)對(duì)象類(lèi)型。舉個(gè)例子:

const person = { name: '前端小智' };

typeof person; // => 'object'

typeof person是'object'，因?yàn)閜erson是一個(gè)普通的 JS 對(duì)象。

在某場(chǎng)景下，變量值可能需要指定為 null，下面是一些場(chǎng)景：

可以使用null來(lái)跳過(guò)指示配置對(duì)象
使用null初始化稍后要保存對(duì)象的變量
當(dāng)函數(shù)由于某種原因無(wú)法構(gòu)造對(duì)象時(shí)，返回null
例如，如果不存在正則表達(dá)式匹配項(xiàng)，則str.match(regExp)方法返回null：

const message = 'Hello';
message.match(/Hi/); // => null

這里引出一個(gè)問(wèn)題，可以使用typeof 來(lái)區(qū)分有值的對(duì)象和具有 null 值的對(duì)象嗎？

let myObject = null;
typeof myObject; // => 'object'

myObject = { prop: 'Value' };
typeof myObject; // => 'object'

從上面可以看出，typeof 對(duì)象有值的對(duì)象和具有 null 值的對(duì)象，得到的結(jié)果都是'object'。

可以如下面方法來(lái)檢測(cè)變量是否有對(duì)象且不是null：

function isObject(value) {
 return typeof value === 'object' && value !== null;
}

isObject({});  // => true
isObject(null); // => false

除了檢查value是否為object: typeof value === 'object'之外，還需要明確地驗(yàn)證null: value !== null。

2. typeof array

如果試圖檢測(cè)一個(gè)變量是否包含一個(gè)數(shù)組，常見(jiàn)的錯(cuò)誤就是使用typeof操作符：

const colors = ['white', 'blue', 'red'];

typeof colors; // => 'object'

檢測(cè)數(shù)組的正確方法是使用Array.isArray()：

const colors = ['white', 'blue', 'red'];
const hero = { name: 'Batman' };

Array.isArray(colors); // => true
Array.isArray(hero);  // => false

Array.isArray(colors)返回一個(gè)布爾值true，表示colors是一個(gè)數(shù)組。

3.虛值類(lèi)型檢查

JS中的undefined是一個(gè)特殊值，表示未初始化的變量。

如果試圖訪問(wèn)未初始化的變量、不存在的對(duì)象屬性，則獲取到的值為 undefined :

let city;
let hero = { name: '前端小智', villain: false };

city;   // => undefined
hero.age; // => undefined

訪問(wèn)未初始化的變量 city 和不存在的屬性hero.age的結(jié)果為undefined。

要檢查屬性是否存在，可以在條件中使用object[propName]，這種遇到值為虛值或者undefined是不可靠的：

function getProp(object, propName, def) {
 // 錯(cuò)誤方式
 if (!object[propName]) {
  return def;
 }
 return object[propName];
}

const hero = { name: '前端小智', villain: false };

getProp(hero, 'villain', true); // => true
hero.villain;          // => false

如果對(duì)象中不存在propName，則object [propName]的值為undefined。 if (!object[propName]) { return def }保護(hù)缺少的屬性。

hero.villain屬性存在且值為false。 但是，該函數(shù)在訪問(wèn)villan值時(shí)錯(cuò)誤地返回true：getProp(hero, 'villain', true)

undefined是一個(gè)虛值，同樣false、0和''和null。

不要使用虛值作為類(lèi)型檢查，而是要明確驗(yàn)證屬性是否存在于對(duì)象中：

typeof object[propName] === 'undefined'
propName in object
object.hasOwnProperty(propName)

接著，咱們來(lái)改進(jìn)getProp()函數(shù)：

function getProp(object, propName, def) {
 // Better
 if (!(propName in object)) {
  return def;
 }
 return object[propName];
}

const hero = { name: '前端小智', villain: false };

getProp(hero, 'villain', true); // => false
hero.villain;          // => false

if (!(propName in object)) { ... }條件正確確定屬性是否存在。

邏輯運(yùn)算符

我認(rèn)為最好避免使用邏輯運(yùn)算符||作為默情況，這個(gè)容易打斷閱讀的流程：

const hero = { name: '前端小智', villain: false };

const name = hero.name || 'Unknown';
name;   // => '前端小智'
hero.name; // => '前端小智'

// 不好方式
const villain = hero.villain || true;
villain;   // => true
hero.villain; // => false

hero 對(duì)象存在屬性villain，值為 false,但是表達(dá)式hero.villain || true結(jié)果為true。

邏輯操作符||用作訪問(wèn)屬性的默認(rèn)情況，當(dāng)屬性存在且具有虛值時(shí)，該操作符無(wú)法正確工作。

若要在屬性不存在時(shí)默認(rèn)設(shè)置，更好的選擇是使用新的雙問(wèn)號(hào)(??)操作符,

const hero = { name: '前端小智', villan: false };

// 好的方式
const villain = hero.villain ?? true;
villain;   // => false
hero.villain; // => false

或使用解構(gòu)賦值:

const hero = { name: '前端小智', villain: false };

// Good
const { villain = true } = hero;
villain;   // => false
hero.villain; // => false

4. typeof NaN

整數(shù)，浮點(diǎn)數(shù)，特殊數(shù)字（例如Infinity，NaN）的類(lèi)型均為數(shù)字。

typeof 10;    // => 'number'
typeof 1.5;   // => 'number'
typeof NaN;   // => 'number'
typeof Infinity; // => 'number'

NaN是在無(wú)法創(chuàng)建數(shù)字時(shí)創(chuàng)建的特殊數(shù)值。NaN是not a number的縮寫(xiě)。

在下列情況下不能創(chuàng)建數(shù)字：

Number('oops'); // => NaN

5 * undefined; // => NaN
Math.sqrt(-1); // => NaN

NaN + 10; // => NaN

由于NaN，意味著對(duì)數(shù)字的操作失敗，因此對(duì)數(shù)字有效性的檢查需要額外的步驟。

下面的isValidNumber()函數(shù)也可以防止NaN導(dǎo)致的錯(cuò)誤：

function isValidNumber(value) {
 // Good
 return typeof value === 'number' && !isNaN(value);
}

isValidNumber(Number('Z99')); // => false
isValidNumber(5 * undefined); // => false
isValidNumber(undefined);   // => false

isValidNumber(Number('99')); // => true
isValidNumber(5 + 10);    // => true

除了typeof value === 'number'之外，還多驗(yàn)證!isNaN(value)確保萬(wàn)無(wú)一失。

5.instanceof 和原型鏈

JS 中的每個(gè)對(duì)象都引用一個(gè)特殊的函數(shù):對(duì)象的構(gòu)造函數(shù)。

object instanceof Constructor是用于檢查對(duì)象的構(gòu)造函數(shù)的運(yùn)算符：

const object = {};
object instanceof Object; // => true

const array = [1, 2];
array instanceof Array; // => true

const promise = new Promise(resolve => resolve('OK'));
promise instanceof Promise; // => true

現(xiàn)在，咱們定義一個(gè)父類(lèi)Pet和它的子類(lèi)Cat：

class Pet {
 constructor(name) {
  this.name;
 }
}

class Cat extends Pet {
 sound = 'Meow';
}

const myCat = new Cat('Scratchy');

現(xiàn)在，嘗試確定myCat的實(shí)例

myCat instanceof Cat;  // => true
myCat instanceof Pet;  // => true
myCat instanceof Object; // => true

instanceof運(yùn)算符表示myCat是Cat，Pet甚至Object的實(shí)例。

instanceof操作符通過(guò)整個(gè)原型鏈搜索對(duì)象的構(gòu)造函數(shù)。要準(zhǔn)確地檢測(cè)創(chuàng)建對(duì)象的構(gòu)造函數(shù)，需要檢測(cè) constructor 屬性

myCat.constructor === Cat;  // => true
myCat.constructor === Pet;  // => false
myCat.constructor === Object; // => false

只有myCat.constructor === Cat的計(jì)算結(jié)果為true，表示 Cat 是 myCat實(shí)例的構(gòu)造函數(shù)。

6. 總結(jié)

運(yùn)算符typeof和instanceof 用于類(lèi)型檢查。 它們盡管易于使用，但需要注意一些特殊情況。

需要注意的是：typeof null等于'object'。 要確定變量是否包含非null對(duì)象，需要顯示指明null：

typeof myObject === 'object' && myObject !== null
檢查變量是否包含數(shù)組的最佳方法是使用Array.isArray(variable)內(nèi)置函數(shù)。

因?yàn)閡ndefined是虛值的，所以我們經(jīng)常直接在條件句中使用它，但這種做法容易出錯(cuò)。更好的選擇是使用prop in object來(lái)驗(yàn)證屬性是否存在。

使用雙問(wèn)號(hào)操作系符號(hào)object.prop ?? def 或者 { prop = def } = object 來(lái)訪問(wèn)可能丟失的屬性。

NaN是一個(gè)類(lèi)型為number的特殊值，它是由對(duì)數(shù)字的無(wú)效操作創(chuàng)建的。為了確保變量有正確的數(shù)字，最好使用更詳細(xì)的驗(yàn)證:!isNaN(number) && typeof number === 'number'。

最后，請(qǐng)記住instanceof通過(guò)prototype鏈搜索實(shí)例的構(gòu)造函數(shù)。如果不知道這一點(diǎn)，那么如果使用父類(lèi)驗(yàn)證子類(lèi)實(shí)例，可能會(huì)得到錯(cuò)誤的結(jié)果。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

最新評(píng)論