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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
java必学必会之static关键字
Dec 03 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
深入浅出vue图片路径的实现
Sep 04 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
定义php常量的详解
2013/06/09 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
介绍Python中的__future__模块
2015/04/27 Python
深入理解Django中内置的用户认证
2017/10/06 Python
用Python shell简化开发
2018/08/08 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python如何实时获取tcpdump输出
2020/09/16 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
经典c++面试题三
2015/07/08 面试题
《雨霖铃》听课反思
2014/02/13 职场文书
农村改厕实施方案
2014/03/22 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
中等生评语大全
2014/05/04 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
公司联欢会主持词
2015/07/04 职场文书
如何正确理解python装饰器
2021/06/15 Python