JavaScript判斷物件的類型
總結下來,主要有constructor屬性、typeof運算子、instanceof運算子和Object.prototype.toString()方法這四個方式來判斷物件的型別。
constructor屬性
建構子預先定義的constructor屬性是建構子本身。
var Foo = function(){};
Foo.prototype.constructor === Foo;//true透過new呼叫建構函式所產生的物件以建構函式的prototype屬性為原型。雖然JavaScript中沒有類別的概念,但是建構函數的作用同類的名稱相似,是物件類型的識別。存取物件繼承的constructor屬性可以查看物件的類型。原始類型的變數也可以存取constructor屬性,因為在存取的時候JavaScript形成了一個包裝物件。
1 //basic objects
2 var obj = {name: "obj"};
3 obj.constructor === Object;//true
4
5 // //f defined function(){};
7 var f = new Foo();
8 f.constructor === Foo;//true
9
10 //primitive types
11 //Number
12 var num = 1;
13 num.constructor === Number;//true
14 var nan = NaN;
15 nan.constructor === Number;//true
16 //Boolean
17 var b = true;
18 b.constructor = == Boolean;//true
19 //String
20 var s = "string";
21 s.constructor === String;//true
22 //Function
23 var Fun =function(){};
24 Fun.constructor === Function;//true;然而,constructor屬性是可以重新複製或覆蓋的,這會造成類型判斷的錯誤。即使我們一般不會刻意去給constructor屬性賦值,但是有些情況下constructor屬性的值和我們所期望的值不同。看下面範例:
var baseClass = function(){};
var derivedClass = function(){};
derivedClass.prototype = new baseClass();
obj.constructor === baseClass;//true;因為子類別的prototype以父類別的實例為原型,所以透過子類別實例存取constructor就是父類別建構子。因此在JavaScript物件導向程式設計中,我們會在定義子類別時加上一句程式碼來修正constructor屬性。
cross-frame和cross-window問題:
如果判斷來自不同frame或來自不同window的變數的物件的類型,那麼constructor屬性無法正常運作。因為不同window的核心類型不同[1]。
使用instanceof操作子
instanceof操作符判斷一個物件的原型鏈中是否存在某個建構子的prototype屬性[2]。原型鏈的概念可以閱讀JavaScript物件導向程式設計(一)原型與繼承。下面的程式碼形成了原型鏈obj1->derivedClass.prototype->baseClass.prototype->...->Object.prototype。 Object.prototype是所有物件的原型,anyObj instanceof Object === true。
var baseClass = function(){};var derivedClass = function(){};
derivedClass.prototype = new Class();//use inheritance
var obj1Class();//use inheritance
var obj1Class = 105%)d ;//true
obj1 instanceof derivedClass;//true
obj1 instanceof Object;//true
obj2 instanceof ClassClass; obj2 instanceof Object;//trueconstructor屬性可以應用到除了null和undefined之外的原始類型(數字、字串、布林類型)。而instanceof不可,但可以使用包裝物件的方法來判斷。
3 instanceof Number // false
true instanceof Boolean // false
new Number(3) instanceof Numberof true
使用 Object.prototype.toString()方法
Object.prototype.toString.call(3);//"[object Number]"
Object.prototype.toString.call(NaN);//"[object Number]"Object.prototype.toString.call ([1,2,3]);//"[object Array]"
Object.prototype.toString.call(true);//"[object Boolean]"
Object.prototype.toString.call("abc" );//"[object String]"
Object.prototype.toString.call(/[a-z]/);//"[object RegExp]"
Object.prototype.toString.call(function(){}); //"[object Function]"
//null and undefined in Chrome and Firefox. In IE "[object Object]"
Object.prototype.toString.call(null);//"[object Null]"
Object.prototype.toString.call(undefined) ;//"[object Undefined]"
//self defined Objects
var a = new Foo();
Object.prototype.toString.call(a);//"[object Object]"
//Typed Wrappers
var b = new Boolean(true);
Object.prototype.toString.call(b);//"[object Boolean]"
var n = new Number(1);
Object.prototype.toString.call( n);//"[object Number]"
var s = new String("abc");
Object.prototype.toString.call(s);//"[object String]"常會使用slice方法截取結果中類型的資訊:
Object.prototype.toString.call("abc").slice(8,-1);//"String"使用typeof 運算子
在MDN的一篇文件中已經很詳細介紹了這個[3]。 typeof能回傳的資訊較少,有"undefined"、"object"、"boolean"、"number"、"string"、"function"、"xml"這幾種。
Type Result
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Host object (provided by"
String "string"
Host object (provided by the JS enlments. ]] in ECMA-262 terms) "function"
E4X XML object "xml"
E4X XMLList object "xml"
==
// Numberstypen 3. 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // Despite being "Not-A-Number "
typeof Number(1) === 'number'; // but never use this form!
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof always return a string
typeof String("abc") === 'string'; // but never use this form!
type never use this form!
// Booleans
type true === 'boolean';
typeof Boolean(true) === 'boolean'; // but never use this form!
// Undefined
typeof blabla === 'undefined'; // an undefined variable
// Objects
typeof {a:1} === 'object';
typeof new Date() === 'object';
typeof new Boolean(true) === 'object';
typeof new Boolean(true) === 'object'; '; // this is confusing. Don't use!
typeof new Number(1) === 'object'; // this is confusing. Don't use!
typeof new String("abc") === 'object'; // this is confusing. Don't use!
// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';
typeof Math.sin === 'function';
typeof Math.sin === 'function';
typeof Math.sin === 'function';
typeof Math.sin === 'function';
typeof Math。 undefined;//"undefined"
typeof null;//"object" This stands since the beginning of JavaScript

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數
