如何判別JS中的數(shù)據(jù)類型？一篇文章教你徹底弄懂typeof和instanceof

更新時間：2025年08月29日 08:28:37 作者：Jinuss

typeof和instanceof都是JavaScript中用于類型檢查的操作符,但它們的工作方式和應(yīng)用場景有顯著不同,這篇文章主要介紹了如何判別JS中的數(shù)據(jù)類型的相關(guān)資料,通過這篇文章可以徹底弄懂typeof和instanceof,需要的朋友可以參考下

引言：JavaScript的類型迷宮

在JavaScript的世界里，數(shù)據(jù)類型就像變色龍一樣善變。有時我們需要準確識別這些"變色龍"的真實身份，這時instanceof和typeof就成了我們的偵探工具。但它們各有所長，也各有局限。今天，我們就來探索這兩個偵探的秘密武器，以及它們的替代方案。

第一章：typeof - 快速身份識別器

typeof是JavaScript中最基礎(chǔ)的類型檢查工具，它能快速告訴我們一個值的基本類型。

console.log(typeof "Hello");      // "string"
console.log(typeof 42);           // "number"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (歷史遺留問題！)
console.log(typeof []);           // "object"
console.log(typeof {});           // "object"
console.log(typeof function(){}); // "function"

typeof的優(yōu)勢：

簡單直接：語法簡單，使用方便
基本類型友好：對原始類型判斷準確
安全可靠：不會拋出錯誤，即使變量未聲明

typeof的局限：

對象類型模糊：所有對象（數(shù)組、日期等）都返回"object"
null問題：著名的歷史遺留問題，typeof null返回"object"
無法區(qū)分對象子類型：無法區(qū)分數(shù)組、日期等具體對象類型

適用場景：

檢查變量是否已定義：if (typeof variable !== 'undefined')
區(qū)分基本類型和對象
快速檢查函數(shù)類型

第二章：instanceof - 家族血統(tǒng)鑒定師

instanceof檢查對象是否屬于特定構(gòu)造函數(shù)或類的實例，關(guān)注的是原型鏈上的繼承關(guān)系。

class Animal {}
class Dog extends Animal {}

const fido = new Dog();

console.log(fido instanceof Dog);    // true
console.log(fido instanceof Animal);  // true
console.log(fido instanceof Object);  // true

const arr = [];
console.log(arr instanceof Array);   // true
console.log(arr instanceof Object);  // true

const date = new Date();
console.log(date instanceof Date);   // true

instanceof的優(yōu)勢：

識別對象子類型：能區(qū)分數(shù)組、日期等具體對象類型
檢查繼承關(guān)系：可以檢查對象是否在某個原型鏈上
自定義類型識別：適用于自定義類和構(gòu)造函數(shù)

instanceof的局限：

基本類型無效：對原始類型不起作用
跨窗口問題：iframe或不同全局環(huán)境中的對象無法正確判斷
可能被欺騙：通過修改原型鏈可以影響結(jié)果

適用場景：

檢查對象是否是特定類的實例
驗證數(shù)組類型（比typeof更準確）
處理自定義對象類型
檢查對象是否實現(xiàn)了某個接口（通過原型鏈）

第三章：typeof vs instanceof 實戰(zhàn)對決

讓我們通過實際場景看看兩位偵探的表現(xiàn)：

// 場景1：檢查數(shù)組
const myArray = [1, 2, 3];

console.log(typeof myArray);      // "object" - 不夠具體
console.log(myArray instanceof Array); // true - 完美！

// 場景2：檢查數(shù)字
const myNumber = 42;

console.log(typeof myNumber);     // "number" - 正確
console.log(myNumber instanceof Number); // false - 失??！

// 場景3：檢查null
const myNull = null;

console.log(typeof myNull);       // "object" - 錯誤！
// console.log(myNull instanceof Object); // 報錯！

// 場景4：自定義類
class Pizza {}
const myPizza = new Pizza();

console.log(typeof myPizza);      // "object" - 不夠具體
console.log(myPizza instanceof Pizza); // true - 完美！

對決結(jié)果：

基本類型：typeof勝出
對象類型：instanceof勝出
null檢查：兩者都失敗

第四章：其他類型偵探工具

1. Array.isArray() - 數(shù)組專家

專門解決數(shù)組檢測問題：

console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false

2. Object.prototype.toString.call() - 萬能偵探

最精確的類型檢測方法：

console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(42)); // "[object Number]"

3. constructor屬性 - 血統(tǒng)追蹤器

訪問對象的構(gòu)造函數(shù)：

const arr = [];
console.log(arr.constructor === Array); // true

function Car() {}
const myCar = new Car();
console.log(myCar.constructor === Car); // true

注意：constructor屬性可以被修改，不夠可靠

4. 鴨子類型 - 行為主義者

“如果它走起來像鴨子，叫起來像鴨子，那它就是鴨子”

// 檢查是否是類數(shù)組對象
function isArrayLike(obj) {
    return obj && 
           typeof obj.length === 'number' && 
           typeof obj[0] !== 'undefined';
}

console.log(isArrayLike([])); // true
console.log(isArrayLike({length: 0})); // true
console.log(isArrayLike("hello")); // true

第五章：現(xiàn)代JavaScript的類型偵探工具

1. 可選鏈操作符（?.） - 安全訪問專家

const user = {
    address: {
        street: "Main St"
    }
};

// 安全訪問嵌套屬性
console.log(user?.address?.street); // "Main St"
console.log(user?.contacts?.email); // undefined (不會報錯)

2. 空值合并運算符（??） - 默認值專家

const name = null;
console.log(name ?? "Anonymous"); // "Anonymous"

const age = 0;
console.log(age ?? 21); // 0 (不會誤判0)

3. 類型守衛(wèi) - TypeScript的超級偵探

在TypeScript中，我們可以創(chuàng)建自定義類型守衛(wèi)：

function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

const myPet: Fish | Bird = getPet();

if (isFish(myPet)) {
    myPet.swim(); // TypeScript知道m(xù)yPet是Fish
} else {
    myPet.fly(); // TypeScript知道m(xù)yPet是Bird
}

第六章：如何選擇合適的偵探工具

基本類型檢查：使用typeof
- 檢查字符串、數(shù)字、布爾值等
- 檢查變量是否定義
對象類型檢查：
- 數(shù)組：優(yōu)先使用Array.isArray()
- 其他內(nèi)置對象：使用instanceof
- 自定義對象：使用instanceof
精確類型識別：使用Object.prototype.toString.call()
安全訪問：使用可選鏈?.和空值合并??
類型安全開發(fā)：使用TypeScript

第七章：實際應(yīng)用場景

場景1：表單驗證

function validateFormField(value) {
    if (value === null || value === undefined) {
        return "值不能為空";
    }
    
    if (typeof value === "string" && value.trim() === "") {
        return "字符串不能為空";
    }
    
    if (typeof value === "number" && isNaN(value)) {
        return "數(shù)字無效";
    }
    
    return "驗證通過";
}

場景2：API響應(yīng)處理

async function fetchUserData() {
    try {
        const response = await fetch("/api/user");
        const data = await response.json();
        
        // 檢查是否是期望的數(shù)據(jù)結(jié)構(gòu)
        if (data && typeof data === "object" && 
            Array.isArray(data.posts) && 
            typeof data.name === "string") {
            return data;
        }
        
        throw new Error("無效的響應(yīng)格式");
    } catch (error) {
        console.error("獲取用戶數(shù)據(jù)失敗:", error);
        return null;
    }
}

場景3：多態(tài)函數(shù)

function calculateArea(shape) {
    if (shape instanceof Rectangle) {
        return shape.width * shape.height;
    }
    
    if (shape instanceof Circle) {
        return Math.PI * shape.radius ** 2;
    }
    
    if (Array.isArray(shape) && shape.length === 2) {
        // 處理 [width, height] 數(shù)組
        return shape[0] * shape[1];
    }
    
    throw new Error("不支持的形狀類型");
}