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

Nora ·

更新时间:2024-11-14

· 617 次阅读

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 (" typeof(Person):"+typeof(Person));　　　　//function
　　var person = new Person();
　　document.write (" 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 (" typeof Person:"+typeof Person);
document.write (" typeof Person.prototype:"+typeof Person.prototype);
document.write (" typeof Person.constructor:"+typeof Person.constructor);

var person = new Person();
document.write (" var person = new Person();");
document.write (" typeof person:"+typeof person);
document.write (" typeof person.prototype:"+typeof person.prototype);
document.write (" typeof person.constructor:"+typeof person.constructor);

document.write (" Function.constructor:"+Function.constructor);
document.write (" Function.prototype:"+Function.prototype);

document.write (" Person.constructor:"+Person.constructor);
document.write (" Person.prototype:"+Person.prototype);

document.write (" person.constructor:"+person.constructor);
document.write (" 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中判断数据类型时，我们可以使用以下方式来得到其详细数据类型：