typeof的作用及用法

1.检查一个变量是否存在,是否有值.

typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候.例如:

1.

  alert(typeof undeclaredVariable === "undefined");    // true

2.

  var declaredVariable;

  alert(typeof declaredVariable);    // 'undefined'

  alert(typeof undefined );     // 'undefined'

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

3.

   var value = undefined;

   alert(value === undefined );   //true

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

4.

  alert(undeclaredVariable === undefined);      //ReferenceError: undeclaredVariable is not defined

  alert( typeof undeclaredVariable === undefined);    //false

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

5.

   var declaredVariable;

  declaredVariable === undefined         //true

  var aa = (function (x) { return x === undefined }())     // aa = true

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

2.判断一个值不等于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

(也可以理解为null是属于object数据类型的一种特殊形式)

解决办法: 不要使用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

3.区分对象值和原始值

下面的函数用来检测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

4.原始值的类型是什么?

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就是这样的实现)

5.某个值是否是函数

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

  > typeof function () {} 'function'

  >  typeof Object.prototype.toString 'function'

原则上说,instanceof

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

6.综述

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

  isDefined() (比如Object.isDefined()): 可以作为一个函数或者一个运算符
  isObject()
  getTypeName()
能够跨框架的,检测一个对象是否是指定的构造函数的实例的机制
检查某个变量是否已经被声明这样的需求,可能没那么必要有自己的运算符.

typeof的作用及用法的更多相关文章

  1. serialVersionUID, ObjectInputStream与ObjectOutputStream类,Serializable接口,serialVersionUID的作用和用法

    ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 Ser ...

  2. Oracle函数over(),rank()over()作用及用法--分区(分组)求和& 不连续/连续排名

    (1)   函数:  over()的作用及用法:    -- 分区(分组)求和. RANK ( ) OVER ( [query_partition_clause] order_by_clause )D ...

  3. Linq中关键字的作用及用法

    Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...

  4. JSP九大内置对象的作用和用法总结?

    JSP九大内置对象的作用和用法总结? 1.request对象javax.servlet.http.HttpServletRequest request对象代表了客户端的请求信息,主要用于接受通过HTT ...

  5. (转载)MySQL数据类型中DECIMAL的作用和用法

    (转载)http://database.51cto.com/art/201005/201651.htm 在MySQL数据类型中,例如INT,FLOAT,DOUBLE,CHAR,DECIMAL等,它们都 ...

  6. PreTranslateMessage作用和用法

    PreTranslateMessage作用和用法  PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗体的消息都要通过这里,比較经常使用, ...

  7. ViewHolder的作用和用法

    一直都看别人用ViewHolder,自己也用过,却不知道它的作用是什么?但知道肯定很有用,而且现在android studio应该有直接生产Viewholder的插件, 不过博主我是个新手,就没尝试去 ...

  8. Oracle分析函数及常用函数: over(),rank()over()作用及用法--分区(分组)求和& 不连续/连续排名

    (1)   函数:  over()的作用及用法:    -- 分区(分组)求和. sum() over( partition by column1 order by column2 )主要用来对某个字 ...

  9. og标签对SEO的作用及用法

    meta property=og标签对SEO的作用及用法,如果你仔细观察会发现本站点<head>代码中有一段:"property="og:image"这段代码 ...

随机推荐

  1. ES系列(三):网络通信模块解析

    ES是一个分布式搜索引擎,其除了用户提供必要的通信服务外,集群间也必须保持紧密的通信联系,才能在必要的时候给出正确的结果.其则必然涉及到各种繁多且要求高的通信场景,那么如何实现高性能的通信,则是其必须 ...

  2. c协程库libco几点体会

    https://www.cnblogs.com/dearplain/p/9820913.html 这里说的是Tencent开源的libco. libco的用途和依赖 主要还是c/c++服务端,相比li ...

  3. 千位分隔符,音频音量加强,transform 垂直居中

    1.最近做阴阳师日本官网,其中有个功能是获取预约人数,设计稿上的人数是这样151,567,000,想了想自己写还有点麻烦,于是网上copy了代码,再修改了下. 其中,有一点需要注意的是:函数中的str ...

  4. 路由器逆向分析------在Linux上安装IDA Pro

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/69665905 01.在Linux系统上安装Linux版本的IDA Pro Linu ...

  5. MetInfo Password Reset Poisoning By Host Header Attack

    if we know some user's email, the we will can reset the user's email by host header attack. The atta ...

  6. 冒泡排序——Python实现

    冒泡排序Python实现 # -*- coding: utf-8 -*- # @Time : 2019/10/28 19:41 # @Author : yuzhou_1shu # @Email : y ...

  7. PHP 判断当前日期是否是法定节假日或者休息日

    1.代码如下 $date = date("Ymd",time()); $url = "http://api.goseek.cn/Tools/holiday?date=&q ...

  8. ACM、考研、就业,在我心底已经有了明确的答案_人生没有完整的,只有无悔的

    思绪再三,还是决定放弃了ACM,走上考研路(我现在是大二下学期,马上结束).虽然我们ACM的带队老师经常说:"ACM和考研是不冲突的",但是我感觉做ACM和考研的关系不是很紧密,而 ...

  9. 理解微信小程序的双线程模型

    有过微信小程序开发经验的朋友应该都知道"双线程模型"这个概念,本文简单梳理一下双线程模型的一些科普知识,学识浅薄,若有错误欢迎指正. 我以前就职于「小程序·云开发」团队,在对外的一 ...

  10. 2019c#将PDF转图片

    两种方法: 第一种是用O2S.Components.PDFRender4NET 大家可以去网上查找无水印版本 但是有的时候带颜色的字就变空白了 不知道为什么 第二种是用PdfiumViewer 这种方 ...