判断JS数据类型的几种方法

原文转自http://www.cnblogs.com/onepixel/p/5126046.html

说到数据类型,我们先说一下JavaScript 中常见的几种数据类型:

基本类型:string,number,boolean

特殊类型:undefined,null

引用类型:Object,Function,Function,Array,RegExp,Date,...

很多时候我们都需要通过判断变量的数据类型来进行下一步操作,下面我们介绍常用的4种方法:

typeof ‘‘; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Function(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

typeof 可以对JS基础数据类型做出准确的判断,而对于引用类型返回的基本上都是object, 其实返回object也没有错,因为所有对象的原型链最终都指向了Object,Object是所有对象的`祖宗`。 但当我们需要知道某个对象的具体类型时,typeof 就显得有些力不从心了。

2、instanceof

instanceof 是用来判断 A 是否为 B 的实例对,表达式为:A instanceof B,如果A是B的实例,则返回true,否则返回false。 在这里需要特别注意的是:instanceof检测的是原型,我们用一段伪代码来模拟其内部执行过程:

instanceof (A,B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        //A的内部属性__proto__指向B的原型对象
        return true;
    }
    return false;
}

从上述过程可以看出,当 A 的 __proto__ 指向 B 的 prototype 时,就认为A就是B的实例,我们再来看几个例子:

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true

function Person(){};
new Person() instanceof Person;

[] instanceof Object; //true
new Date() instanceof Object;//true
new Person instanceof Object;//true

我们发现,虽然 instanceof 能够判断出 [] 是Array的实例,但它认为 [] 也是Object的实例,为什么呢? 我们来分析一下[]、Array、Object 三者之间的关系: 从instanceof 能够判断出 [].__proto__ 指向 Array.prototype, 而 Array.prototype.__proto__ 又指向了Object.prototype,Object.prototype.__proto__ 指向了null,标志着原型链的结束。因此,[]、Array、Object就形成了如下图所示的一条原型链:

从原型链可以看出,[] 的 __proto__  直接指向Array.prototype, 间接指向Object.prototype, 所以按照 instanceof 的判断规则,[] 就是Object的实例。当然,类似的new Date()、new Person() 也会形成这样一条原型链,因此,instanceof 只能用来判断两个对象是否属于原型链的关系, 而不能获取对象的具体类型。

3、constructor

当一个函数F被定义时,JS引擎会为F添加prototype原型,然后再在prototype上添加一个constructor属性,并让其指向F的引用。如下所示:

当执行 var f = new F() 时,F被当成了构造函数,f是F的实例对象,此时F原型上的constructor传递到了f上,因此f.constructor == F

可以看出,JS在函数F的原型上定义了constructor,当F被当作构造函数用来创建对象时,创建的新对象就被标记为了“F” 类型,使得新对象有名有姓,可以追溯。

同理,JS中的数据类型也遵守这个规则:

细节问题:

  • null和undefined是无效的对象,因此是不会有constructor存在的,这两种类型的数据需要通过typeof来判断。
  • JS对象的constructor是不稳定的,这个主要体现在自定义对象上,当开发者重写prototype后,原有的constructor会丢失,constructor会默认为Object

为什么变成了Object?

prototype被重新赋值的是一个{}, {}是new Object()的字面量,因此new Object()会将Object原型上的constructor传递给{},也就是Object本身。

因此,为了规范,在重写对象原型时一般都需要重新给constructor赋值,以保证实例对象的类型不被改写。

4、Object.prototype.toString

toString是Object原型对象上的一个方法,该方法默认返回其调用者的具体类型,更严格的讲,是 toString运行时this指向的对象类型, 返回的类型格式为[object,xxx],xxx是具体的数据类型,其中包括:String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument,... 基本上所有对象的类型都可以通过这个方法获取到。

Object.prototype.toString.call(‘‘) ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局对象global的引用

需要注意的是,必须通过Object.prototype.toString.call来获取,而不能直接 new Date().toString(), 从原型链的角度讲,所有对象的原型链最终都指向了Object, 按照JS变量查找规则,其他对象应该也可以直接访问到Object的toString方法,而事实上,大部分的对象都实现了自身的toString方法,这样就可能会导致Object的toString被终止查找,因此要用call来强制执行Object的toString方法。

时间: 2025-01-04 21:21:18

判断JS数据类型的几种方法的相关文章

js判断复合数据类型的两种方式(typeof不奏效了)

js判断复合数据类型的两种方式(typeof不奏效了) 博客分类: Web前端-JS语言核心 JavaScript 作者:zccst typeof认为所有的复合数据类型都是"object",没法进一步细分,所以还得用其他方法 先上结论: 1,(arr && typeof(arr) === "object" && arr.constructor === Array) 2,Object.prototype.toString.call(ar

在JavaScript中判断整型的N种方法

整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们看看一些例子. 通过余数检查 你可以使用余数运算(%),将一个数字按1求余,看看余数

动态加载JS脚本的4种方法

要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script>   2.动态改变已有script的src属性 <script src='' id="s1"></script> <

js去除空格12种方法

注:本文转载于csdn:黄卉博主的文章<js去除空格12种方法> 实现1 1 String.prototype.trim = function() { 2 return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 3 } 看起来不怎么样, 动用了两次正则替换,实际速度非常惊人,主要得益于浏览器的内部优化.一个著名的例子字符串拼接,直接相加比用Array做成的StringBuffer 还快.base2类库使用这种实现.实现2 1 Strin

php变量判断为空的几种方法

1.isset  主要用来判断变量是否被初始化过 注意:当使用isset来判断数组元素是否被初始化过时,它的效率比array_key_exists高4倍左右 2.empty  可以将值为 "假"."空"."0"."NULL"."未初始化" 的变量都判断为TRUE 3. is_null  仅把值为 "NULL" 的变量判断为TRUE 4.var == null  把值为 "假&q

判断js中的数据类型的几种方法

判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异同. 先举几个例子: 1 var a = "iamstring."; 2 var b = 222; 3 var c= [1,2,3]; 4 var d = new Date(); 5 var e = function(){alert(111);}; 6 var f = function()

转:判断js中的数据类型的几种方法

判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异同. 先举几个例子: var a = "iamstring."; var b = 222; var c= [1,2,3]; var d = new Date(); var e = function(){alert(111);}; var f = function(){this.name=&

js数组去重三种方法

本文讲述三种js去重方法 第一种方法思路: 1.构建一个新的数组存放结果2.for循环中每次从原数组中取出一个元素,查看元素是否在结果数组3.若结果数组中没有该元素,则存到结果数组中,否则跳入下次循环.代码如下: 1 Array.prototype.unique = function(){ 2 var res = [this[0]]; 3 for(var i = 1; i < this.length; i++){ 4 if(res.indexOf(this[i])>=0){ 5 continu

js单线程和js异步操作的几种方法

一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM. 这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 单线程就意味着,所有任务需要排队,前一个任务结束,才会执