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 模拟用户单击事件
Dec 31 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
详解vue v-model
Aug 31 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分页效率终结版(推荐)
2013/07/01 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
js实现微博发布小功能
2017/01/12 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2016公司新年问候语
2015/11/11 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS