typeof运算符

た入场券 2022-05-25 11:48 202阅读 0赞

下表总结了`typeof`可能的返回值。有关类型和原始值的更多信息，可查看 [JavaScript数据结构][JavaScript] 页面。

“object”,  "number",  "string",  "boolean",   "function",  "undefined",  "symbol", 共7种

<table style="font-style:normal;margin:0px 0px 24px;padding:0px;border:2px solid rgb(255,255,255);width:902px;max-width:100%;border-collapse:collapse;color:rgb(51,51,51);font-family:'Open Sans', arial, 'x-locale-body', sans-serif;font-size:14px;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;background-color:rgb(255,255,255);"> 
 <thead style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <th style="font-style:inherit;margin:0px;padding:2px 8px 4px;border-width:2px;border-style:solid;border-color:rgb(255,255,255) rgb(255,255,255) rgb(212,221,228);font-weight:700;text-align:left;background:rgba(212,221,228,.5);font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;">类型</th> 
   <th style="font-style:inherit;margin:0px;padding:2px 8px 4px;border-width:2px;border-style:solid;border-color:rgb(255,255,255) rgb(255,255,255) rgb(212,221,228);font-weight:700;text-align:left;background:rgba(212,221,228,.5);font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;">结果</th> 
  </tr> 
 </thead> 
 <tbody style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);">Undefined</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"undefined"</code></td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);">Null</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"object"</code>（见下文）</td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);">Boolean</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"boolean"</code></td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);">Number</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"number"</code></td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);">String</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"string"</code></td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);">Symbol （ECMAScript 6 新增）</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"symbol"</code></td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);">宿主对象（由JS环境提供）</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);"><em style="font-style:normal;margin:0px;padding:0px;border:0px;">Implementation-dependent</em></td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);">函数对象（[[Call]] 在ECMA-262条款中实现了）</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.15);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"function"</code></td> 
  </tr> 
  <tr style="font-style:normal;margin:0px;padding:0px;border:0px;"> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);">任何其他对象</td> 
   <td style="font-style:normal;margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);text-align:left;background-color:rgba(212,221,228,.25);"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">"object"</code></td> 
  </tr> 
 </tbody> 
</table>

## 示例 ##

// 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 declaredButUndefinedVariable === 'undefined';
    typeof undeclaredVariable === '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 class C{ } === 'function'
    typeof Math.sin === 'function';
    typeof new Function() === 'function';

### `null` ###

typeof null === 'object'; // 从一开始出现JavaScript就是这样的

在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 `null` 代表的是空指针（大多数平台下值为 0x00），因此，null的类型标签也成为了 0，`typeof null`就错误的返回了"`object"`。（[reference][]）

ECMAScript提出了一个修复（通过opt-in），但[被拒绝][Link 1]。这将导致typeof null === 'object'。

### 使用 `new` 操作符 ###

// All constructor functions while instantiated with 'new' keyword will always be typeof 'object'
    var str = new String('String');
    var num = new Number(100);
    
    typeof str; // It will return 'object'
    typeof num; // It will return 'object'
    
    // But there is a exception in case of Function constructor of Javascript
    
    var func = new Function();
    
    typeof func; // It will return 'function'

### 语法中需要括号 ###

// Parentheses will be very much useful to determine the data type for expressions.
    var iData = 99;
    
    typeof iData + ' Wisen'; // It will return 'number Wisen'
    typeof (iData + ' Wisen'); // It will return 'string'

### 正则表达式 ###

对正则表达式字面量的类型判断在某些浏览器中不符合标准：

typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1
    typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAScript 5.1

### 暂存死区 ###

在 ECMAScript 2015 之前，`typeof`总是保证为任何操作数返回一个字符串。但是，除了非提升，块作用域的[let][]和[const][]之外，在声明之前对块中的`let`和`const`变量使用`typeof`会抛出一个[ReferenceError][]。这与未声明的变量形成对比，`typeof`会返回“undefined”。块作用域变量在块的头部处于“[暂时死区][Link 2]”，直到被初始化，在这期间，如果变量被访问将会引发错误。

typeof undeclaredVariable === 'undefined';
    typeof newLetVariable; let newLetVariable; // ReferenceError
    typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError

### 例外 ###

所有当前的浏览器都暴露了一个类型为 undefined 的非标准宿主对象 [`document.all`][document.all]。

typeof document.all === 'undefined';

尽管规范允许为非标准的外来对象定制类型标签，但它要求这些类型标签与预定义标签不同。`document.all`的类型标记为“`undefined`”的情况必须被列为违反规则的特殊情况。

[JavaScript]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures
[reference]: http://www.2ality.com/2013/10/typeof-null.html
[Link 1]: http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null
[let]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let
[const]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
[ReferenceError]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let
[document.all]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/all