javascript之typeof、instanceof操作符使用探讨

写javascirpt代码时，typeof和instanceof这两个操作符时不时就会用到，堪称必用。但是！使用它们总是不能直接的得到想要的结果，非常纠结，普遍的说法认为“这两个操作符或许是javascript中最大的设计缺陷，因为几乎不可能从他们那里得到想要的结果”
typeof
说明：typeof返回一个表达式的数据类型的字符串，返回结果为js基本的数据类型，包括number,boolean,string,object,undefined,function。
从说明来看，貌似没什么问题。

下面的代码写了一个数值变量，typeof后的结果是"number"。


代码如下:

var a = 1;
console.log(typeof(a)); //=>number

如果用Number类型的构造函数new一个变量的话，typeof后的结果是"object"。


代码如下:

var a = new Number(1);
console.log(typeof(a)); //=>object

上面的这两个输出结果看似没啥问题，这一点从书上看来是理所当然的事情，因为javascript就是这么设计的。

但是！问题就在于既然调用了typeof就应该准确返回一个变量的类型，不管是直接用值创建的还是用类型的构造函数创建的，否则！我还用你做啥！
那么对于：


代码如下:

var a = 1;
var b = new Number(1);

a和b变量的类型准确的说来都应该是Number才是想要的结果。
而准确的类型信息保存在变量的内部属性 [[Class]] 的值中，通过使用定义在 Object.prototype 上的方法 toString来获取。

获取类型信息：


代码如下:

var a = 1;
var b = new Number(1);
console.log(Object.prototype.toString.call(a));
console.log(Object.prototype.toString.call(b));

输出：


代码如下:

[object Number]
[object Number]

是不是已经很直接了，我们稍微处理一下，得到直接结果：


代码如下:

var a = 1;
var b = new Number(1);
console.log(Object.prototype.toString.call(a).slice(8,-1));
console.log(Object.prototype.toString.call(b).slice(8,-1));

输出：
Number
Number
这就是想要的结果。
为了更好的使用，我们封装一个方法，用来判断某个变量是否是某种类型:


代码如下:

function is(obj,type) {
var clas = Object.prototype.toString.call(obj).slice(8, -1);
return obj !== undefined && obj !== null && clas === type;
}

定义一些变量做过测试，先来看看它们的typeof输出：


代码如下:

var a1=1;
var a2=Number(1);
var b1="hello";
var b2=new String("hello");
var c1=[1,2,3];
var c2=new Array(1,2,3);
console.log("a1's typeof:"+typeof(a1));
console.log("a2's typeof:"+typeof(a2));
console.log("b1's typeof:"+typeof(b1));
console.log("b2's typeof:"+typeof(b2));
console.log("c1's typeof:"+typeof(c1));
console.log("c2's typeof:"+typeof(c2));
输出：
a1's typeof:number
a2's typeof:object
b1's typeof:string
b2's typeof:object
c1's typeof:object
c2's typeof:object

我们再用新作的函数是一下：


代码如下:

console.log("a1 is Number:"+is(a1,"Number"));
console.log("a2 is Number:"+is(a2,"Number"));
console.log("b1 is String:"+is(b1,"String"));
console.log("b2 is String:"+is(b2,"String"));
console.log("c1 is Array:"+is(c1,"Array"));
console.log("c2 is Array:"+is(c2,"Array"));
输出：
a1 is Number:true
a2 is Number:true
b1 is String:true
b2 is String:true
c1 is Array:true
c2 is Array:true

注：typeof也不是无用，实际用处是用来检测一个变量是否已经定义或者是否已经赋值。
instanceof
说明：判断一个对象是否为某一数据类型，或一个变量是否为一个对象的实例。
instanceof 操作符用来比较两个内置类型的变量时一样力不从心，同样会对结果不满意。


代码如下:

console.log("abc" instanceof String); // false
console.log("abc" instanceof Object); // false
console.log(new String("abc") instanceof String); // true
console.log(new String("abc") instanceof Object); // true

只有在比较自定义的对象时才准确反映关系。


代码如下:

function Person() {}
function Man() {}
Man.prototype = new Person();
console.log(new Man() instanceof Man); // true
console.log(new Man() instanceof Person); // true

赞 (0)

相关推荐

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

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符返回一个用来表示表达式的数据类型的字符串. typeof expression ; expression 参数是需要查找类型信息的任意表达式. 说明typeof 是一个一元运算符,放在一个运算数之前. typeof 运算符把类型信息当作字符串返回.typeof 返回值有六种可能: "number" ,"string",

  • javascript instanceof,typeof的区别

    为什么结果会是false呢? 复制代码 代码如下: <script type="text/javascript"> var aColors = ["red", "green", "blue"]; alert(typeof aColors[0]); //output "string" alert(aColors[0] instanceof String); //output "false

  • 浅谈javascript中的instanceof和typeof

    对于instanceof和typeof,以前偶尔的用到过,特别是typeof用到的相对更多一些,今日研究ext源码,很多地方都用到了instanceof,突然觉得他们两个有些相似但也应该有他们区别,网上看了一些文章,对它们之间的关系有了一定的了解. instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量. typeof用以获取一个变量的类型,typeof一般只能返回如下几个结果:number,boolean,string,function,object,undefine

  • 关于javascript中的typeof和instanceof介绍

    typeof用来检测给定变量的数据类型(也可叫做基本类型,基本数据类型.包含undefined.boolean.string.number.object.function)var message = "so easy";alert(typeof message); //"string"alert(typeof 12); //"number" 可以这样记忆:typeof是用来判断不是用new创建的"变量". instanceof

  • 谈谈我对JavaScript中typeof和instanceof的深入理解

    谈谈我对JavaScript中typeof和instanceof的深入理解

    这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字符串,来表示数据的类型. typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用

  • JS中typeof与instanceof之间的区别总结

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="un

  • Javascript typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="un

  • javascript instanceof 与typeof使用说明

    typeof用以获取一个变量的类型,typeof一般只能返回如下几个结果:number,boolean,string,function,object,undefined.我们可以使用typeof来获取一个变量是否存在,如 if(typeof a != "undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错,对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性. 如果我们希望获取一个对象是否是数组,或判断某个变

  • JavaScript类型检测之typeof 和 instanceof 的缺陷与优化

    JavaScript类型检测之typeof 和 instanceof 的缺陷与优化

    在javascript中,typeof 和 instanceof 是用来判断数据类型比较通用的两个方法,这篇文章的目的是通过对这两个方法介绍来分析其存在的不足并提出优化方案. typeof -------------------------------------------------------------------------------- typeof 返回一个表达式的数据类型的字符串,返回结果为javascript中的基本数据类型,包括:number.boolean.string.o

  • javascript之typeof、instanceof操作符使用探讨

    写javascirpt代码时,typeof和instanceof这两个操作符时不时就会用到,堪称必用.但是!使用它们总是不能直接的得到想要的结果,非常纠结,普遍的说法认为"这两个操作符或许是javascript中最大的设计缺陷,因为几乎不可能从他们那里得到想要的结果" typeof 说明:typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function. 从说明来看,貌似没什么

  • 详解JavaScript中typeof与instanceof用法

    今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefined") 以前用得少,就顺便查了一下关于typeof的那些事 typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number,boolean,string,function(函数),object(NULL,数组,对象),undefined. 如: alert(ty

  • Array, Array Constructor, for in loop, typeof, instanceOf

    注意: JavaScript 中数组不是 关联数组. JavaScript 中只有对象 来管理键值的对应关系.但是关联数组是保持顺序的,而对象不是. 由于 for in 循环会枚举原型链上的所有属性,唯一过滤这些属性的方式是使用 `hasOwnProperty` 函数,因此会比普通的 for 循环慢上好多倍. 遍历(Iteration) 为了达到遍历数组的最佳性能,推荐使用经典的 for 循环. 复制代码 代码如下: var list = [1, 2, 3, 4, 5, ...... 10000

  • JavaScript 手动实现instanceof的方法

    1. instanceof的用法 instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上. function Person() {} function Person2() {} const usr = new Person(); console.log(usr instanceof Person); // true console.log(usr instanceof Object); // true console.log(usr instanceo

  • javascript中typeof的使用示例

    复制代码 代码如下: <html> <head> <title>javascript中typeof的使用</title> <script> //1.基本类型 var x = 123; var y = "abc"; var z = true; //alert(typeof x);//number //alert(typeof y);//string //alert(typeof z);//boolean //2.引用类型,类型是

  • Javascript中的delete操作符详细介绍

    一.变量 说到javascript中的delete操作符,还是首先要搞清楚javascript中的变量和属性之间的关系. javascript中,变量和对象属性关系非常微妙,甚至可以很多时候会被等同起来,因为 javascript 在执行脚本之前会创建一个global对象,在浏览器中就是window对象,所有的全局变量都是这个global对象的属性,执行函数时也会创建一个activation对象,所有的局部变量都是这个activation对象的属性.这些可以大家可以去了解一下javascript

  • java instanceof操作符使用及原理解析

    这篇文章主要介绍了java instanceof操作符使用及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 a intanceof A:判断a是否是类A的的一个实例,返回值为boolean public class Person extends Object{} public class Student extends Person{} public class Graduate extends Person{} public clas

  • JavaScript中的observables 操作符创建实例

    目录 一.创建实例 1.​​create​​ 2.​​empty​​ 3.​​from​​ 4.​​of​​ 5.​​fromEvent​​ 6.​​fromPromise​​ 7.​​interval​​ 8.​​timer​​ 操作符是 observables 背后的马力,为复杂的异步任务提供了一种优雅的声明式解决方案. 本篇就带领大家 “粗略” 过一下 observable 创建实例的重点 API 都有哪些?以及用代码片段展示出用法示意~ 一.创建实例 1.​​create​​ ​​cre

  • javascript中typeof操作符和constucor属性检测

    *#type.js 复制代码 代码如下: function Person(name, age) {  this.name = name;  this.age = age; } var d = {an: 'object'}; var a = ['apple', 'banana']; var f = function() {}; var s = 'David'; var n = 33; var b = true; var o = new Object(); var person = new Pers

随机推荐