這篇文章主要介紹了JavaScript之類型檢測的案例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)作為成都網(wǎng)站建設公司，專注網(wǎng)站建設公司、網(wǎng)站設計，有關成都定制網(wǎng)頁設計方案、改版、費用等問題，行業(yè)涉及除甲醛等多個領域，已為上千家企業(yè)服務，得到了客戶的尊重與認可。

一、typeof

typeof：操作符返回一個字符串，表示未經(jīng)計算的操作數(shù)的類型。

我們都知道，在 ES6 前，JavaScript 共六種數(shù)據(jù)類型，分別是：

1. Undefined

2. Null

3. Boolean

4. Number

5. String

6. Object

然而當我們使用 typeof 對這些數(shù)據(jù)類型的值進行操作的時候，返回的結(jié)果卻不是一一對應，分別是：

1. Undefined

2. object – ***

3. Boolean

4. Number

5. String

6. Object

有一些意外，typeof null => 'object' 且typeof function(){} => 'function'

所以在大多數(shù)情況下我們可以使用typeof來檢測基本數(shù)據(jù)類型，但是，檢測得到的Object后，卻無法區(qū)分是哪一種Object：

typeof [] === 'object'; //truetypeof {} === 'object'; //truetypeof null === 'object'; //true

總結(jié)

在檢測Js的原始類型時，除了typeof null返回object之外，其他的都返回對應類型名的小寫字母。

二、instanceof

我們判斷對象類型的時候，可以使用instanceof：

如果對原型及原型鏈不太熟悉的同學不妨看看這篇文章從原型到原型鏈

定義

instanceof 運算符用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上。

實例

const arr = [];const obj = {};console.log(arr instanceof Array);   // trueconsole.log(arr instanceof Object);  // trueconsole.log(obj instanceof Array);   // falseconsole.log(obj instanceof Object);  // true

注意instanceof是能匹配類型的父類的，所以arr instanceof Array和arr instanceof Object都是true，因為Object是Array的父類。

滿足class extends和原型鏈規(guī)則的父子類關系的對象都能被匹配：

class

class Base {}class Current extends Base {}const obj = new Current();console.log(obj instanceof Current); // trueconsole.log(obj instanceof Base); // true

原型鏈

function Foo() {}function Bar() {}Bar.prototype = new Foo();const obj = new Bar();console.log(obj instanceof Bar); // trueconsole.log(obj instanceof Foo); // true

注意如果我們修改obj的原型鏈能改變instanceof的結(jié)果：

function Other() {}obj.__proto__ = new Other();console.log(obj instanceof Other); // trueconsole.log(obj instanceof Foo); // false

總結(jié)

instanceof借助了原型鏈來判斷的實際上，只要一個類型Type的prototype在一個對象obj的原型鏈上，那么obj instanceof Type就是true，否則就是false。

三、constructor

有時候我們不希望匹配父類型，只希望匹配當前類型，那么我們可以用constructor來判斷：

如果對原型及原型鏈不太熟悉的同學不妨看看這篇文章從原型到原型鏈

定義

返回創(chuàng)建實例對象的Object 構(gòu)造函數(shù)的引用。注意，此屬性的值是對函數(shù)本身的引用，而不是一個包含函數(shù)名稱的字符串。

實例

const arr = [];console.log(arr.constructor === Array); // trueconsole.log(arr.constructor === Object); // false

對象的constructor會返回它的類型，而類型在定義的時候，會創(chuàng)建一個name只讀屬性，值為類型的名字。

class Foo {}console.log(Foo.name); // Fooconst foo = new Foo();console.log(foo.constructor === Foo); // trueconsole.log(foo.constructor.name === 'Foo'); // true

疑問

• constructor.name 一定就是正確的嗎？

• 我們可以修改它嗎？

四、stringTag是什么？

4.1 stringTag——類型標簽

如果你看過一些庫的早期實現(xiàn)，你會發(fā)現(xiàn)使用Object.prototype.toString來做類型判斷的方式，他們會數(shù)據(jù)類型的字符串標志，被稱作stringTag；

4.2 Object.prototype.toString

定義

toString()方法返回一個表示該對象的字符串。

每個對象都有一個toString() 方法，當該對象被表示為一個文本值時，默認情況下，toString() 方法被每個 Object 對象繼承。

如果此方法在自定義對象中未被覆蓋，toString() 返回 “[object type]”，其中 type 是對象的類型。以下代碼說明了這一點：

實例

比如這是requirejs里面的代碼片段。

var ostring = Object.prototype.toString;function isArray(it) {
  return ostring.call(it) === '[object Array]';}

toString時都做了什么？

這里直接將冴羽大大的總結(jié)搬了過來:

When the toString method is called, the following steps are taken:

1. If the this value is undefined, return “[object Undefined]”.

2. If the this value is null, return “[object Null]”.

3. Let O be the result of calling ToObject passing the this value as the argument.

4. Let class be the value of the [[Class]] internal property of O.

5. Return the String value that is the result of concatenating the three Strings "[object ", class, and “]”.

當 toString 方法被調(diào)用的時候，下面的步驟會被執(zhí)行：

1. 如果 this 值是 undefined，就返回 [object Undefined]

2. 如果 this 的值是 null，就返回 [object Null]

3. 讓 O 成為 ToObject(this) 的結(jié)果

4. 讓 class 成為 O 的內(nèi)部屬性 [[Class]] 的值

5. 最后返回由 "[object " 和 class 和 “]” 三個部分組成的字符串

注意

有幾點我們需要注意：

• toString無法區(qū)分原始類型及其構(gòu)造對象；

• 我們認為Number、Boolean這種類型在被構(gòu)造器構(gòu)造出來后的類型應該是對象；

• 但toString都會返回[object number]等原始類型；

• toString方法是可以自定義的；

五、實現(xiàn)幾個數(shù)據(jù)檢測的方法

好了看了幾款常用的類型判斷方法后，我們可不可以實現(xiàn)自己的類型判斷工具？就利用上述提到的一個或多個方法。我們自己動手豐衣足食～

5.1 isObject

注意，我們認為null不是一個對象，它就是null～

function isObject(value) {
    const type = typeof value;
    return value != null && (type === 'object' || type === 'function');}

5.2 isNull

function isNull(value) {
    return value === null;}

5.3 isFunction

function isFunction(value) {
    return typeof value === 'function';}

5.4 isArray

var isArray = Array.isArray || function( value ) {
    return type(value) === "array";}

5.5 stringTag

const toString = Object.prototype.toString;function getTag(value) {
    // if (value === null) return '[object Null]';
    // if (value == null) return '[object Undefined]'
    if (value == null) {
        return value === undefined ? '[object Undefined]' : '[object Null]'
    }
    return toString.call(value)}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript之類型檢測的案例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設公司，，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

新聞標題：JavaScript之類型檢測的案例-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://jinyejixie.com/article30/egipo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、服務器托管、網(wǎng)站排名、企業(yè)建站、網(wǎng)站導航、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)