JavaScript中instanceof与typeof运算符的用法及区别详细解析


Posted in Javascript onNovember 19, 2013

JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的:

typeof 运算符
返回一个用来表示表达式的数据类型的字符串。

typeof expression ;

expression 参数是需要查找类型信息的任意表达式。

说明
typeof 是一个一元运算符,放在一个运算数之前。

typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能: “number” ,“string”, “boolean”, “object” ,“function”, 和 “undefined.”

(而 ECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。)

注释:

1、我们上面提到了ECMAScript的5种原始类型,在使用typeof操作符时,我们需要特别区分"对象类型"与"对象值"(字面值)的差别。例如Boolean 对象是 Boolean 原始类型的引用类型,而true和false则是Boolean对象的两个可能的对象值。我们可以把 ECMAScript的预定义对象(相对于其他语言中的类)看作是 相应类型的原始值的封装(或包装)。而ECMAScript的所有预定义对象又都是继承于Object对象。因此存在如下情况:

var testvar= new Number(68);

alert(typeof testvar);
//输出  "object"

testvar= 68;

alert(typeof testvar);
//输出  "number"

又如:
function Person(){}

document.write ("<br>typeof(Person):"+typeof(Person));

//function

var person = new Person();

document.write ("<br>typeof(person):"+typeof(person));

//object

注意:从传统意义上来说,ECMAScript 并不真正具有类。事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词。ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。

另外:这些预定义对象覆盖了Object 对象的 ValueOf() 方法,返回其原始值。而这些对象的所有属性和方法都可应用于相应类型的原始值上,因为它们是伪对象。

2、typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

提示:

1、值 undefined 并不同于未定义的值。但是,typeof 运算符并不真正区分这两种值。考虑下面的代码:

var oTemp;
alert(typeof oTemp);  //输出 "undefined"
alert(typeof oTemp2);  //输出 "undefined"

前面的代码对两个变量输出的都是 "undefined",即使只有变量 oTemp2 从未被声明过。如果对 oTemp2 使用除 typeof 之外的其他运算符的话,会引起错误,因为其他运算符只能用于已声明的变量上。

2、当函数无明确返回值时,返回的也是值 "undefined",如下所示:

function testFunc() {}
alert(testFunc() == undefined);  //输出 "true"3、类型Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

alert(null == undefined);  //输出 "true"
尽管这两个值相等,但它们的含义不同:

undefined 是声明了变量但未对其初始化时赋予该变量的值 或 未声明过的变量(只能用于typeof,但作为赋值目标时编译器会自动将其声明为全局变量)。

null 则用于表示尚未存在的对象(即对象为空,或对象找不到)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

3、我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错。

对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性。如果我们希望获取一个对象是否是数组,或判断某个变量是否是某个对象的实例则要选择使用instanceof。

instanceof 运算符
在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。

instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。例如:

var oStringObject = new String("hello world");
alert(oStringObject instanceof String); //输出 "true"
这段代码问的是“变量 oStringObject 是否为 String 对象的实例?”oStringObject 的确是 String 对象的实例,因此结果是 "true"。尽管不像 typeof 方法那样灵活,但是在 typeof 方法返回 "object" 的情况下,instanceof 方法还是很有用的。

instanceof运算符

是一个二元运算符。返回一个 Boolean 值,指出对象是否是特定类的一个实例。

expression  instanceof class

参数

 expression  必选项。任意对象表达式。

 class

必选项。任意已定义的对象类。

说明
如果 object 是 class 的一个实例,则 instanceof 运算符返回 true 。如果 object不是指定类的一个实例,或者 object 是 null ,则返回 false 。

用于判断一个变量是否某个对象的实例,

如var a=new Array();alert(a instanceof Array);会返回true,同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。

再如:function test(){};var a=new test();alert(a instanceof test)会返回true。

注意:

关于function 的 arguments,我们大家也许都认为 arguments 是一个 Array,但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象,尽管看起来很像。

此外还有类似的情况,例如:

var a=new Array();if (a instanceof Object) alert('Y');else alert('N');

得'Y'

但 if (window instanceof Object) alert('Y');else alert('N');

得'N'

所以,这里的 instanceof 测试的 object 是指 js 语法中的 object,不是指 dom 模型对象。

而此时使用 typeof 会有些区别: alert(typeof(window)) 会得 object

引申:JavaScript中的instanceof操作符的原理是什么?

学习js时,了解到在判断js中一个实例是否属于某一种类型时,可以使用instanceof操作符,比如function Person(){}

var person = new Person();  alert(person instanceof Person);//返回true

那么在执行instanceof这个操作时经过了怎样的判断,返回了true/false?

会不会是通过判断Person.prototype与person的内部指针[[prototype]]两者引用是否相同而得出结果的?

其实,凡是能在实例的"原型对象链"中找到该构造函数的prototype属性所指向的原型对象,就返回true。

而prototype根本就不是实例具有的属性(或者说实例的prototype属性为undefined),而是它原型对象中的属性,如果被篡改了,这个判断方法就不能正确返回了。

另外,能不能直接判断 person.constructor == Person来取得想要的结果呢?

我们做个测试,如下JavaScript代码:

function Person(name,sex){this.name=name;this.sex=sex;}
document.write ("<br>typeof Person:"+typeof Person);
document.write ("<br>typeof Person.prototype:"+typeof Person.prototype);
document.write ("<br>typeof Person.constructor:"+typeof Person.constructor);
var person = new Person();
document.write ("<br><br>var person = new Person();");
document.write ("<br>typeof person:"+typeof person);
document.write ("<br>typeof person.prototype:"+typeof person.prototype);
document.write ("<br>typeof person.constructor:"+typeof person.constructor);
document.write ("<br><br>Function.constructor:"+Function.constructor);
document.write ("<br><br>Function.prototype:"+Function.prototype);
document.write ("<br><br>Person.constructor:"+Person.constructor);
document.write ("<br><br>Person.prototype:"+Person.prototype);

document.write ("<br><br>person.constructor:"+person.constructor);
document.write ("<br><br>person.prototype:"+person.prototype);

输出如下:

typeof Person:function
typeof Person.prototype:object
typeof Person.constructor:function

var person = new Person();
typeof person:object
typeof person.prototype:undefined
typeof person.constructor:function

Function.constructor:function Function() { [native code] }
Function.prototype:function Empty() {}

Person.constructor:function Function() { [native code] }
Person.prototype:[object Object]

person.constructor:function Person(name,sex){this.name=name;this.sex=sex;}
person.prototype:undefined

和Function类似,Number()为Number对象的构造函数,Number()用于将其参数转换为数字number类型,并返回转换结果(若不能转换则返回NaN)。

在JavaScript中constructor较少使用,variable.constructor返回其对象类的构造函数的字符串表示。

那么在JavaScript中判断数据类型时,我们可以使用以下方式来得到其详细数据类型:

if((typeof a=="object") && (a.constructor==Array)){

}

注意:constructor只能对已有变量进行判断,而typeof则可对未声明变量或空对象进行判断(返回undefined)。

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 #Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 #Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 #Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 #Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 #Javascript
基于javascript滚动图片具体实现
Nov 18 #Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php 发送带附件邮件示例
2014/01/23 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
JNI的定义
2012/11/25 面试题
渗透攻击的测试步骤
2014/06/07 面试题
十一个高级MySql面试题
2014/10/06 面试题
毕业生文员求职信
2013/11/03 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
初一科学教学反思
2014/01/27 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
军训新闻稿范文
2015/07/17 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书