如何判別JS中的數(shù)據(jù)類型？一篇文章教你徹底弄懂typeof和instanceof
更新時(shí)間：2025年08月29日 08:28:37 作者：Jinuss
typeof和instanceof都是JavaScript中用于類型檢查的操作符,但它們的工作方式和應(yīng)用場景有顯著不同,這篇文章主要介紹了如何判別JS中的數(shù)據(jù)類型的相關(guān)資料,通過這篇文章可以徹底弄懂typeof和instanceof,需要的朋友可以參考下
引言：JavaScript的類型迷宮
在JavaScript的世界里，數(shù)據(jù)類型就像變色龍一樣善變。有時(shí)我們需要準(zhǔn)確識別這些"變色龍"的真實(shí)身份，這時(shí)instanceof和typeof就成了我們的偵探工具。但它們各有所長，也各有局限。今天，我們就來探索這兩個(gè)偵探的秘密武器，以及它們的替代方案。
第一章：typeof - 快速身份識別器
typeof是JavaScript中最基礎(chǔ)的類型檢查工具，它能快速告訴我們一個(gè)值的基本類型。
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)勢：
- 簡單直接：語法簡單，使用方便
- 基本類型友好：對原始類型判斷準(zhǔn)確
- 安全可靠：不會拋出錯誤，即使變量未聲明
typeof的局限：
- 對象類型模糊：所有對象（數(shù)組、日期等）都返回"object"
- null問題：著名的歷史遺留問題，typeof null返回"object"
- 無法區(qū)分對象子類型：無法區(qū)分?jǐn)?shù)組、日期等具體對象類型
適用場景：
- 檢查變量是否已定義：
if (typeof variable !== 'undefined') - 區(qū)分基本類型和對象
- 快速檢查函數(shù)類型
第二章：instanceof - 家族血統(tǒng)鑒定師
instanceof檢查對象是否屬于特定構(gòu)造函數(shù)或類的實(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ū)分?jǐn)?shù)組、日期等具體對象類型
- 檢查繼承關(guān)系：可以檢查對象是否在某個(gè)原型鏈上
- 自定義類型識別：適用于自定義類和構(gòu)造函數(shù)
instanceof的局限：
- 基本類型無效：對原始類型不起作用
- 跨窗口問題：iframe或不同全局環(huán)境中的對象無法正確判斷
- 可能被欺騙：通過修改原型鏈可以影響結(jié)果
適用場景：
- 檢查對象是否是特定類的實(shí)例
- 驗(yàn)證數(shù)組類型（比typeof更準(zhǔn)確）
- 處理自定義對象類型
- 檢查對象是否實(shí)現(xiàn)了某個(gè)接口（通過原型鏈）
第三章：typeof vs instanceof 實(shí)戰(zhàn)對決
讓我們通過實(shí)際場景看看兩位偵探的表現(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); // 報(bào)錯！
// 場景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 (不會報(bào)錯)
2. 空值合并運(yùn)算符（??） - 默認(rèn)值專家
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
- 數(shù)組：優(yōu)先使用
精確類型識別：使用
Object.prototype.toString.call()安全訪問：使用可選鏈
?.和空值合并??類型安全開發(fā)：使用TypeScript
第七章：實(shí)際應(yī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ù)字無效";
}
return "驗(yàn)證通過";
}
場景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("不支持的形狀類型");
}
結(jié)語：成為JavaScript類型偵探大師
在JavaScript的世界里，沒有完美的類型檢測工具，只有最適合當(dāng)前場景的選擇：
typeof是你的基礎(chǔ)工具包，適合快速識別基本類型instanceof是你的專業(yè)工具，用于檢查對象血統(tǒng)- 其他方法如
Array.isArray()和Object.prototype.toString.call()是你的專業(yè)助手
真正的JavaScript偵探大師會根據(jù)不同場景靈活選擇工具，有時(shí)甚至組合使用多種方法。記住，理解這些工具的原理和局限比記住它們的用法更重要。
現(xiàn)在，你已經(jīng)準(zhǔn)備好面對JavaScript類型系統(tǒng)的任何挑戰(zhàn)了！出發(fā)吧，類型偵探！
到此這篇關(guān)于JS中typeof和instanceof的文章就介紹到這了,更多相關(guān)JS中typeof和instanceof內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JS中typeof與instanceof之間的區(qū)別總結(jié)
- javascript instanceof,typeof的區(qū)別
- 詳解JavaScript中typeof與instanceof用法
- javascript instanceof 與typeof使用說明
- 關(guān)于javascript中的typeof和instanceof介紹
- javascript之typeof、instanceof操作符使用探討
- 談?wù)勎覍avaScript中typeof和instanceof的深入理解
- 菜鳥也能搞懂js中typeof與instanceof區(qū)別
- Javascript typeof與instanceof的區(qū)別
- 淺談javascript中的instanceof和typeof
相關(guān)文章
在項(xiàng)目開發(fā)中我們常常會去監(jiān)聽滾動事件或者用戶輸入框驗(yàn)證事件,如果事件處理沒有頻率限制,當(dāng)用戶不斷觸發(fā)事件時(shí),就會加重瀏覽器的負(fù)擔(dān),影響用戶的體驗(yàn),造成不必要的損失,這篇文章主要給大家介紹了關(guān)于js防抖節(jié)流到底是什么的相關(guān)資料,需要的朋友可以參考下2022-04-04
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設(shè)計(jì)中較為簡單但是最為常用的一種設(shè)計(jì)模式。這篇文章主要介紹了Javascript實(shí)現(xiàn)單例模式的相關(guān)資料,需要的朋友可以參考下2016-01-01
JavaScript正則表達(dá)式及其方法詳細(xì)介紹
正則表達(dá)式是一種強(qiáng)大的文本處理工具,主要用于在字符串中進(jìn)行模式匹配、數(shù)據(jù)驗(yàn)證和文本替換,這篇文章主要給大家介紹了關(guān)于JavaScript正則表達(dá)式及其方法的詳細(xì)介紹,需要的朋友可以參考下2025-05-05
JavaScript去除數(shù)組里重復(fù)值的方法
這篇文章主要介紹了JavaScript去除數(shù)組里重復(fù)值的方法,涉及javascript針對數(shù)組操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JavaScript函數(shù)柯里化是一種將接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換為一系列接受單個(gè)參數(shù)的函數(shù)的技術(shù)。本文將通過簡單的示例為大家詳細(xì)講講函數(shù)柯里化的相關(guān)應(yīng)用，需要的可以參考一下2023-04-04
JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)
發(fā)布訂閱是一種設(shè)計(jì)模式，EventHub可以被看作是一種Pub/Sub實(shí)現(xiàn)。本文就來講講如何利用eventHub發(fā)布訂閱寫一個(gè)事件監(jiān)聽函數(shù)，感興趣的可以了解一下2023-04-04
js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕,實(shí)例分析了javascript倒計(jì)時(shí)效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
Javascript remove 自定義數(shù)組刪除方法
Javascript自定義數(shù)組刪除方法remove()，需要的朋友可以參考下。2009-10-10
JavaScript setTimeout使用閉包功能實(shí)現(xiàn)定時(shí)打印數(shù)值
這篇文章主要介紹了JavaScript setTimeout使用閉包功能實(shí)現(xiàn)定時(shí)打印數(shù)值 的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06