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 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
javascript清空table表格的方法
May 14 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
前端性能优化及技巧
May 06 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
Javascript的this详解
Mar 23 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
关于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 checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python中SQLite如何使用
2020/05/27 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
运动会广播稿50字
2014/01/26 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
爱我中华演讲稿
2014/05/20 职场文书
安全生产月宣传标语
2014/10/06 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL