手機(jī)站首頁(yè)散文詩(shī)歌雜文隨筆日記小小說

散文網(wǎng) » 生活 »日常 » typeof 和 instanceof

typeof 和 instanceof

2021-05-30 02:37 作者:刂C刂C刂 0人讀過 | 我要投稿

typeof ：

typeof 運(yùn)算符，用于檢測(cè)數(shù)據(jù)類型。返回值為對(duì)應(yīng)數(shù)據(jù)類型的字符串。

語(yǔ)法：typeof operand 或 typeof(operand)

typeof 123? // number

typeof true? // boolean

typeof '123'? // string

typeof undefined? // undefined

typeof null? // object?

typeof [ ]? // object

typeof new Date()? // objec

typeof { }? // object

typeof function() { }? // function

typeof Array? // function

?

typeof Symbol()?? // Symbol

為什么 typeof null 返回 object ？
js 在底層存儲(chǔ)變量的時(shí)候，會(huì)在變量的機(jī)器碼的低位1-3位存儲(chǔ)其類型信息。而 typeof 關(guān)鍵字檢測(cè)數(shù)據(jù)類型的原理就是通過檢測(cè)這1-3位機(jī)器碼實(shí)現(xiàn)檢測(cè)不同數(shù)據(jù)類型。比如 object類型的數(shù)據(jù)，對(duì)應(yīng)的機(jī)器碼就是：000
? 000：對(duì)象???? ? ? 1：整數(shù)???? ?? ? 010：浮點(diǎn)數(shù)? ? ????? 100：字符串??? ?? ? 110：布爾值
? undefined： -2^30????????? null：全零
null 類型的數(shù)據(jù)存儲(chǔ)時(shí)，對(duì)應(yīng)的機(jī)器碼是一串的 000000......000000
所以typeof在檢測(cè) null 類型的數(shù)據(jù)，會(huì)返回 object。這個(gè)JavaScript這門語(yǔ)言的一個(gè) 特點(diǎn)。
typeof 檢測(cè)引用類型數(shù)據(jù)結(jié)構(gòu)，都返回應(yīng)該object，但是為什么還會(huì)返回 function ？
因?yàn)椋簍ypeof 在檢測(cè)出其為引用數(shù)據(jù)類型后，還會(huì)再檢測(cè)這個(gè)引用數(shù)據(jù)類型是否有實(shí)現(xiàn)[[call]]方法。不是則返回object ，是則返回function。
極易混淆的一個(gè)點(diǎn)：

var str1 = 'myStr';

var str2 = new String( 'myStr' );

typeof str1;? // string

typeof str2;? // object

這里記住一點(diǎn)就行：當(dāng)我們 new 一個(gè)構(gòu)造函數(shù)時(shí)，結(jié)果肯定是實(shí)例化了一個(gè)對(duì)象。所以其肯定是引用數(shù)據(jù)類型。接著我們只需要判斷這個(gè)引用數(shù)據(jù)類型是否實(shí)現(xiàn)[[call]]方法，不是則返回object ，是則返回function。

instanceof：

語(yǔ)法：實(shí)例對(duì)象 instanceof? 類??? 屬于返回 true ，不屬于返回 false。

原理是：檢測(cè)構(gòu)造函數(shù)的?prototype?屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。返回值為布爾值。

利用這一點(diǎn)，instanceof? 也可以用于檢測(cè)數(shù)據(jù)類型。

缺點(diǎn)1：檢測(cè)的實(shí)例必須是對(duì)象數(shù)據(jù)類型，基本數(shù)據(jù)類型（Number String Boolean null undefined Symbol）無法通過 instanceof 檢測(cè)的。

缺點(diǎn)2：只要構(gòu)造函數(shù)在這個(gè)被檢測(cè)的實(shí)例的原型鏈上存在，就都返回 true。所以即使是檢測(cè)對(duì)象數(shù)據(jù)類型， instanceof 也是不準(zhǔn)確的。

let reg = /^$/;

let str1 = new String(123);

let str2 = 'abc';

let num = 100;

console.log(reg instanceof RegExp);?? // true?? 字面量創(chuàng)建的正則也還是對(duì)象
console.log(str1 instanceof String); ?? // true?
console.log(str2? instanceof String);?? // false?? 字面量創(chuàng)建出的基本數(shù)據(jù)類型無法檢測(cè)
console.log(num instanceof Number);?? // false

console.log([]?instanceof?Array);?? // true

console.log(?[]?instanceof?Object);? // true

?

檢測(cè)引用類型更好的方法是使用： Object.prototype.toString() 我們先討論 toString() 這個(gè)方法，對(duì)象的 toString() 方法，如果在自定義對(duì)象中未被覆蓋，toString() 返回?"[object?type]"。這里的 type 指對(duì)應(yīng)的類型。

但是 Boolean、String、Number、Function、Array、Date、RegExp的原型對(duì)象上也都定義了各自的 toString() 方法。它們會(huì)覆蓋Object原型上的 toString()。

console.log({}.toString());?//?'[object?Object]'

// 會(huì)被覆蓋的原因在于：原型鏈查找的就近原則。

// 1. 'abc' 是個(gè)原始值，是基本數(shù)據(jù)類型。

// 2. 我們要對(duì)他使用方法，就會(huì)發(fā)生包裝類。

// 3. 而包裝類時(shí)，是通過 new String 這個(gè)構(gòu)造函數(shù)創(chuàng)建實(shí)例的。

// 4. 當(dāng)我們調(diào)用 toString() 這個(gè)方法時(shí)，這個(gè)新生成的實(shí)例上并沒有這個(gè)方法，所以會(huì)去它的原型上尋找。

// 5. 而我們前面說過，String.prototype 是有自己預(yù)定義的 toSting() 方法的。

console.log(('abc').toString());?//?'abc'

console.log((100).toString());?//?'100'

console.log(true.toString());?//?'true'

console.log([1,2,3].toString());??//?'1,2,3'

console.log(function(){}.toString());?//?'function(){}'

console.log(new Date().toString());??// 當(dāng)前時(shí)間

console.log(/1231/g.toString());? // '/1231/g'

所以我們可以通過直接使用 Object.prototype.toString() 來判斷類型，這個(gè)方法執(zhí)行時(shí)會(huì)把內(nèi)部 this 的所屬類信息輸出。

Object.prototype.toString() 方法執(zhí)行的時(shí)候，方法中的 this 是誰，就會(huì)檢測(cè)誰的類型。所以需要使用 Function.prototype.call() 來改變Object.prototype.toString() 的 this，使之變?yōu)槲覀円獧z測(cè)的數(shù)據(jù)。