您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)JavaScript中typeof 和 instanceof 運算符的區(qū)別是什么,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
1. typeof運算符
在 JS 中,基本類型有 String、Number、Boolean和 Symbol 等。此外,還有函數(shù)、對象和特殊值undefined和null。
typeof是用于確定 expression 類型的運算符:
const typeAsString = typeof expression;
expression 的計算結(jié)果是我們要查找的類型的值。expression 可以是變量myVariable,屬性訪問器myObject.myProp,函數(shù)調(diào)用myFunction()或數(shù)字 14。
typeof expression,取決于expression的值,結(jié)果可能為:'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 判斷對象結(jié)果是 'object'。
但是,typeof null也會計算為'object'!
const missingObject = null; typeof missingObject; // => 'object'
typeof null為'object'是 JS 初始實現(xiàn)中的一個錯誤。
因此,在使用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評估未定義變量的類型時,不會引發(fā) ReferenceError 錯誤:
// notDefinedVar is not defined typeof notDefinedVar; // => 'undefined'
變量notDefinedVar沒有在當前作用域內(nèi)定義。然而,typeof notDefinedVar不會拋出引用錯誤,而是將結(jié)果計算為 'undefined'。
我們可以使用typeof來檢測是否未定義變量,如果typeof myVar === 'undefined' 為 true, 則 myVar 未定義。
2. instanceof 運算符
使用 JS 函數(shù)的通常方法是通過在其名稱后添加一對括號來調(diào)用它:
function greet(who) { return `Hello, ${who}!`; } greet('World'); // => 'Hello, World!'
greet('World')是常規(guī)函數(shù)調(diào)用。
JS 函數(shù)可以做更多的事情:它們甚至可以構(gòu)造對象!要使函數(shù)構(gòu)造對象,只需在常規(guī)函數(shù)調(diào)用之前使用new關(guān)鍵字:
function Greeter(who) { this.message = `Hello, ${who}!`; } const worldGreeter = new Greeter('World'); worldGreeter.message; // => 'Hello, World!'
new Greeter('World')是創(chuàng)建實例worldGreeter的構(gòu)造函數(shù)調(diào)用。
如何檢查 JS 是否使用特定構(gòu)造函數(shù)創(chuàng)建了特定實例?使用 instanceof 運算符:
const bool = object instanceof Constructor;
其中object是對對象求值的表達式,而Constructor是構(gòu)造對象的類或函數(shù),instanceof計算為布爾值。
worldGreeter實例是使用Greeter構(gòu)造函數(shù)創(chuàng)建的,因此worldGreeter instanceof Greeter計算結(jié)果為true。
從ES6 開始,可以使用 class 來定義對象。例如,定義一個類Pet,然后創(chuàng)建它的一個實例myPet:
class Pet { constructor(name) { this.name = name; } } const myPet = new Pet('Lily');
new Pet('Lily')是創(chuàng)建實例myPet的構(gòu)造調(diào)用。
由于myPet是使用Pet類構(gòu)造的-const myPet = new Pet('Lily'), 所以 myPet instanceof Pet 的結(jié)果為 true:
myPet instanceof Pet; // => true
但是,普通對象不是Pet的實例:
const plainPet = { name: 'Zoe' }; plainPet instanceof Pet; // => false
我們發(fā)現(xiàn)instanceof對于確定內(nèi)置的特殊實例(如正則表達式、數(shù)組)很有用:
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 和父類
現(xiàn)在,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
關(guān)于JavaScript中typeof 和 instanceof 運算符的區(qū)別是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。