typeof与instanceof的区别

180 阅读4分钟

javaScript中typepof与instanceof常用来判断一个变量是否为空,或者是什么类型的。但它们之间还是有区别的。

typeof

typeof是一个一元运算符,放在一个一元运算数之前,运算数可以是任何类型。
它返回一个字符串,该字符串说明运算数的类型。
typeof一般返回如下几个结果:number、string、boolean、object、function、undefined

运算数为数字 typeof(x)="number"
为字符串 typeof(x)="string"
布尔值 typeof(x)="boolean"
对象,数组和null typeof(x)="object"
函数 typeof(x)="function"

console.log(typeof (123));//typeof(123)返回"number"
console.log(typeof ("123"));//typeof("123")返回"string"
var param1 = "string";
var param2 = new Object();
var param3 = 10;
console.log(typeof(param1)+"\n"+typeof(param2)+"\n"+typeof(param3)); // string object number

我们可以使用typeof来获取一个变量是否存在,如if(typeof a!="undefined"){alert("ok")},而不要去使用if(a),因为如果a不存在(未声明),就会报错。对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性。

经常会在js里用到数组,比如多个名字相同的input,若是动态生成的,提交时就需要判断其是否是数组。
if(document.mylist.length!="undefined"){} // 这个用法有误
正确的是if(typeof (document.mylist.length)!="undefined"){} 或者 if(!isNaN(document.mylist.length)){}
typeof的运算数未定义,返回的就是一个"undefined"

在javaScript中,判断一个变量的类型常常会用typeof运算符,在使用typeof运算符时采用 ### 引用类型 ### 存储值会出现一个问题,无论时什么类型的对象,都会返回"object"。这就需要用到instanceof来检测某个对象是不是另一个对象的实例。

instanceof

instanceof运算符用来判断一个对象的原型链上是否存在一个构造函数的prototype属性。
语法:object instanceof constructor
参数:object(要检测的对象) constructor(某个构造函数)
描述:instanceof运算符用来检测constructor.prototype是否存在于object的原型链上。
如 var a=new Array() ;
alert(a instanceof Array); // true
同时alert(a instanceof Object) // true
也会返回true,因为Array是object的子类。

再如:function test(){};
var a= new test();
alert(a instanceof test) // true

另外,更重要的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于他的父类型。
如:function Foo(){}
Foo.prototype = new Aoo()
var foo = new Foo()
console.log(foo instanceof Foo) // true
console.log(foo instanceof Aoo) // true 可以理解成Foo的原型上有Aoo的实例,而foo是Foo的实例,所以foo也是Aoo的实例。

上面代码是判断了一层继承关系中的父类,在多层继承关系中,instanceof运算符同样适用。

又如:

console.log(Object instanceof Object); //true
console.log(Function instanceof Function); //true
console.log(Number instanceof Number);//false
console.log(String instanceof String);//false
console.log(Function instanceof Object);//true
console.log(Foo instanceof Function);//true
console.log(Foo instanceof Foo);//false

// 定义构造函数
function C(){}
function D(){}

var o = new C();

// true,因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C;

// false,因为 D.prototype不在o的原型链上
o instanceof D;

o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.

D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

谈到 instanceof 我们要多插入一个问题,就是 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

需要注意的是,如果表达式 obj instanceof Foo 返回true,则并不意味着该表达式会永远返回ture,因为Foo.prototype属性的值有可能会改变,改变之后的值很有可能不存在于obj的原型链上,这时原表达式的值就会成为false。另外一种情况下,原表达式的值也会改变,就是改变对象obj的原型链的情况,虽然在目前的ES规范中,我们只能读取对象的原型而不能改变它,但借助于非标准的__proto__魔法属性,是可以实现的。比如执行obj.proto = {}之后,obj instanceof Foo就会返回false了。

例子: 表明String对象和Date对象都属于Object类型

下面的代码使用了instanceof来证明:String和Date对象同时也属于Object类型。
例子: 表明String对象和Date对象都属于Object类型

下面的代码使用了instanceof来证明:String和Date对象同时也属于Object类型。
var simpleStr = "This is a simple string";
var myString = new String();
var newStr = new String("String created with constructor");
var myDate = new Date();
var myObj = {};

simpleStr instanceof String; // returns false, 检查原型链会找到 undefined
myString instanceof String; // returns true
newStr instanceof String; // returns true
myString instanceof Object; // returns true

myObj instanceof Object; // returns true, despite an undefined prototype
({}) instanceof Object; // returns true, 同上

myString instanceof Date; // returns false

myDate instanceof Date; // returns true
myDate instanceof Object; // returns true
myDate instanceof String; // returns false

附加 四、如何判断一个变量是数组还是对象?

判断一个变量是数组还是对象有很多种方法,其中prototype.toString.call()兼容性最好
function isObjArr(value){
if(Object.prototype.toString.call(value)==="[object Object]"){
console.log("value是一个对象")
}
else if(Object.prototype.toString.call(value)==="[object Array]") {
console.log("value是一个数组")
}
else{
console.log("既不是数组也不是对象")
} }