博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js类型判断:typeof与instanceof
阅读量:4668 次
发布时间:2019-06-09

本文共 6180 字,大约阅读时间需要 20 分钟。

 typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果:

number,boolean,string,function(函数),object(NULL,数组,对象),undefined。

 

如:

alert(typeof (123));//typeof(123)返回"number" 

alert(typeof ("123"));//typeof("123")返回"string"

 

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

 

正因为typeof遇到null,数组,对象时都会返回object类型,所以当我们要判断一个对象是否是数组时

或者判断某个变量是否是某个对象的实例则要选择使用另一个关键语法instanceof

 

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。

 

 

关于typeof

typeof一元运算符,用来返回操作数类型的字符串。

typeof几乎不可能得到它们想要的结果。typeof只有一个实际应用场景,就是用来检测一个对象是否已经定义或者是否已经赋值。而这个应用却不是来检查对象的类型。

 
Value Class Type
"foo" String string
new String("foo") String object
1.2 Number number
new Number(1.2) Number object
true Boolean boolean
new Boolean(true) Boolean object
new Date() Date object
new Error() Error object
[1,2,3] Array object
new Array(1, 2, 3) Array object
new Function("") Function function
/abc/g RegExp object (function in Nitro/V8)
new RegExp("meow") RegExp object (function in Nitro/V8)
{} Object object
new Object() Object object

上面表格中,Type 一列表示 typeof 操作符的运算结果。可以看到,这个值在大多数情况下都返回 "object"。

Class 一列表示对象的内部属性 [[Class]] 的值。

JavaScript 标准文档中定义: [[Class]] 的值只可能是下面字符串中的一个: Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String.

为了获取对象的 [[Class]],我们需要使用定义在 Object.prototype 上的方法 toString。

对象的类定义

JavaScript 标准文档只给出了一种获取 [[Class]] 值的方法,那就是使用 Object.prototype.toString。

function is(type, obj) {    var clas = Object.prototype.toString.call(obj).slice(8, -1);    return obj !== undefined && obj !== null && clas === type;}is('String', 'test'); // trueis('String', new String('test')); // true

上面例子中,Object.prototype.toString 方法被调用,this 被设置为了需要获取 [[Class]] 值的对象。

注:Object.prototype.toString 返回一种标准格式字符串,所以上例可以通过 slice 截取指定位置的字符串,如下所示:

Object.prototype.toString.call([])    // "[object Array]"Object.prototype.toString.call({})    // "[object Object]"Object.prototype.toString.call(2)    // "[object Number]"

 

注:这种变化可以从 IE8 和 Firefox 4 中看出区别,如下所示:

// IE8Object.prototype.toString.call(null)    // "[object Object]"Object.prototype.toString.call(undefined)    // "[object Object]"// Firefox 4Object.prototype.toString.call(null)    // "[object Null]"Object.prototype.toString.call(undefined)    // "[object Undefined]" //测试为定义变量typeof foo !== 'undefined'

上面代码会检测 foo 是否已经定义;如果没有定义而直接使用会导致 ReferenceError 的异常。 这是 typeof 唯一有用的地方。

结论

为了检测一个对象的类型,强烈推荐使用 Object.prototype.toString 方法; 因为这是唯一一个可依赖的方式。正如上面表格所示,typeof 的一些返回值在标准文档中并未定义, 因此不同的引擎实现可能不同。

除非为了检测一个变量是否已经定义,我们应尽量避免使用 typeof 操作符。

x typeof x
undefined "undefined"
true 或false "boolean"
任意数字或者NaN "number"
任意字符串 "string"
函数对象(在ECMA-262术语中,指的是实现了[[Call]] 的对象) "function"
任意内置对象(非函数) "object"
数组 "obeject"
null "object"
宿主对象(JS引擎内置对象,而不是DOM或者其他提供的) 由编译器各自实现的字符串,但不是"undefined","number","boolean","number","string"。
正则表达式 各浏览器表现不一

如果想将null和对象区分开,则必须针对特殊值显式检测。如:my_value===null。对于宿主对象来说,typeof有可能并不返回‘object’,而返回字符串。但实际上客户端js中的大多数宿主对象都是‘object’类型。对于所有内置可执行对象进行typeof运算都将返回“function”。

// Numberstypeof 37 === 'number';typeof 3.14 === 'number';typeof Math.LN2 === 'number';typeof Infinity === 'number';typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"typeof Number(1) === 'number'; // 不要这样使用!// Stringstypeof "" === 'string';typeof "bla" === 'string';typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串typeof String("abc") === 'string'; // 不要这样使用!// Booleanstypeof true === 'boolean';typeof false === 'boolean';typeof Boolean(true) === 'boolean'; // 不要这样使用!// Undefinedtypeof undefined === 'undefined';typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量// Objectstypeof {a:1} === 'object';typeof [1, 2, 4] === 'object'; // 使用Array.isArray或者Object.prototype.toString.call方法//可以分辨出一个数组和真实的对象typeof new Date() === 'object';typeof new Boolean(true) === 'object' // 令人困惑.不要这样使用typeof new Number(1) === 'object' // 令人困惑.不要这样使用typeof new String("abc") === 'object';  // 令人困惑.不要这样使用// Functionstypeof function(){} === 'function';typeof Math.sin === 'function';

 

 

关于instanceof

instanceof 左操作数是一个类,右操作数是标识对象的类。如果左侧的对象是右侧类的实例,则返回true.而js中对象的类是通过初始化它们的构造函数来定义的。即instanceof的右操作数应当是一个函数。所有的对象都是object的实例。如果左操作数不是对象,则返回false,如果右操作数不是函数,则抛出typeError。

instanceof 运算符是用来测试一个对象是否在其原型链原型构造函数的属性。其语法是object instanceof constructor

instanceof 操作符用来比较两个操作数的构造函数。只有在比较自定义的对象时才有意义。 如果用来比较内置类型,将会和 typeof 操作符 一样用处不大。

比较自定义对象

function Foo() {}function Bar() {}Bar.prototype = new Foo();new Bar() instanceof Bar; // truenew Bar() instanceof Foo; // true// 如果仅仅设置 Bar.prototype 为函数 Foo 本身,而不是 Foo 构造函数的一个实例Bar.prototype = Foo;new Bar() instanceof Foo; // false

 

instanceof 比较内置类型

new String('foo') instanceof String; // truenew String('foo') instanceof Object; // true'foo' instanceof String; // false'foo' instanceof Object; // false

 

有一点需要注意,instanceof 用来比较属于不同 JavaScript 上下文的对象(比如,浏览器中不同的文档结构)时将会出错, 因为它们的构造函数不会是同一个对象。

结论:instanceof 操作符应该仅仅用来比较来自同一个 JavaScript 上下文的自定义对象。 正如 typeof 操作符一样,任何其它的用法都应该是避免的。

function C(){} // defining a constructorfunction D(){} // defining another constructorvar o = new C();o instanceof C; // true, because: Object.getPrototypeOf(o) === C.prototypeo instanceof D; // false, because D.prototype is nowhere in o's prototype chaino instanceof Object; // true, because:C.prototype instanceof Object // trueC.prototype = {};var o2 = new C();o2 instanceof C; // trueo instanceof C; // false, because C.prototype is nowhere in o's prototype chain anymoreD.prototype = new C(); // use inheritancevar o3 = new D();o3 instanceof D; // trueo3 instanceof C; // truevar myString = new String();var myDate = new Date();myString instanceof String; // returns truemyString instanceof Object; // returns truemyString instanceof Date;   // returns falsemyDate instanceof Date;     // returns truemyDate instanceof Object;   // returns truemyDate instanceof String;   // returns falsefunction Car(make, model, year) {  this.make = make;  this.model = model;  this.year = year;}var mycar = new Car("Honda", "Accord", 1998);var a = mycar instanceof Car;    // returns truevar b = mycar instanceof Object; // returns true

 

转载于:https://www.cnblogs.com/tkzc2013/p/10814916.html

你可能感兴趣的文章
vue阿里上传图片报400错误
查看>>
Python基础之函数
查看>>
课堂练习--单元测试
查看>>
嵌入式 探讨父子线程、进程终止顺序不同产生的结果_skdkjxy_新浪博客
查看>>
【机器学习】如何成为当下合格的算法工程师
查看>>
vuex 学习总结及demo
查看>>
MySQL高可用架构故障自动转移插件MHA
查看>>
lnmp之nginx1.10.2安装
查看>>
recv send 阻塞和非阻塞
查看>>
网络丢包分析
查看>>
打印LIS
查看>>
剑指offer第2章学习(2)
查看>>
java后台验证码的生成
查看>>
Bootstrap辅助类
查看>>
vue项目的骨架及常用组件介绍
查看>>
Spring使用外部的配置文件
查看>>
ctype
查看>>
jsp 修饰 Request 及Response
查看>>
HDU 2389 Rain on your Parade / HUST 1164 4 Rain on your Parade(二分图的最大匹配)
查看>>
对象的类型转换P109
查看>>