typeof、instanceof、 constructor、 prototype方法比较

(摘自如何判断JS中的数据类型

1. 使用typeof操作符。

  对一个值使用 typeof 操作符可能返回下列某个字符串,返回的类型都是字符串形式。

  (1) undefined:如果这个值未定义

  (2) boolean:如果这个值是布尔值

  (3) string:如果这个值是字符串

  (4) number:如果这个值是数值

  (5) object:如果这个值是对象null

  (6) function:如果这个值是函数

  需要注意:typeof不适合用于判断是否为数组。当使用typeof判断数组和对象的时候,都会返回object。

       可以使用isArray()来判断是否为数组。

2. instanceof

  instanceof 运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。需要区分大小写。

  简单的来说,instanceof 用于判断一个变量是否某个对象的实例。

  例:var arr = new Array( );

    alert(arr instanceof Array);   // 返回true

  需要注意的是,instanceof只能用来判断对象和函数,不能用来判断字符串和数字等。判断它是否为字符串和数字时,只会返回false。

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

1
2
3
4
5
6
7
8
9
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 的实例,我们再来看几个例子:

1
2
3
4
5
6
7
8
9
10
[] 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 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。

instanceof 操作符的问题在于,它假定只有一个全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

1
2
3
4
5
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[0].Array;
var arr =new xArray(1,2,3);// [1,2,3]
arr instanceof Array;// false

针对数组的这个问题,ES5 提供了 Array.isArray() 方法 。该方法用以确认某个对象本身是否为 Array 类型,而不区分该对象在哪个环境中创建。

1
2
3
if (Array.isArray(value)){
   //对数组执行某些操作
}

Array.isArray() 本质上检测的是对象的 [[Class]] 值,[[Class]] 是对象的一个内部属性,里面包含了对象的类型信息,其格式为 [object Xxx] ,Xxx 就是对应的具体类型 。对于数组而言,[[Class]] 的值就是 [object Array] 。

3. constructor

  constructor 属性返回对创建此对象的数组函数的引用。

  在JavaScript中,每个具有原型的对象都会自动获得constructor属性。

  例:

  以下代码中的[native code],表示这是JavaScript的底层内部代码实现,无法显示代码细节。  

  1. // String
  2. var str = "字符串";
  3. alert(str.constructor); // function String() { [native code] }
  4. alert(str.constructor === String); // true
  5.  
  6. // Array
  7. var arr = [1, 2, 3];
  8. alert(arr.constructor); // function Array() { [native code] }
  9. alert(arr.constructor === Array); // true
  10.  
  11. // Number
  12. var num = 5;
  13. alert(num.constructor); // function Number() { [native code] }
  14. alert(num.constructor === Number); // true

4. prototype

  以上三种方法多少都会有一些不能判断的情况。为了保证兼容性,可以通过Object.prototype.toString方法,判断某个对象值属于哪种内置类型。

  需要注意区分大小写。

  1. alert(Object.prototype.toString.call(“字符串”) === ‘[object String]’) -------> true;
  2. alert(Object.prototype.toString.call(123) === ‘[object Number]’) -------> true;
  3. alert(Object.prototype.toString.call([1,2,3]) === ‘[object Array]’) -------> true;
  4. alert(Object.prototype.toString.call(new Date()) === ‘[object Date]’) -------> true;
  5. alert(Object.prototype.toString.call(function a(){}) === ‘[object Function]’) -------> true;
  6. alert(Object.prototype.toString.call({}) === ‘[object Object]’) -------> true;

判断JS的数据类型的更多相关文章

  1. 判断js中数据类型 的最短代码

    判断字符串类型的: function isString(obj) { return obj+"" === obj; } 判断bool类型的: function isBool(obj ...

  2. 如何判断js中的数据类型?

    js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...

  3. 如何判断js中的数据类型

    如何判断js中的数据类型:typeof.instanceof. constructor. prototype方法比较 如何判断js中的类型呢,先举几个例子: var a = "iamstri ...

  4. [转]如何判断js中的数据类型

    原文地址:http://blog.sina.com.cn/s/blog_51048da70101grz6.html 如何判断js中的数据类型:typeof.instanceof. constructo ...

  5. 如何判断js中的数据类型(转)

    如何判断js中的数据类型:typeof.instanceof. constructor. prototype方法比较 如何判断js中的类型呢,先举几个例子: var a = "iamstri ...

  6. 判断js中的数据类型

    如何判断js中的数据类型:typeof.instanceof. constructor. prototype方法比较 如何判断js中的类型呢,先举几个例子: var a = "iamstri ...

  7. Js中数据类型判断的几种方法

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

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

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

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

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

随机推荐

  1. MySQL5.7.32 通用版本安装

    1 上传镜像,配置好yum源 2 下载MySQL相关的包 https://dev.mysql.com/downloads/mysql/ 3  解压安装: tar -zxvf mysql-5.7.23- ...

  2. 全志A33 lichee怎样编译镜像

    对于全志A33 lichee编译镜像文件需要先搭建好交叉编译环境,这个搭建环境可以看之前的文档 "SINA33开发板怎样创建编译环境" 开发平台 * 芯灵思SinlinxA33开发 ...

  3. PythonStudy——内存管理机制 Memory management mechanism

    一.变量与对象 关系图如下: 1.变量:通过变量指针引用对象 变量指针指向具体对象的内存空间,取对象的值. 2.对象:类型已知,每个对象都包含一个头部信息(头部信息:类型标识符和引用计数器) 注意: ...

  4. exactly-once和kafka

    Exactly-Once的概念是指"恰好一次",简单讲就是同一个数据只会被处理一次,应用有机质保证不会重复处理同一条数据(如果数据因为因为网络业务异常被发送多次):Exactly- ...

  5. Guava 2:Basic utilities基本工具

    一.引子 Guava的经典很大一部分原因来源于对于基础工具类的封装,使用这些类能够让我们的代码更加优雅且完善,这些类大部分都在com.google.common.base包下. 注:JDK有很多借鉴g ...

  6. jenkins使用(ubuntu16.0环境)

    本文总结了使用jenkins过程.大部分是网上链接,以后自已查看使用. ssh远程链接服务器 检查是否开启ssh   ps -ef|grep ssh 1.安装ssh 2.开启root用户 3.充许ro ...

  7. 解决python3.5无法导入cv2.so的问题

    问题描述: 在python3.5环境中导入cv2报错,在python2.7中正常.注:命令行的前缀RL_2018HW是python3.5的环境. (RL_2018HW) gordon@gordon-: ...

  8. 设置Tomcat管理员用户名和密码

    http://dove19900520.iteye.com/blog/1774980 今天tomcat出点问题,然后我就想进入tomcat manager看看,结果怎么输入密码都不行,后来网上查了查才 ...

  9. 关于Spring的那点事

    一.Spring约束 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="htt ...

  10. 廖雪峰Java7处理日期和时间-3java.time的API-2ZonedDateTime

    ZonedDatetime = LocalDateTime + ZoneId ZonedDateTime:带时区的日期和时间 ZoneId:新的API定义的时区对象(取代几句的java.util.Ti ...