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中几种去掉字串左右空格的方法
Dec 25 Javascript
jQuery入门知识简介
Mar 04 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
微信小程序实现复选框效果
2018/12/28 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
怎样声明子类
2013/07/02 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
学习两会精神心得范文
2014/03/17 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
困难补助申请报告
2015/05/19 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
第一军规观后感
2015/06/12 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
python 自动刷新网页的两种方法
2021/04/20 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python