js基础-判断js数据类型的方法

首先了解一下js的数据类型: 查阅了MDN文档 最新的 ECMAScript 标准定义了7种数据类型:

  • 6种原始类型

    • boolean
    • Null
    • Undefined
    • Number
    • String
    • Symbol
  • 和 Object (Regexp,Function,Array,Date 。。。)

typeof

typeof 判断一个变量的类型可以得到这几种结果:Number、 String、 Boolean、 Function、 Object、 Undefined、 Symbol

例如:使用typeof获取一个变量是否存在

应使用:if(typeof a != undefined) {...}

不应使用:if(a) {} 因为如果a不存在(未声明)会报错

typeof局限性:

如果用typeof 判断 Array Date Object RegExp Error null等 类型的变量 得到的结果都会是object

instanceof

如果我们需要获取一个对象的具体类型(例如:一个变量是否是数组,或者是某个对象的实例),就应该使用instanceof

例如:

var newarr = new Array()
console.log(newarr instanceof Array) // true
console.log(newarr instanceof Object) // 结果也是true 因为Array 是Object 的子类
复制代码

再如:

function Test() {}
var newtest = new Test()
console.log(newtest instanceof Test) // true
复制代码

constructor

constructor属性 返回 创建实例对象的构造函数的引用

先看一个例子:

var test = new Array();
console.log(test.constructor == Array) // true
复制代码

实际上就是每一个构造函数的原型上有一个constructor属性指向构造函数本身,构造函数的实例会从原型上继承constructor属性

var Foo = function () {}
console.log(Foo.prototype.constructor === Foo) // true
var f = new Foo()
console.log(f.constructor === Foo) // true
复制代码

然而,constructor属性是可以重新复制或者覆盖的(如:Foo.prototype.constructor = A),这会引起类型判断的错误。即使我们一般不会刻意去给constructor属性赋值,但是有一些情况下constructor属性的值和我们所期望的值不同

var baseClass = function(){}
var derivedClass = function(){}
derivedClass.prototype = new baseClass()

var obj = new derivedClass()
console.log(obj.constructor === derivedClass) // false
console.log(obj.constructor === baseClass) // true
复制代码

因为子类的prototype以父类的实例为原型,所以通过子类实例访问constructor就是父类构造函数。因此在JavaScript面向对象编程中,我们会在定义子类时加上一句代码来纠正constructor属性。

derivedClass.prototype.constructor = derivedClass

Object.prototype.toString

了解一下比较巧妙的判断对象类型的方法Object.prototype.toString().call()

Object.prototype.toString.call(10) // "[object Number]"
Object.prototype.toString.call(NaN) // "[object Number]"
Object.prototype.toString.call([1,2,3]) // "[object Array]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(/[a-z]/) // "[object RegExp]"
Object.prototype.toString.call(function(){}) // "[object Function]"

//null and undefined in Chrome and Firefox. In IE "[object Object]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
var a = new Foo()
Object.prototype.toString.call(a) // "[object Object]"
复制代码

总结

根据上面方法的介绍:

  • 判断基本类型使用 typeof
  • 判断引用类型使用 instanceof 或者 constructor,但是constructor 可以被重写或覆盖,所以不可信赖,因此更多使用 instanceof
  • Object.prototype.toString 任何情况都可用

转载于:https://juejin.im/post/5c9f4a456fb9a05e1c4cef8b

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值