JS数据类型的判断
在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示:
基本类型:String、Number、Boolean、Symbol、Undefined、Null
引用类型:Object
基本类型也称为简单类型,由于其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈中,即按值访问。
引用类型也称为复杂类型,由于其值的大小会改变,所以不能将其存放在栈中,否则会降低变量查询速度,因此,其值存储在堆(heap)中,而存储在变量处的值,是一个指针,指向存储对象的内存处,即按址访问。引用类型除 Object 外,还包括 Function 、Array、RegExp、Date 等等。
鉴于 ECMAScript 是松散类型的,因此需要有一种手段来检测给定变量的数据类型。对于这个问题,JavaScript 也提供了多种方法,但遗憾的是,不同的方法得到的结果参差不齐。
下面介绍常用的4种方法,并对各个方法存在的问题进行简单的分析。
1、typeof
typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。
> typeof ''; // string 有效
> typeof 1; // number 有效
> typeof Symbol(); // symbol 有效
> typeof true; //boolean 有效
> typeof undefined; //undefined 有效
> typeof null; //object 无效
> typeof [] ; //object 无效
> typeof new Function(); // function 有效
> typeof new Date(); //object 无效
> typeof new RegExp(); //object 无效
有些时候,typeof 操作符会返回一些令人迷惑但技术上却正确的值:
对于基本类型,除 null 以外,均可以返回正确的结果。
对于引用类型,除 function 以外,一律返回 object 类型。
对于 null ,返回 object 类型。
对于 function 返回 function 类型。
其中,null 有属于自己的数据类型 Null , 引用类型中的 数组、日期、正则 也都有属于自己的具体类型,而 typeof 对于这些类型的处理,只返回了处于其原型链最顶端的 Object 类型,没有错,但不是想要的结果。
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;// true
[] 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__([]) --> __proto__(Array.prototype) --> __proto__(Object.prototype) --> null
从原型链可以看出,[] 的 __proto__ 直接指向Array.prototype,间接指向 Object.prototype,所以按照 instanceof 的判断规则,[] 就是Object的实例。依次类推,类似的 new Date()、new Person() 也会形成一条对应的原型链 。因此,instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。
instanceof 操作符的问题在于,它假定只有一个全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。
> 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 类型,而不区分该对象在哪个环境中创建。
if (Array.isArray(value)){
//对数组执行某些操作
}
Array.isArray() 本质上检测的是对象的 [[Class]] 值,[[Class]] 是对象的一个内部属性,里面包含了对象的类型信息,其格式为 [object Xxx] ,Xxx 就是对应的具体类型 。对于数组而言,[[Class]] 的值就是 [object Array] 。
3、constructor
当一个函数 F被定义时,JS引擎会为F添加 prototype 原型,然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。如下所示:
> function F(){}
< undefined
> F.prototype
< Object {}
>constructor: function F()
>__proto__: Object
>
当执行 var f = new F() 时,F 被当成了构造函数,f 是F的实例对象,此时 F 原型上的 constructor 传递到了 f 上,因此 f.constructor == F
> var f =new F()
< undefined
> f.constructor == F
< true
>
可以看出,F 利用原型对象上的 constructor 引用了自身,当 F 作为构造函数来创建对象时,原型上的 constructor 就被遗传到了新创建的对象上, 从原型链角度讲,构造函数 F 就是新对象的类型。这样做的意义是,让新对象在诞生以后,就具有可追溯的数据类型。
同样,JavaScript 中的内置对象在内部构建时也是这样做的:
> ''.constructor == String
< true
> new Number(1).constructor == Number
< true
> true.constructor == Boolean
< true
> new Function().constructor == Function
< true
> new Date().constructor == Date
< true
> new Error().constructor == Error
< true
> [].constructor == Array
< true
> document.constructor == HTMLDocument
< true
> window.constructor == window
< true
>
细节问题:
1. null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。
2. 函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object
> function F(){}
< undefined
> F.prototype = {a: 'xxxx'}
< Object {a: "xxxx"}
> var f = new F()
< undefined
> f.constructor == F
< false
> f.constructor
< function Object() {[native code]}
>
为什么变成了 Object?
因为 prototype 被重新赋值的是一个 { }, { } 是 new Object() 的字面量,因此 new Object() 会将 Object 原型上的 constructor 传递给 { },也就是 Object 本身。因此,为了规范开发,在重写对象原型时一般都需要重新给 constructor 赋值,以保证对象实例的类型不被篡改。
4、toString
toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。
对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。
> Object.prototype.toString.call('') ; // [object String]
> Object.prototype.toString.call(1) ; // [object Number]
> Object.prototype.toString.call(true) ; // [object Boolean]
> Object.prototype.toString.call(Symbol()); //[object Symbol]
> 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 的引用
JS数据类型的判断的更多相关文章
- js数据类型的判断方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- js数据类型及判断数据类型
众所周知,js有7种数据类型 1. null 2. undefined 3. boolean 4. number 5. string 6. 引用类型(object.array.function) 7. ...
- 前端基础——js数据类型及判断方法
一.数据类型 我们通常熟知的数据类型有六种,包括5种基本数据类型(Number, String, Boolean, Undefined, Null)和一种引用数据类型(Object).ES6又新增了一 ...
- js数据类型之判断
js有几种类型,具体是:字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义(Undefined). js提供了typ ...
- js 数据类型的判断
1. typeof 运算符 typeof 可以判断基本数据类型: typeof 123; // "number" typeof 'abc'; // "string&quo ...
- 实现 js 数据类型的判断函数type
type = (obj) => { const pass1 = typeof obj if (pass1 != 'object') return pass1 const pass2 = obj ...
- js中的数据类型和判断数据类型
js中的数据类型和判断数据类型 基本数据类型,六大基本数据类型:字符串(String).数字(Number).布尔(Boolean).对象(Object).空(Null).未定义(Undefined) ...
- 正确判断js数据类型 总结记录
正确判断js数据类型 总结记录 判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. 三方库. js六大数据类型 number: 数 ...
- 浏览器解析js和type判断数据类型
### 浏览器解析: - 1.当浏览器(内核.引擎)解析和渲染js的时候,会给js提供一个运行的环境,这个环境叫做“全局作用域(后端global / 客服端window scope)” - 2.代码自 ...
随机推荐
- bzoj1452
题解: 二位树状数组 然后我开了300*300*300就T了 代码: #include<bits/stdc++.h> using namespace std; ; ],q; int fin ...
- vuex-getter
store 的计算属性. getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算 const store = new Vuex.Store({ state: { t ...
- 8.6 C++文本文件的读写操作
参考:http://www.weixueyuan.net/view/6412.html 总结: 文件类型: 计算机上的文件其实是数据的集合,对文件的读写归根结底还是对数据的读写操作.文件可以大致分为两 ...
- Kerberos主从配置文档
Kerberos主从配置文档 1. Kerberos主从同步机制 在Master上通过以下命令同步数据: kdb5_util dump /var/kerberos/krb5kdc/slave_db ...
- LINK : fatal error LNK1104: cannot open file .exe' 重开application Experience 服务即可
这是一个坑, , 答案五花八门这个解决了我的痛点. 就这样了.
- RHEL 6 和 RHEL 7 的一些有关运行级别,服务管理,服务启动等方面的区别介绍
systemd是7中的新命令组,集成了service和chkconfig的功能.system命令可参考:https://www.cnblogs.com/ray-bk/p/10415173.html 运 ...
- 团队项目(MVP------新能源无线充电管理网站)(个人任务3)
现在我们组的项目已经完成了,之前做的欢迎界面已经废弃掉了,于是我重新制作了一个欢迎界面,主要是分为了团队介绍,充电商品的介绍,现在充电新闻的发展,解决方案,成功案例.其中产品里面又有两个商品的售卖页, ...
- 剑指Offer 43. 左旋转字符串 (字符串)
题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=&quo ...
- 弹性布局(Flex布局)整理
一. 弹性布局 一个好的网站都有让用户看上去很舒服的布局,一个网站的布局也会或多或少影响到它的浏览量,看完阮大神的博客,就想把弹性布局整理一下. 在平时的我们常用的布局类型有以下几种: 1.浮动+定 ...
- Python全栈之路----三元运算
· 三元运算又称三目运算,是对简单条件语句的简写,如: 简单条件语句: if 条件成立: val = 1 else: val = 2 改成三元运算: val = 1 if 条件成立 else 2 &g ...