JavaScript之類型檢測(cè)的案例-創(chuàng)新互聯(lián)

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

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

一、typeof

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

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

  1. Undefined

  2. Null

  3. Boolean

  4. Number

  5. String

  6. Object

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

  1. Undefined

  2. object – ***

  3. Boolean

  4. Number

  5. String

  6. Object

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

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

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

總結(jié)

在檢測(cè)Js的原始類型時(shí)，除了typeof null返回object之外，其他的都返回對(duì)應(yīng)類型名的小寫字母。

二、instanceof

我們判斷對(duì)象類型的時(shí)候，可以使用instanceof：

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

定義

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

實(shí)例

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，因?yàn)镺bject是Array的父類。


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

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借助了原型鏈來(lái)判斷的實(shí)際上，只要一個(gè)類型Type的prototype在一個(gè)對(duì)象obj的原型鏈上，那么obj instanceof Type就是true，否則就是false。

三、constructor

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

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

定義

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

實(shí)例

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

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


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

疑問(wèn)

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

  • 我們可以修改它嗎？

四、stringTag是什么？

4.1 stringTag——類型標(biāo)簽

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

4.2 Object.prototype.toString

定義

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

每個(gè)對(duì)象都有一個(gè)toString() 方法，當(dāng)該對(duì)象被表示為一個(gè)文本值時(shí)，默認(rèn)情況下，toString() 方法被每個(gè) Object 對(duì)象繼承。

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

實(shí)例

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

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

toString時(shí)都做了什么？

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

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)用的時(shí)候，下面的步驟會(huì)被執(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 和 “]” 三個(gè)部分組成的字符串

注意

有幾點(diǎn)我們需要注意：

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

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

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

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

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

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

5.1 isObject

注意，我們認(rèn)為null不是一個(gè)對(duì)象，它就是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之類型檢測(cè)的案例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞標(biāo)題：JavaScript之類型檢測(cè)的案例-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://muchs.cn/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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)