在JavaScript中typeof的用途介绍


Posted in Javascript onApril 11, 2013

JavaScript 中的 typeof 其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现。

本文列举出了它的多个用法,而且还指出了存在的问题以及解决办法。

阅读本文的前提是,你现在应该已经知道原始值和对象值的区别了。

检查一个变量是否存在,是否有值
typeof在两种情况下会返回 "undefined":

1.变量没有被声明

2.变量的值是 undefined

例如:

> typeof undeclaredVariable === "undefined"
true
> var declaredVariable;
> typeof declaredVariable
'undefined'
> typeof undefined
'undefined'

还有其他办法检测某个值是否是 undefined:

> var value = undefined;
> value === undefined
true

但这种方法如果使用在一个未声明的变量上的时候,就会抛出异常,因为只有 typeof 才可以正常检测未声明的变量的同时还不报错:

> undeclaredVariable === undefined
ReferenceError: undeclaredVariable is not defined

注意:未初始化的变量,没有被传入参数的形参,不存在的属性,都不会出现上面的问题,因为它们总是可访问的,值总是 undefined:

> var declaredVariable;
> declaredVariable === undefined
true
> (function (x) { return x === undefined }())
true
> ({}).foo === undefined
true

译者注:因此,如果想检测一个可能没有被声明的全局变量是否存在,也可以使用if(window.maybeUndeclaredVariable){}。

问题:typeof 在完成这样的任务时显得很繁杂.

解决办法:这样的操作不是很常见,所以有人觉的没必要再找更好的解决办法了。 不过也许有人会提出一个专门的操作符:

> defined undeclaredVariable
false
> var declaredVariable;
> defined declaredVariable
false

或者,也许有人还需要一个检测变量是否被声明的操作符:

> declared undeclaredVariable
false
> var declaredVariable;
> declared declaredVariable
true

译者注:在 perl 里,上面的 defined 操作符相当于 defined(),上面的 declared 操作符相当于 exists()。

判断一个值不等于 undefined 也不等于 null
问题:如果你想检测一个值是否被定义过(值不是 undefined 也不是 null),那么你就遇到了 typeof 最有名的一个怪异表现(被认为是一个 bug):typeof null 返回了 "object":

> typeof null 
'object'

译者注:这只能说是最初的 JavaScript 实现的 bug,而现在标准就是这样规范的。V8 曾经修正并实现过 typeof null === "null",但最终证明不可行。http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null。

(译注:typeof 在操作 null 时会返回 "object",这是 JavaScript 语言本身的 bug。不幸的是,这个 bug 永远不可能被修复了,因为太多已有的代码已经依赖了这样的表现。但是 null 到底是不是 对象呢?stackoverflow 有关于这个问题的讨论:http://stackoverflow.com/questions/801032/null-object-in-javascript/7968470#7968470@justjavac)

解决办法:不要使用 typeof 来做这项任务,用下面这样的函数来代替:

function isDefined(x) {
    return x !== null && x !== undefined;
}

另一个可能性是引入一个 “默认值运算符”,在 myValue 未定义的情况下,下面的表达式会返回 defaultValue:

myValue ?? defaultValue

上面的表达式等价于:

(myValue !== undefined && myValue !== null) ? myValue : defaultValue

又或者:

myValue ??= defaultValue

其实是下面这条语句的简化:

myValue = myValue ?? defaultValue

当你访问一个嵌套的属性时,比如 bar,你或许会需要这个运算符的帮助:

obj.foo.bar

如果 obj 或者 obj.foo 是未定义的,上面的表达式会抛出异常。 一个运算符 .?? 可以让上面的表达式在遍历一层一层的属性时,返回第一个遇到的值为 undefined 或 null 的属性:

obj.??foo.??bar

上面的表达式等价于:

(obj === undefined || obj === null) ? obj
    : (obj.foo === undefined || obj.foo === null) ? obj.foo
        : obj.foo.bar

区分对象值和原始值

下面的函数用来检测 x 是否是一个对象值:

function isObject(x) {
    return (typeof x === "function"
            || (typeof x === "object" && x !== null));
}

问题:上面的检测比较复杂,是因为 typeof 把函数和对象看成是不同的类型,而且 typeof null 返回 "object".

解决办法:下面的方法也经常用于检测对象值:

function isObject2(x) {
    return x === Object(x);
}

警告:你也许认为这里可以使用 instanceof Object 来检测,但是 instanceof 是通过使用使用一个对象的原型来判断实例关系的,那么没有原型的对象怎么办呢:

> var obj = Object.create(null);
> Object.getPrototypeOf(obj)
null

obj 确实是一个对象,但它不是任何值的实例:

> typeof obj
'object'
> obj instanceof Object
false

在实际中,你可能很少遇到这样的对象,但它的确存在,而且有它的用途。

译者注:Object.prototype 就是唯一的一个内置的,没有原型的对象。

>Object.getPrototypeOf(Object.prototype)
null
>typeof Object.prototype
'object'
>Object.prototype instanceof Object 
false

原始值的类型是什么?
typeof 是最好的用来查看某个原始值的类型的方式。

> typeof "abc"
'string'
> typeof undefined
'undefined'

问题:你必须知道 typeof null 的怪异表现。

> typeof null  // 要小心!
'object'

解决办法:下面的函数可以修复这个问题(只针对这个用例)。

function getPrimitiveTypeName(x) {
    var typeName = typeof x;
    switch(typeName) {
        case "undefined":
        case "boolean":
        case "number":
        case "string":
            return typeName;
        case "object":
            if (x === null) {
                return "null";
            }
        default: // 前面的判断都没通过
            throw new TypeError("参数不是一个原始值: "+x);
    }
}

更好的解决办法:实现一个函数 getTypeName(),除了可以返回原始值的的类型,还可以返回对象值的内部 [[Class]] 属性。 这里讲了如何实现这个函数(译者注:jQuery 中的 $.type 就是这样的实现)

某个值是否是函数
typeof 可以用来检测一个值是否是函数。

> typeof function () {}
'function'
> typeof Object.prototype.toString
'function'

原则上说,instanceof Function 也可以进行这种需求的检测。 乍一看,貌似写法还更加优雅。 但是,浏览器有一个怪癖:每一个框架和窗口都有它自己的全局变量。 因此,如果你将某个框架中的对象传到另一个框架中,instanceof 就不能正常工作了,因为这两个框架有着不同的构造函数。 这就是为什么 ECMAScript5 中会有Array.isArray() 方法的原因。 如果有一个能够跨框架的,用于检查一个对象是否是给定的构造函数的实例的方法的话,那会很好。 上述的 getTypeName() 是一个可用的变通方法,但也许还有一个更根本的解决方案。

综述
下面提到的,应该是目前 JavaScript 中最迫切需要的,可以代替一些 typeof 目前职责的功能特性:

•isDefined() (比如 Object.isDefined()): 可以作为一个函数或者一个运算符

•isObject()

•getTypeName()

•能够跨框架的,检测一个对象是否是指定的构造函数的实例的机制

检查某个变量是否已经被声明这样的需求,可能没那么必要有自己的运算符。

 

Javascript 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
React学习之事件绑定的几种方法对比
Sep 24 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 #Javascript
javascript中的delete使用详解
Apr 11 #Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 #Javascript
原生js实现给指定元素的后面追加内容
Apr 10 #Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 #Javascript
裁剪字符串trim()自定义改进版
Apr 10 #Javascript
关于JS管理作用域的问题
Apr 10 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
PHP中动态HTML的输出技术
2006/10/09 PHP
php查询whois信息的方法
2015/06/08 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python unittest框架操作实例解析
2020/04/13 Python
零基础学python应该从哪里入手
2020/08/11 Python
python3 kubernetes api的使用示例
2021/01/12 Python
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
珍惜水资源建议书
2014/03/12 职场文书
职工代表大会主持词
2014/04/01 职场文书
教师职位说明书
2014/07/29 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python