console.log([] instanceof Array);//->true
console.log(/^$/ instanceof RegExp);//->true
console.log([] instanceof Object);//->true
console.log([].constructor === Array);//->true
console.log([].constructor === Object);//->false
constructor可以避免instanceof檢測數(shù)組的時候,用Object也是true的問題
console.log({}.constructor === Object);//true<br>console.log([].constructor === Object);//false

局限性：

1)用instanceof檢測的時候,只要當(dāng)前的這個類在實例的原型鏈上(可以通過原型鏈__proto__找到它),檢測出來的結(jié)果都是true

var oDiv = document.getElementById("div1");
//HTMLDivElement->HTMLElement->Element->Node->EventTarget->Object
console.log(oDiv instanceof HTMLDivElement);//->true
console.log(oDiv instanceof Node);//->true
console.log(oDiv instanceof Object);//->true

2)基本數(shù)據(jù)類型的值是不能用instanceof來檢測的

console.log(1 instanceof Number);//->false

數(shù)組創(chuàng)建的兩種方式(對象、正則、函數(shù)...)

對于引用數(shù)據(jù)類型來說,我們兩種方式創(chuàng)建出來的都是所屬類的實例,而且都是對象數(shù)據(jù)類型的值,是沒有區(qū)別的

var ary = [];
var ary = new Array;

對于基本數(shù)據(jù)類型來說,雖然不管哪一種方式創(chuàng)建出來的都是所屬類的一個實例(在類的原型上定義的方法都可以使用),但是字面量方式創(chuàng)建出來的是基本數(shù)據(jù)類型,而實例方式創(chuàng)建出來的是對象數(shù)據(jù)類型

var num1 = 1;
var num2 = new Number("1");
console.log(typeof num1,typeof num2);//->"number" "object"

　3)在類的原型繼承中,instanceof檢測出來的結(jié)果其實是不準(zhǔn)確的

function Fn() {}
var f = new Fn;
console.log(f instanceof Array);//->false f不是一個數(shù)組,它就是一個普通的實例(普通的對象)

雖然Fn繼承了Array,但是f沒有l(wèi)ength和數(shù)字索引哪些東西,所以f應(yīng)該不是數(shù)組才對,但是用instanceof檢測的結(jié)果卻是true,因為f雖然不是數(shù)組,但是在f的原型鏈上可以找到Array

function Fn() {
}
Fn.prototype = new Array;//->Fn子類繼承了Array這個父類中的屬性和方法
var f = new Fn;
console.log(f instanceof Array);//->true

3、Object.prototype.toString.call(value) ->找到Object原型上的toString方法,讓方法執(zhí)行,并且讓方法中的this變?yōu)関alue(value->就是我們要檢測數(shù)據(jù)類型的值)

Object.prototype.toString常用來判斷對象值屬于哪種內(nèi)置屬性，它返回一個JSON字符串——"[object 數(shù)據(jù)類型]"。

由于許多引用類型都重寫了Object繼承來的的toStrong方法，所以我們通常使用call或者apply借用Object.prototype.toString函數(shù)來判斷數(shù)據(jù)類型。

當(dāng)然，這樣調(diào)用的默認(rèn)前提是Object.prototype.toString沒有被重寫。

toString:一個方法,轉(zhuǎn)換為字符串?dāng)?shù)據(jù)類型用的方法

每一個數(shù)據(jù)類型所屬類的原型上都有toString方法,例如:Number.prototype/String.prototype/Array.prototype/Function.prototype...

除了Object上的toString,其他類原型上的toString都是把當(dāng)前的數(shù)據(jù)值轉(zhuǎn)換為字符串的意思

null和undefined比較的特殊:他們所屬類Null/Undefined的原型上也有toString,只不過不讓我們用而已,不僅如此其實類的原型都給屏蔽了

HTML元素對象的toString:雖然它的原型鏈很長,但是在其它類的原型上都沒有toString,只有在最底層Object.prototype這上才有

var oDiv = document.getElementById("div1");
oDiv.toString(); //->調(diào)用的其實也是Object.prototype.toString...
//alert、document.write 這兩種輸出的方式其實都是把要輸出的內(nèi)容先轉(zhuǎn)換為字符串,然后再輸出的<br>
alert([]); //->""
alert(true); //->"true"
alert({}); //->這個就要調(diào)用Object.prototype上的toString了 ->"[object Object]"
//定義toString變量是為了簡便書寫，同時降低作用域鏈檢索的性能損耗
var toString = Object.prototype.toString;
console.log(toString.call(1));//[object Number]
console.log(toString.call(undefined));//[object Undefined]
console.log(toString.call(null));//[object Null]
console.log(toString.call(false));//[object Boolean]
console.log(toString.call("s"));//[object String]
console.log(toString.call({}));//[object Object]
console.log(toString.call(/[a]/g));//[object RegExp]
console.log(toString.call(function(){}));//[object Function]

is系列函數(shù)的簡易實現(xiàn)

在明白數(shù)據(jù)類型怎么檢測后，下面我們來簡單實現(xiàn)is系列檢測函數(shù)。

var dataType = {
    '[object Null]' : 'null',
    '[object Undefined]' : 'undefiend',
    '[object Boolean]' : 'boolean',
    '[object Number]' : 'number',
    '[object String]' : 'string',
    '[object Function]' : 'function',
    '[object Array]' : 'array',
    '[object Date]' : 'date',
    '[object RegExp]' : 'regexp',
    '[object Object]' : 'object',
    '[object Error]' : 'error'
  },
  toString = Object.prototype.toString;
function type(obj) {
  return dataType[toString.call(obj)];
}
//生成is系列函數(shù)
function createValidType() {
  for(var p in dataType) {
    var objType = p.slice(8, -1);
    (function(objType) {
      window['is' + objType] = function(obj) {
        return type(obj) === objType.toLowerCase();
      }
    })(objType)
  }
}
createValidType();
console.log(isObject({}));//true
console.log(isDate(new Date()));//true
console.log(isBoolean(false));//true
console.log(isString(1));//false
console.log(isError(1));//false
console.log(isError(new Error()));//true
console.log(isArray([]));//true
console.log(isArray(1));//false

上面代碼里分別實現(xiàn)了isNull、isUndefined、isBoolean、isNumber、isString、isFunction、isArray、isDate、isRegExp、isObject、isError這11個檢測函數(shù)。同時也實現(xiàn)了type函數(shù)，用以檢測數(shù)據(jù)類型。

console.log(type({}));//"object"
console.log(type(new Date()));//"date"
console.log(type(false));//"boolean"
console.log(type(1));//"number"
console.log(type(1));//"number"
console.log(type(new Error()));//"error"
console.log(type([]));//"array"
console.log(type(1));//"number"

createValidType函數(shù)巧用閉包保存數(shù)據(jù)狀態(tài)的特性，批量生成is系列函數(shù)。

以上所述是小編給大家介紹的JS中檢測數(shù)據(jù)類型的幾種方式及優(yōu)缺點小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: