zoukankan      html  css  js  c++  java
  • JS检测数据类型

      如果你要判断的是基本数据类型或JavaScript内置对象,使用toString; 如果要判断的时自定义类型,请使用instanceof

    1.typeof

    typeof操作符返回的是类型字符串,它的返回值有6种取值:

    typeof 3 // "number"
    typeof "abc" // "string"
    typeof {} // "object"
    typeof true // "boolean"
    typeof undefined // "undefined"
    typeof function(){} // "function"

    所有对象的typeof都是"object",不能用于检测用户自定义类型。 比如DateRegExpArrayDOM Element的类型都是"object"

    typeof []   // "object"

    typeof还有一个知名的bug:

    typeof null     // "object"

    null是基本数据类型,它的类型显然是Null。其实这也反映了null的语义, 它是一个空指针表示对象为空,而undefined才表示什么都没有。 总之,typeof只能用于基本数据类型检测,对于null还有Bug。

    2.instanceof

    instanceof操作符用于检查某个对象的原型链是否包含某个构造函数的prototype属性。例如:

    obj instanceof Widget

    obj的原型链上有很多对象(隐式原型),比如:obj.__proto__obj.__proto__.__proto__, ...
    如果这些对象里存在一个p === Widget.prototype,那么instanceof结果为true,否则为false

    instanceof是通过原型链来检查类型的,所以适用于任何"object"的类型检查。

    // 比如直接原型关系
    function Animal(){ }
    (new Animal) instanceof Animal     // true
    
    // 原型链上的间接原型
    function Cat(){}
    Cat.prototype = new Animal
    (new Cat) instanceof Animal         // true

    instanceof也可以用来检测内置兑现,比如ArrayRegExpObjectFunction

    [1, 2, 3] instanceof Array // true
    /abc/ instanceof RegExp // true
    ({}) instanceof Object // true
    (function(){}) instanceof Function // true

    instanceof对基本数据类型不起作用,因为基本数据类型没有原型链。

    3 instanceof Number // false
    true instanceof Boolean // false
    'abc' instanceof String // false
    null instanceof XXX  // always false
    undefined instanceof XXX  // always false

    但你可以这样:

    new Number(3) instanceof Number // true
    new Boolean(true) instanceof Boolean // true
    new String('abc') instanceof String // true

    但这时你已经知道数据类型了,类型检查已经没有意义了。

    另外,instance还存在着跨窗口的问题

    iWindow.document.write('<script> var arr = [1, 2]</script>');
    iWindow.arr instanceof Array            // false
    iWindow.arr instanceof iWindow.Array    // true

    3.constructor

    constructor属性返回一个指向创建了该对象原型的函数引用。需要注意的是,该属性的值是那个函数本身。例如:

    function Animal(){}
    var a = new Animal
    a.constructor === Animal    // true

    constructor不适合用来判断变量类型。首先因为它是一个属性,所以非常容易被伪造:

    var a = new Animal
    a.constructor == Array
    a.constructor === Animal    // false

    另外constructor指向的是最初创建当前对象的函数,是原型链最上层的那个方法:

    function Cat(){}
    Cat.prototype = new Animal
    
    function BadCat(){}
    BadCat.prototype = new Cat
    
    (new BadCat).constructor === Animal   // true
    Animal.constructor === Function       // true

    instanceof类似,constructor只能用于检测对象,对基本数据类型无能为力。 而且因为constructor是对象属性,在基本数据类型上调用会抛出TypeError异常:

    null.constructor         // TypeError!
    undefined.constructor    // TypeError!

    instanceof不同的是,在访问基本数据类型的属性时,JavaScript会自动调用其构造函数来生成一个对象。例如:

    (3).constructor === Number // true
    true.constructor === Boolean // true
    'abc'.constructor === String // true
    // 相当于
    (new Number(3)).constructor === Number
    (new Boolean(true)).constructor === Boolean
    (new String('abc')).constructor === String

    4.toString

    toString方法是最为可靠的类型检测手段,它会将当前对象转换为字符串并输出。 toString属性定义在Object.prototype上,因而所有对象都拥有toString方法。 但ArrayDate等对象会重写从Object.prototype继承来的toString, 所以最好用Object.prototype.toString来检测类型。

    toString = Object.prototype.toString;
    
    toString.call(new Date);    // [object Date]
    toString.call(new String);  // [object String]
    toString.call(Math);        // [object Math]
    toString.call(3);           // [object Number]
    toString.call([]);          // [object Array]
    toString.call({});          // [object Object]
    
    // Since JavaScript 1.8.5
    toString.call(undefined);   // [object Undefined]
    toString.call(null);        // [object Null]

    toString也不是完美的,它无法检测用户自定义类型。 因为Object.prototype是不知道用户会创造什么类型的, 它只能检测ECMA标准中的那些内置类型。

    toString.call(new Animal)   // [object Object]

    因为返回值是字符串,也避免了跨窗口问题。当然IE弹窗中还是有Bug,不必管它了。

    Object.prototype.toString类似地,Function.prototype.toString也有类似功能, 不过它的this只能是Function,其他类型(例如基本数据类型)都会抛出异常。

    判断window对象:

    isWindow: function(obj){
        return obj && typeof obj === 'object' && "setInterval" in obj;
    }




  • 相关阅读:
    IOS苹果应用IPA一键签名工具(苹果重签名,企业签名,Windows平台,时间控制)
    BZ全景编辑器
    HTML/网站一键打包APK工具(html网页打包安卓APP应用)
    HTML网页/KRPano项目一键打包EXE工具(HTML网页打包成单个windows可执行文件exe)
    KRPano资源分析工具使用说明(KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化)
    IOS苹果应用IPA重签名软件手机版(苹果重签名,企业签名,安卓苹果平台,时间控制)
    使用HTML一键打包IPA工具打包KRPANO全景项目
    使用HTML一键打包APK工具打包KRPANO全景项目
    使用HTML一键打包EXE工具打包KRPANO全景项目
    从现实产品生产理解创建型设计模式
  • 原文地址:https://www.cnblogs.com/shytong/p/5094626.html
Copyright © 2011-2022 走看看