这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方。

typeof

先来说说typeof吧。首先需要注意的是,typeof方法返回一个字符串,来表示数据的类型

语法讲解

我们先看看各个数据类型对应typeof的值:

数据类型 Type
Undefined “undefined”
Null “object”
布尔值 “boolean”
数值 “number”
字符串 “string”
Symbol (ECMAScript 6 新增) “symbol”
宿主对象(JS环境提供的,比如浏览器) Implementation-dependent
函数对象 “function”
任何其他对象 “object”

再看看具体的实例:

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"
typeof Number(1) === 'number'; // 不要这样使用! // Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串
typeof String("abc") === 'string'; // 不要这样使用! // Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // 不要这样使用! // Symbols
typeof Symbol() === 'symbol';
typeof Symbol('foo') === 'symbol';
typeof Symbol.iterator === 'symbol'; // Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量 // Objects
typeof {a:1} === 'object'; // 使用Array.isArray或者Object.prototype.toString.call方法可以从基本的对象中区分出数组类型
typeof [1, 2, 4] === 'object'; typeof new Date() === 'object'; // 下面的容易令人迷惑,不要这样使用!
typeof new Boolean(true) === 'object';
typeof new Number(1) ==== 'object';
typeof new String("abc") === 'object'; // 函数
typeof function(){} === 'function';
typeof Math.sin === 'function';

我们会发现一个问题,就是typeof来判断数据类型其实并不准确。比如数组、正则、日期、对象的typeof返回值都是object,这就会造成一些误差。

所以在typeof判断类型的基础上,我们还需要利用Object.prototype.toString方法来进一步判断数据类型。

我们来看看在相同数据类型的情况下,toString方法和typeof方法返回值的区别:

数据 toString typeof
“foo” String string
new String(“foo”) String object
new Number(1.2) Number object
true Boolean boolean
new Boolean(true) Boolean object
new Date() Date object
new Error() Error object
new Array(1, 2, 3) Array object
/abc/g RegExp object
new RegExp(“meow”) RegExp object

可以看到利用toString方法可以正确区分出Array、Error、RegExp、Date等类型。

所以我们一般通过该方法来进行数据类型的验证

真题检测

但是既然今天说到了typeof,那这里就列出几道题目,来看看自己是否真正掌握了typeof的用法。

第一题:

var y = 1, x = y = typeof x;
x;

第二题:

 (function f(f){
return typeof f();
})(function(){ return 1; });

第三题:

  var foo = {
bar: function() { return this.baz; },
baz: 1
};
(function(){
return typeof arguments[0]();
})(foo.bar);

第四题:

  var foo = {
bar: function(){ return this.baz; },
baz: 1
}
typeof (f = foo.bar)();

第五题:

var f = (function f(){ return "1"; }, function g(){ return 2; })();
typeof f;

第六题:

  var x = 1;
if (function f(){}) {
x += typeof f;
}
x;

第七题:

  (function(foo){
return typeof foo.bar;
})({ foo: { bar: 1 } });

下面公布答案了,这七题的答案分别是:

"undefined","number","undefined","undefined","number","1undefined","undefined"

做对了几道呢?是不是很大的困惑呢?这几题虽然都有typeof,但是考察了很多javascript的基础噢。下面我们来一一详解。

第一题:

var y = 1, x = y = typeof x;
x;//"undefined"

表达式是从右往左的,x由于变量提升,类型不是null,而是undefined,所以x=y=”undefined”。

变量提升我在这篇文章中提到过,可以看看。

第二题:

  (function f(f){
return typeof f();//"number"
})(function(){ return 1; });

传入的参数为f也就是function(){ return 1; }这个函数。通过f()执行后,得到结果1,所以typeof 1返回”number”。这道题很简单,主要是区分f和f()。

第三题:

  var foo = {
bar: function() { return this.baz; },
baz: 1
};
(function(){
return typeof arguments[0]();//"undefined"
})(foo.bar);

这一题考察的是this的指向。this永远指向函数执行时的上下文,而不是定义时的(ES6的箭头函数不算)。当arguments执行时,this已经指向了window对象。所以是”undefined”。对this执行不熟悉的同学可以看看这篇文章:深入理解this,对刚刚提到的箭头函数感兴趣的同学可以看看初步探究ES6之箭头函数

第四题:

  var foo = {
bar: function(){ return this.baz; },
baz: 1
}
typeof (f = foo.bar)();//undefined

如果上面那一题做对了,那么这一题也应该不会错,同样是this的指向问题。

第五题:

var f = (function f(){ return "1"; }, function g(){ return 2; })();
typeof f;//"number"

这一题比较容易错,因为我在遇到这道题之前也从来没有遇到过javascript的分组选择符。什么叫做分组选择符呢?举一个例子就会明白了:

var a = (1,2,3);
document.write(a);//3,会以最后一个为准

所以上面的题目会返回2,typeof 2当然是”number”啦。

第六题:

  var x = 1;
if (function f(){}) {
x += typeof f;
}
x;//"1undefined"

这是一个javascript语言规范上的问题,在条件判断中加入函数声明。这个声明语句本身没有错,也会返回true,但是javascript引擎在搜索的时候却找不到该函数。所以结果为”1undefined”。

第七题:

  (function(foo){
return typeof foo.bar;
})({ foo: { bar: 1 } });

这题其实是一个考察心细程度的题目。形参的foo指向的是{ foo: { bar: 1 } }这个整体。相信这么说就明白了。

好啦。上面的题目都是很好的资源噢。

instanceof

接下来该说说instanceof方法了。instanceof运算符可以用来判断某个构造函数的prototype属性是否存在于另外一个要检测对象的原型链上

如果对原型不太了解,可以看看深入理解原型

下面我们看看instanceof的实例:

// 定义构造函数
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

但是这里我们需要注意一个问题:

function f(){ return f; }
document.write(new f() instanceof f);//false
function g(){}
document.write(new g() instanceof g);//true

第一个为什么返回false呢?因为构造函数的原型被覆盖了,我们可以看看new f和new g的区别:

JavaScript中typeof和instanceof深入详解的更多相关文章

  1. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  2. javascript中typeof和instanceof用法的总结

    今天在看相应的javascript书籍时,遇到了typeof和instanceof的问题,一直不太懂,特地查资料总结如下: JavaScript 中 typeof 和 instanceof 常用来判断 ...

  3. JavaScript中typeof,instanceof,hasOwnProperty,in的用法和区别

    一. typeof操作符 typeof操作符用于返回正在使用值的类型. // 使用原始值 let mNull = null; let mUndefined = undefined; let mStri ...

  4. javascript中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  5. JavaScript 中typeof、instanceof 与 constructor 的区别?

    typeof.instanceof 与 constructor 详解 typeof  一元运算符 返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,st ...

  6. JavaScript 中 apply 、call 的详解

    apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...

  7. javascript 中 typeof 和 instanceof 的区别

    在 javascript 中经常会用到 typeof 和 instanceof 来判断一个对象的类型,可能 typeof 用得多些,那来看看这两个之间的区别吧. typeof : typeof 是一个 ...

  8. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  9. javascript中6种基本数据类型详解

    javascript中有5中数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——object,object本质是由一组键值 ...

随机推荐

  1. StreamReader 读取文本文件乱码问题

    解决读取文本文件乱码问题.我采取的是读取前先判断文本文件格式. StreamReader sr = new StreamReader(fullfileName, GetFileEncodeType(f ...

  2. ArrayList和数组间的相互转换

    开发中不免碰到List与数组类型之间的相互转换,举一个简单的例子: package test.test1; import java.util.ArrayList; import java.util.L ...

  3. 2016青岛网络赛 Barricade

    Barricade Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Proble ...

  4. 【贪心】时空定位I

    [贪心]时空定位I 题目描述 张 琪曼已经确定了李旭琳在一个长为20千米,宽为2千米的空间,她要在横中心线上放置半径为Ri的定位装置,每个定位装置的效果都会让以它为中心的半径为实 数Ri(0<R ...

  5. 智力大冲浪(riddle)

    智力大冲浪(riddle) 题目描述 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每个参赛者m元.先不要太高兴!因为这些钱还不一定都是你的?!接 ...

  6. mknod用法以及主次设备号【转】

    转自:http://www.cnblogs.com/hnrainll/archive/2011/06/10/2077583.html mknod 用途 创建特殊文件. mknod Name { b | ...

  7. JS查找和替换字符串列子

    依赖 工具函数库 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. eclipse's code assist

    突然发现有个类没有code assist功能了,而别的类都还有,新建的类也有,可是当把代码拷贝到新建的类还是不行:尝试了各种办法,包括删除workspace/.metadata/.plugin/org ...

  9. javascript 中的闭包

    在 javascript 中,函数可以当做参数传递,也可以当做返回值返回. 当一个函数内部返回值为一个函数时, 就形成了闭包.(闭包里面的 this 问题) 如下面代码 Function.protot ...

  10. Memcached缓存系统介绍及安装

    1.什么是Memcached 1.1.Memcached概述 Memcached是一个免费的开源的.高性能的.具有又分布式内存对象的缓存系统,它通过减轻数据库负载加速动态WEB应用, 1.2.Memc ...