javascript之typeof、instanceof操作符使用探讨


Posted in Javascript onMay 19, 2013

写javascirpt代码时,typeof和instanceof这两个操作符时不时就会用到,堪称必用。但是!使用它们总是不能直接的得到想要的结果,非常纠结,普遍的说法认为“这两个操作符或许是javascript中最大的设计缺陷,因为几乎不可能从他们那里得到想要的结果”
typeof
说明:typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function。
从说明来看,貌似没什么问题。

下面的代码写了一个数值变量,typeof后的结果是"number"。

var a = 1; 
console.log(typeof(a)); //=>number

如果用Number类型的构造函数new一个变量的话,typeof后的结果是"object"。
var a = new Number(1); 
console.log(typeof(a)); //=>object

上面的这两个输出结果看似没啥问题,这一点从书上看来是理所当然的事情,因为javascript就是这么设计的。

但是!问题就在于既然调用了typeof就应该准确返回一个变量的类型,不管是直接用值创建的还是用类型的构造函数创建的,否则!我还用你做啥!
那么对于:

var a = 1; 
var b = new Number(1);

a和b变量的类型准确的说来都应该是Number才是想要的结果。
而准确的类型信息保存在变量的内部属性 [[Class]] 的值中,通过使用定义在 Object.prototype 上的方法 toString来获取。

获取类型信息:

var a = 1; 
var b = new Number(1); 
console.log(Object.prototype.toString.call(a)); 
console.log(Object.prototype.toString.call(b));

输出:
[object Number] 
[object Number]

是不是已经很直接了,我们稍微处理一下,得到直接结果:
var a = 1; 
var b = new Number(1); 
console.log(Object.prototype.toString.call(a).slice(8,-1)); 
console.log(Object.prototype.toString.call(b).slice(8,-1));

输出:
Number
Number
这就是想要的结果。
为了更好的使用,我们封装一个方法,用来判断某个变量是否是某种类型:
function is(obj,type) { 
var clas = Object.prototype.toString.call(obj).slice(8, -1); 
return obj !== undefined && obj !== null && clas === type; 
}

定义一些变量做过测试,先来看看它们的typeof输出:
var a1=1; 
var a2=Number(1); 
var b1="hello"; 
var b2=new String("hello"); 
var c1=[1,2,3]; 
var c2=new Array(1,2,3); 
console.log("a1's typeof:"+typeof(a1)); 
console.log("a2's typeof:"+typeof(a2)); 
console.log("b1's typeof:"+typeof(b1)); 
console.log("b2's typeof:"+typeof(b2)); 
console.log("c1's typeof:"+typeof(c1)); 
console.log("c2's typeof:"+typeof(c2)); 
输出: 
a1's typeof:number 
a2's typeof:object 
b1's typeof:string 
b2's typeof:object 
c1's typeof:object 
c2's typeof:object

我们再用新作的函数是一下:
console.log("a1 is Number:"+is(a1,"Number")); 
console.log("a2 is Number:"+is(a2,"Number")); 
console.log("b1 is String:"+is(b1,"String")); 
console.log("b2 is String:"+is(b2,"String")); 
console.log("c1 is Array:"+is(c1,"Array")); 
console.log("c2 is Array:"+is(c2,"Array")); 
输出: 
a1 is Number:true 
a2 is Number:true 
b1 is String:true 
b2 is String:true 
c1 is Array:true 
c2 is Array:true

注:typeof也不是无用,实际用处是用来检测一个变量是否已经定义或者是否已经赋值。
instanceof
说明:判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例。
instanceof 操作符用来比较两个内置类型的变量时一样力不从心,同样会对结果不满意。
console.log("abc" instanceof String); // false 
console.log("abc" instanceof Object); // false 
console.log(new String("abc") instanceof String); // true 
console.log(new String("abc") instanceof Object); // true

只有在比较自定义的对象时才准确反映关系。
function Person() {} 
function Man() {} 
Man.prototype = new Person(); 
console.log(new Man() instanceof Man); // true 
console.log(new Man() instanceof Person); // true
Javascript 相关文章推荐
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 #Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 #Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 #Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 #Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 #Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 #Javascript
固定背景实现的背景滚动特效示例分享
May 19 #Javascript
You might like
PHP的ASP防火墙
2006/10/09 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python常用模块介绍
2014/11/21 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
师生聚会感言
2014/01/26 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
路政管理求职信
2014/06/18 职场文书
普通话宣传标语
2014/06/26 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
土建施工员岗位职责
2015/04/11 职场文书
投诉书范文
2015/07/02 职场文书
2015大一新生军训感言
2015/08/01 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers