JavaScript之類型檢測的案例

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

一、typeof

typeof：操作符返回一個字符串，表示未經計算的操作數的類型。

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

1. Undefined

2. Null

3. Boolean

4. Number

5. String

6. Object

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

1. Undefined

2. object – ***

3. Boolean

4. Number

5. String

6. Object

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

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

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

總結

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

二、instanceof

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

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

定義

instanceof 運算符用于檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。

實例

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和原型鏈規則的父子類關系的對象都能被匹配：

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的結果：

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

總結

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

三、constructor

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

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

定義

返回創建實例對象的 Object 構造函數的引用。注意，此屬性的值是對函數本身的引用，而不是一個包含函數名稱的字符串。

實例

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

對象的constructor會返回它的類型，而類型在定義的時候，會創建一個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——類型標簽

如果你看過一些庫的早期實現，你會發現使用Object.prototype.toString來做類型判斷的方式，他們會數據類型的字符串標志，被稱作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時都做了什么？

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

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 方法被調用的時候，下面的步驟會被執行：

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

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

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

4. 讓 class 成為 O 的內部屬性 [[Class]] 的值

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

注意

有幾點我們需要注意：

• toString無法區分原始類型及其構造對象；

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

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

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

五、實現幾個數據檢測的方法

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

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之類型檢測的案例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!