類型檢查：typeof 和 instanceof 運算符區別？
智米們肯定知道，JS 是種弱類型語言，對變量的類型沒有限制。
例如，如果我們使用字符串類型創建了一個變量，后面又可以為同一變量分配一個數字：
- let message = 'Hello'; // 分配一個字符串
- message = 14; // 分配一個數字
這種動態性為我們提供了靈活性并簡化了變量聲明。
不好方面，我們永遠不能確保變量包含某種類型的值。例如，以下函數greet(who)需要一個字符串參數，但是，我們可以使用任何類型的參數來調用該函數：
- function greet(who) {
- return `Hello, ${who}!`
- }
- greet('World'); // => 'Hello, World!'
- // You can use any type as argument
- greet(true); // => 'Hello, true!'
- greet([1]); // => 'Hello, 1!'
有時我們需要在 JS 中檢查變量的類型，要怎么做?
使用typeof運算符以及instanceof來檢查實例類型。
1. typeof運算符
在 JS 中，基本類型有 String、Number、Boolean和 Symbol 等。此外，還有函數、對象和特殊值undefined和null。
typeof是用于確定 expression 類型的運算符：
- const typeAsString = typeof expression;
expression 的計算結果是我們要查找的類型的值。expression 可以是變量myVariable，屬性訪問器myObject.myProp，函數調用myFunction()或數字 14。
typeof expression，取決于expression的值，結果可能為:'string'， 'number'， 'boolean'， 'symbol'， 'undefined'， 'object'， 'function'。
我們來看看typeof運算符每種類型的情況：
A) String:
- const message = 'hello!';
- typeof message; // => 'string'
B) Number:
- const number = 5;
- typeof number; // => 'number'
- typeof NaN; // => 'number'
C) Boolean:
- const ok = true;
- typeof ok; // => 'boolean'
D) Symbol:
- const symbol = Symbol('key');
- typeof symbol; // => 'symbol'
E) undefined:
- const nothing = undefined;
- typeof nothing; // => 'undefined'
F) Objects:
- const object = { name: 'Batman' };
- typeof object; // => 'object'
- const array = [1, 4, 5];
- typeof array; // => 'object'
- const regExp = /Hi/;
- typeof regExp; // => 'object'
G) Functions:
- function greet(who) {
- return `Hello, ${who}!`
- }
- typeof greet; // => 'function'
1.1 typeof null
如上我們看到的，用 typeof 判斷對象結果是 'object'。
但是，typeof null也會計算為'object'!
- const missingObject = null;
- typeof missingObject; // => 'object'
typeof null為'object'是 JS 初始實現中的一個錯誤。
因此，在使用typeof檢測對象時，需要另外檢查null：
- function isObject(object) {
- return typeof object === 'object' && object !== null;
- }
- isObject({ name: 'Batman' }); // => true
- isObject(15); // => false
- isObject(null); // => false
1.2 typeof 和未定義的變量
雖然typeof expression通常決定于expression的類型，但也可以使用typeof來確定是否定義了變量。
- // notDefinedVar is not defined
- notDefinedVar; // throws ReferenceError
typeof有一個不錯的屬性，當typeof評估未定義變量的類型時，不會引發 ReferenceError 錯誤：
- // notDefinedVar is not defined
- typeof notDefinedVar; // => 'undefined'
變量notDefinedVar沒有在當前作用域內定義。然而，typeof notDefinedVar不會拋出引用錯誤，而是將結果計算為 'undefined'。
我們可以使用typeof來檢測是否未定義變量，如果typeof myVar === 'undefined' 為 true， 則 myVar 未定義。
2. instanceof 運算符
使用 JS 函數的通常方法是通過在其名稱后添加一對括號來調用它：
- function greet(who) {
- return `Hello, ${who}!`;
- }
- greet('World'); // => 'Hello, World!'
greet('World')是常規函數調用。
JS 函數可以做更多的事情：它們甚至可以構造對象!要使函數構造對象，只需在常規函數調用之前使用new關鍵字：
- function Greeter(who) {
- this.message = `Hello, ${who}!`;
- }
- const worldGreeter = new Greeter('World');
- worldGreeter.message; // => 'Hello, World!'
new Greeter('World')是創建實例worldGreeter的構造函數調用。
如何檢查 JS 是否使用特定構造函數創建了特定實例?使用 instanceof 運算符：
- const bool = object instanceof Constructor;
其中object是對對象求值的表達式，而Constructor是構造對象的類或函數，instanceof計算為布爾值。
worldGreeter實例是使用Greeter構造函數創建的，因此worldGreeter instanceof Greeter計算結果為true。
從ES6 開始，可以使用 class 來定義對象。例如，定義一個類Pet，然后創建它的一個實例myPet:
- class Pet {
- constructor(name) {
- this.name = name;
- }
- }
- const myPet = new Pet('Lily');
new Pet('Lily')是創建實例myPet的構造調用。
由于myPet是使用Pet類構造的-const myPet = new Pet('Lily'), 所以 myPet instanceof Pet 的結果為 true：
- myPet instanceof Pet; // => true
但是，普通對象不是Pet的實例：
- const plainPet = { name: 'Zoe' };
- plainPet instanceof Pet; // => false
我們發現instanceof對于確定內置的特殊實例(如正則表達式、數組)很有用：
- function isRegExp(value) {
- return value instanceof RegExp;
- }
- isRegExp(/Hello/); // => true
- isRegExp('Hello'); // => false
- function isArray(value) {
- return value instanceof Array;
- }
- isArray([1, 2, 3]); // => true
- isArray({ prop: 'Val' }); // => false
2.1 instanceof 和父類
現在，Cat 擴展了父類Pet：
- class Cat extends Pet {
- constructor(name, color) {
- super(name);
- this.color = color;
- }
- }
- const myCat = new Cat('Callie', 'red');
不出所料，myCat是Cat類的實例：
- myCat instanceof Pet; // => true
但同時，myCat也是基類Pet的一個實例:
- myCat instanceof Pet; // => true
3. 總結
JS 是一種弱類型的語言，這意味著對變量的類型沒有限制。
typeof expression可以用來查看 expression 的類型，結果是可能是其中的一個:'string'， 'number'， 'boolean'， 'symbol'， 'undefined'， 'object'， 'function'。
typeof null的值為'object'，因此使用typeof檢測對象的正確方法是typeof object ==='object'&& object!== null。
instanceof運算符讓我們確定實例的構造函數。如果object是Constructor的實例，則object instanceof Constructor為true。
本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。
