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

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

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

引言：JavaScript的類(lèi)型迷宮

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

第一章：typeof - 快速身份識(shí)別器

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

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" (歷史遺留問(wèn)題！)
console.log(typeof []);           // "object"
console.log(typeof {});           // "object"
console.log(typeof function(){}); // "function"

typeof的優(yōu)勢(shì)：

簡(jiǎn)單直接：語(yǔ)法簡(jiǎn)單，使用方便
基本類(lèi)型友好：對(duì)原始類(lèi)型判斷準(zhǔn)確
安全可靠：不會(huì)拋出錯(cuò)誤，即使變量未聲明

typeof的局限：

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

適用場(chǎng)景：

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

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

instanceof檢查對(duì)象是否屬于特定構(gòu)造函數(shù)或類(lèi)的實(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)勢(shì)：

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

instanceof的局限：

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

適用場(chǎng)景：

檢查對(duì)象是否是特定類(lèi)的實(shí)例
驗(yàn)證數(shù)組類(lèi)型（比typeof更準(zhǔn)確）
處理自定義對(duì)象類(lèi)型
檢查對(duì)象是否實(shí)現(xiàn)了某個(gè)接口（通過(guò)原型鏈）

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

讓我們通過(guò)實(shí)際場(chǎng)景看看兩位偵探的表現(xiàn)：

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

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

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

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

// 場(chǎng)景3：檢查null
const myNull = null;

console.log(typeof myNull);       // "object" - 錯(cuò)誤！
// console.log(myNull instanceof Object); // 報(bào)錯(cuò)！

// 場(chǎng)景4：自定義類(lèi)
class Pizza {}
const myPizza = new Pizza();

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

對(duì)決結(jié)果：

基本類(lèi)型：typeof勝出
對(duì)象類(lèi)型：instanceof勝出
null檢查：兩者都失敗

第四章：其他類(lèi)型偵探工具

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

專(zhuān)門(mén)解決數(shù)組檢測(cè)問(wèn)題：

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

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

最精確的類(lèi)型檢測(cè)方法：

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)追蹤器

訪問(wèn)對(duì)象的構(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. 鴨子類(lèi)型 - 行為主義者

“如果它走起來(lái)像鴨子，叫起來(lái)像鴨子，那它就是鴨子”

// 檢查是否是類(lèi)數(shù)組對(duì)象
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的類(lèi)型偵探工具

1. 可選鏈操作符（?.） - 安全訪問(wèn)專(zhuān)家

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

// 安全訪問(wèn)嵌套屬性
console.log(user?.address?.street); // "Main St"
console.log(user?.contacts?.email); // undefined (不會(huì)報(bào)錯(cuò))

2. 空值合并運(yùn)算符（??） - 默認(rèn)值專(zhuān)家

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

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

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

在TypeScript中，我們可以創(chuàng)建自定義類(lèi)型守衛(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
}

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

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

第七章：實(shí)際應(yīng)用場(chǎng)景

場(chǎng)景1：表單驗(yàn)證

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

場(chǎng)景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("無(wú)效的響應(yīng)格式");
    } catch (error) {
        console.error("獲取用戶數(shù)據(jù)失敗:", error);
        return null;
    }
}

場(chǎng)景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("不支持的形狀類(lèi)型");
}