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

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

一、typeof

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

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

1. Undefined

2. Null

3. Boolean

4. Number

5. String

6. Object

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

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之外，其他的都返回對應(yīng)類型名的小寫字母。

二、instanceof

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

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

定義

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ī)則的父子類關(guān)系的對象都能被匹配：

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

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

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

定義

返回創(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——類型標(biāo)簽

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

4.2 Object.prototype.toString

定義

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

每個對象都有一個toString() 方法，當(dāng)該對象被表示為一個文本值時，默認(rèn)情況下，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 “]”.

當(dāng) 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)造對象；

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

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

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

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

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

5.1 isObject

注意，我們認(rèn)為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)}

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

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

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

廣告

聲明：本網(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)