JS中typeof与instanceof的区别

40次阅读

共计 3896 个字符,预计需要花费 10 分钟才能阅读完成。

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的。但它们之间还是有区别的:
typeof
typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。
它返回值是一个字符串,该字符串说明运算数的类型。(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 的原型链上。
instance:实例, 例子
a instanceof b?alert(“true”):alert(“false”); // a 是 b 的实例?真: 假
instanceof 用于判断一个变量是否某个对象的实例,
如 :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

alert(a==b); //flase
案例:
另外,更重的一点是 `instanceof` 可以在继承关系中用来判断一个实例是否属于它的父类型。

例如:

function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承
var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true

上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,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

正文完
 0