在JavaScript中typeof和instanceof運算子都可以進行型別檢查,那麼它們之間有什麼差異?本篇文章為大家介紹typeof和instanceof操作符的差別。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
相關推薦:《javascript影片教學》
智米們肯定知道,JS 是種弱型別語言,對變量的類型沒有限制。
例如,如果我們使用字串類型創建了一個變量,後面可以為同一變量分配一個數字:
let message = 'Hello'; // 分配一个字符串 message = 14; // 分配一个数字
這種動態性為我們提供了靈活性並簡化了變量聲明。
不好方面,我們永遠無法確保變數包含某種類型的值。例如,以下函數greet(who)
需要一個字串參數,但是,我們可以使用任何類型的參數來呼叫該函數:
function greet(who) { return `Hello, ${who}!` } greet('World'); // => 'Hello, World!' // You can use any type as argument greet(true); // => 'Hello, true!' greet([1]); // => 'Hello, 1!'
有時我們需要在JS 中檢查變數的類型,怎麼做?
使用typeof
運算子以及instanceof
來檢查實例類型。
1.<span style="font-size: 18px;">typeof</span>
#運算子
在JS 中,基本型別有String
、Number
、Boolean
和Symbol
等。此外,還有函數、物件和特殊值undefined
和null
。
typeof
是用來決定expression
類型的運算子:
const typeAsString = typeof expression;
expression
的計算結果是我們要找的類型的值。 expression
可以是變數myVariable
,屬性存取器myObject.myProp
,函數呼叫myFunction()
或數字14
。
typeof expression
,取決於expression
的值,結果可能為:'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
判斷物件結果是'object'
。
但是,typeof null
也會計算為'object'
!
const missingObject = null; typeof missingObject; // => 'object'
typeof null
為'object'
是 JS 初始實作中的錯誤。
因此,在使用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
評估未定義變數的類型時,不會引發ReferenceError
錯誤:
// notDefinedVar is not defined typeof notDefinedVar; // => 'undefined'
變數notDefinedVar
沒有在目前作用域內定義。然而,typeof notDefinedVar
不會拋出引用錯誤,而是將結果計算為 'undefined'
。
我們可以使用typeof
來偵測是否未定義變量,如果typeof myVar === 'undefined'
為true
,則myVar
未定義。
2. instanceof 運算子
#使用JS 函數的通常方法是透過在其名稱後面加上一對括號來呼叫它:
function greet(who) { return `Hello, ${who}!`; } greet('World'); // => 'Hello, World!'
greet('World')
是常規函數呼叫。
JS 函數可以做更多的事情:它們甚至可以建構物件!要使函數構造對象,只需在常規函數呼叫之前使用new
關鍵字:
function Greeter(who) { this.message = `Hello, ${who}!`; } const worldGreeter = new Greeter('World'); worldGreeter.message; // => 'Hello, World!'
new Greeter('World')
是建立實例 worldGreeter
的建構子呼叫。
如何檢查 JS 是否使用特定建構函式建立了特定實例?使用instanceof
運算子:
const bool = object instanceof Constructor;
其中object
是物件求值的表達式,而Constructor
是建構物件的類別或函數,instanceof
計算為布林值。
worldGreeter
實例是使用Greeter
建構函式建立的,因此worldGreeter instanceof Greeter
計算結果為true
。
從ES6 開始,可以使用 class
來定義物件。例如,定義一個類別Pet
,然後建立它的一個實例myPet
:
class Pet { constructor(name) { this.name = name; } } const myPet = new Pet('Lily');
new Pet('Lily')
是创建实例myPet
的构造调用。
由于myPet
是使用Pet
类构造的-const myPet = new Pet('Lily')
, 所以 myPet instanceof Pet
的结果为 true
:
myPet instanceof Pet; // => true
但是,普通对象不是Pet
的实例:
const plainPet = { name: 'Zoe' }; plainPet instanceof Pet; // => false
我们发现instanceof
对于确定内置的特殊实例(如正则表达式、数组)很有用:
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 和父类
现在,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
3. 总结
JS 是一种弱类型的语言,这意味着对变量的类型没有限制。
typeof expression
可以用来查看 expression
的类型,结果是可能是其中的一个:'string'
, 'number'
, 'boolean
', 'symbol'
, 'undefined'
, 'object'
, 'function'
。
typeof null
的值为'object'
,因此使用typeof
检测对象的正确方法是typeof object ==='object'&& object!== null
。
instanceof
运算符让我们确定实例的构造函数。 如果object
是Constructor
的实例,则object instanceof Constructor
为true
。
原文地址:https://dmitripavlutin.com/javascript-typeof-instanceof/
作者:Dmitri Pavlutin
译文地址:https://segmentfault.com/a/1190000038312457
更多编程相关知识,请访问:编程课程!!
以上是JavaScript中類型檢查:typeof和instanceof操作符的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!