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


Posted in Javascript onDecember 25, 2015

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

typeof

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

typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。

它返回值是一个字符串,该字符串说明运算数的类型。typeof 一般只能返回如下几个结果:
number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错,对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 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 用于判断一个变量是否某个对象的实例,如 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 对象,尽管看起来很像。

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

下面我们看看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的深入理解

Javascript 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
JS中的三个循环小结
Jun 20 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue实现通讯录功能
Jul 14 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
JavaScript中Window对象的属性及事件
Dec 25 #Javascript
JavaScript字符串删除重复字符的方法
Dec 25 #Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 #Javascript
jquery实现图片预加载
Dec 25 #Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 #Javascript
使用堆实现Top K算法(JS实现)
Dec 25 #Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 #Javascript
You might like
十天学会php之第三天
2006/10/09 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
校园文明倡议书
2014/05/16 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2014年药房工作总结
2014/11/22 职场文书
观后感格式
2015/06/19 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js