JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
在javascript中，typeof 和 instanceof 是用来判断数据类型比较通用的两个方法，这篇文章的目的是通过对这两个方法介绍来分析其存在的不足并提出优化方案。
typeof
--------------------------------------------------------------------------------
typeof 返回一个表达式的数据类型的字符串，返回结果为javascript中的基本数据类型，包括：number、boolean、string、object、undefined、function等6种数据类型。
typeof 100; //number
typeof (1==1); //boolean
typeof 'onepixel'; //string
typeof {} ; //object
typeof onepixel; // undefined
typeof parseInt; // function
typeof [];//object
typeof new Date(); //object
可以看出，typeof 可以准确的判断除object以外的基础数据类型，但不能区分object类型的具体类型，比如 Array 、Date 以及自定义类。
instanceof
--------------------------------------------------------------------------------
instanceof 本意是用来判断 A 是否为 B 的实例对象，表达式为：A instanceof B，如果A是B的实例，则返回true,否则返回false。 在这里需要特别注意的是：instanceof检测的是原型，那它是怎么检测的呢，我们用一段伪代码来模拟其内部执行过程：
instanceof (A,B) = {
var L = A.__proto__;
var R = B.prototype;
if(L === R) {
//A的内部属性__proto__指向B的原型对象
return true;
}
return false;
}
从上述过程可以看出，当A的__proto__ 指向B的prototype时，就认为A就是B的实例对象，我们再来看几个例子：
[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
function Person(){};
new Person() instanceof Person;
[] instanceof Object; //true
new Date() instanceof Object;//tru
new Person instanceof Object;//true
从上面的例子中，我们发现虽然instanceof能够正确判断[] 是Array的实例对象，但不能辨别 [] 不是Object的实例对象，为什么呢，这还需要从javascript的原型链说起，我们首先来分析一下[]、Array、Object 三者之间的关系，从instanceof判断能够得出：[].__proto__ ->Array.prototype， 而Array.prototype.__proto__指向了Object.prototype，Object.prototype.__proto__ 指向了null,标志着原型链的结束。（ps:关于JS原型链请阅读：浅谈javascript原型和原型链） 因此，[]、Array、Object就形成了一条原型链：
从原型链可以看出，[]的__proto__最终指向了Object.prototype，类似的new Date()、new Person() 也会形成这样一条原型链，因此，我们用 instanceof 也不能完全精确的判断object类的具体数据类型。
优化方案
--------------------------------------------------------------------------------
对于这个问题，在阅读jQuery源码时，发现了一个比较好的解决方案，由于源码之间存在相互调用不便于阅读和理解，因此，按照其思路进行了整理和封装，代码如下：
(function(){
var class2type = {};
var typeList = "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " );
typeList.eachEach(function(item){
class2type[ "[object " + item + "]" ] = item.toLowerCase();
}
return {
getObjType:function(obj) {
if ( obj == null ) {
return obj + "";
}
if(typeof obj === "object" || typeof obj === "function"){
class2type[ toString.call( obj ) ] || "object"
}else {
return typeof obj;
}
}
}
})()
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：
typeof
typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。
它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：
number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。
网上的一个小例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
document.write ("typeof(1): "+typeof(1)+"<br>");
document.write ("typeof(NaN): "+typeof(NaN)+"<br>");
document.write ("typeof(Number.MIN_VALUE): "+typeof(Number.MIN_VALUE)+"<br>");
document.write ("typeof(Infinity): "+typeof(Infinity)+"<br>");
document.write ("typeof(\"123\"): "+typeof("123")+"<br>");
document.write ("typeof(true): "+typeof(true)+"<br>");
document.write ("typeof(window): "+typeof(window)+"<br>");
document.write ("typeof(Array()): "+typeof(new Array())+"<br>");
document.write ("typeof(function(){}): "+typeof(function(){})+"<br>");
document.write ("typeof(document): "+typeof(document)+"<br>");
document.write ("typeof(null): "+typeof(null)+"<br>");
document.write ("typeof(eval): "+typeof(eval)+"<br>");
document.write ("typeof(Date): "+typeof(Date)+"<br>");
document.write ("typeof(sss): "+typeof(sss)+"<br>");
document.write ("typeof(undefined): "+typeof(undefined)+"<br>")
</script>
<title>javascript类型测试</title>
</head>
<body>
</body>
</html>
instanceof
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) 会返回
谈到 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
大家知道JavaScript中判断函数参数类型是用typeof还是instanceof吗？
typeof只能判断js已有的几个类型，如function,object,number。
而instanceof可以判断对象是由哪个函数实例化出来的，如：
var a=function(x){};
var b=function(x){};
var c=new a(1);
var d=new a(2);
c instanceof a为true而d instanceof b为false。
而用typeof c和typeof d的结果都是object
“判断函数参数类型”需要根据你的需求来选择用哪个。
相关推荐
-
在javaScript中检测数据类型的几种方式小结
在用javaScript编程的过程中,我们经常会遇到这样一个问题,就是需要检测一个数据或变量的类型,那么在javaScript中给我们提供了哪些方法呢?网上流传的代码比比皆是,但是发现其中有些是有误的,索性我自己动手把每种方法用了一遍,今天我专门整理了下,以便以后查阅. 一.typeof 检测 typeof 是一个一元运算符,语法:typeof(运算数),运算数可以是任意类型.它的返回值是一个字符串,该字符串说明运算数的类型. // var arr = { name:"john"};
-
JavaScript数据类型检测代码分享
复制代码 代码如下: /** * param:o表示检测的值 * return:返回字符串"undefined"."number"."boolean"."string"."function"."regexp"."array"."date"."error"."object"或"null&quo
-
浅谈javascript的数据类型检测
一.javascript的数据 javascript的数据分为两种:简单数据和复杂数据.简单数据包含number,string,boolean,undefined和null这五种:复杂数据只有一种即object.[此处友情鸣谢李战老师,<<悟透JavaScript>>写得太传神,印象太深刻了] 二.javascript的数据类型检测 1.万能的typeof 我们先测试一下通过typeof来获取简单数据类型.什么也别说了,上代码是王道: 复制代码 代码如下: // 获取变量obj的数
-
Javascript isArray 数组类型检测函数
1.typeof操作符.对于Function.String.Number.Undefined这几种类型的对象来说,不会有什么问题,但是针对Array的对象就没什么用途了: Js代码 复制代码 代码如下: alert(typeof null); // "object" alert(typeof []); // "object" 2.instanceof操作符.此操作符检测对象的原型链是否指向构造函数的prototype对象,恩,听起来不错,应该可以解决我们的数组检测问
-
javascript基本数据类型及类型检测常用方法小结
本文实例讲述了javascript中的基本数据类型以及类型检测的几种方法.分享给大家供大家参考,具体如下: 1.JS中有6种基本的数据类型,JS中的所有操作都是基于这五种基本类型得到的. (1)Object 对象类型 (2)number 数字类型 (3)String 字符串类型 (4)null (5)underfined (6)boolean 布尔类型:true或者为false I)JS中的数据类型转换(非严格模式下) "12"==12 // true 在非严格模式下,字符串可以向数字
-
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
在javascript中,typeof 和 instanceof 是用来判断数据类型比较通用的两个方法,这篇文章的目的是通过对这两个方法介绍来分析其存在的不足并提出优化方案. typeof -------------------------------------------------------------------------------- typeof 返回一个表达式的数据类型的字符串,返回结果为javascript中的基本数据类型,包括:number.boolean.string.o
-
JavaScript类型检测的方法实例教程
前言 JavaScript是web前端广泛应用的语言之一,在网页应用制作.脚本制作.小程序等诸多领域具有不可替代的的地位.笔者学习了一端时间的前端,颇感JS知识点的繁碎,故将学习到的一些知识.思考和感悟记录下来. JS基本类型 JavaScript的基本类型分为原始基本类型和引用数据类型: 原始基本类型: number string boolean null undefined symbol 引用数据类型: Object Function Array Date RegExp 注意:ES5中没有s
-
javascript之typeof、instanceof操作符使用探讨
写javascirpt代码时,typeof和instanceof这两个操作符时不时就会用到,堪称必用.但是!使用它们总是不能直接的得到想要的结果,非常纠结,普遍的说法认为"这两个操作符或许是javascript中最大的设计缺陷,因为几乎不可能从他们那里得到想要的结果" typeof 说明:typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function. 从说明来看,貌似没什么
-
谈谈我对JavaScript中typeof和instanceof的深入理解
这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字符串,来表示数据的类型. typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用
-
详解JavaScript中typeof与instanceof用法
今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefined") 以前用得少,就顺便查了一下关于typeof的那些事 typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number,boolean,string,function(函数),object(NULL,数组,对象),undefined. 如: alert(ty
-
Javascript typeof与instanceof的区别
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="un
-
详解JavaScript类型判断的四种方法
JavaScript有八种内置类型,除对象外,其他统称为"基本类型". 空值(null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象 (object) 符号(symbol, ES6中新增) 大整数(BigInt, ES2020 引入) Symbol: 是ES6中引入的一种原始数据类型,表示独一无二的值. BigInt:是 ES2020 引入的一种新的数据类型,用来解决 JavaScript中数字只能到 53 个二进制位(J
-
菜鸟也能搞懂js中typeof与instanceof区别
目录 一.typeof 二.instanceof 三.区别 一.typeof typeof 操作符返回一个字符串,表示未经计算的操作数的类型 使用方法如下: typeof operand typeof(operand) operand表示对象或原始值的表达式,其类型将被返回 举个例子 typeof 1 // 'number' typeof '1' // 'string' typeof undefined // 'undefined' typeof true // 'boolean' typeof