js基础2-深入理解javascript之typeof和instanceof

Dear 丶 2022-06-06 23:10 238阅读 0赞

感谢出处：http://blog.csdn.net/mevicky/article/details/50353881

# [深入理解javascript之typeof和instanceof ][javascript_typeof_instanceof] #

标签： [ javascript][javascript][函数][Link 1][typeof][][instanceof][]

2015-12-18 20:31  3265人阅读 [评论][Link 2](1) 收藏 [举报][Link 3]

![category_icon.jpg][] 分类：

javascript*（44）* ![arrow_triangle_20_down.jpg][]

目录[(?)][Link 4][\[+\]][Link 4]

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

--------------------

## **typeof** ##

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

### **语法讲解** ###

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

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>Type</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Undefined</td> 
   <td>“undefined”</td> 
  </tr> 
  <tr> 
   <td>Null</td> 
   <td>“object”</td> 
  </tr> 
  <tr> 
   <td>布尔值</td> 
   <td>“boolean”</td> 
  </tr> 
  <tr> 
   <td>数值</td> 
   <td>“number”</td> 
  </tr> 
  <tr> 
   <td>字符串</td> 
   <td>“string”</td> 
  </tr> 
  <tr> 
   <td>Symbol (ECMAScript 6 新增)</td> 
   <td>“symbol”</td> 
  </tr> 
  <tr> 
   <td>宿主对象(JS环境提供的，比如浏览器)</td> 
   <td>Implementation-dependent</td> 
  </tr> 
  <tr> 
   <td>函数对象</td> 
   <td>“function”</td> 
  </tr> 
  <tr> 
   <td>任何其他对象</td> 
   <td>“object”</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 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';
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40
         41
         42
         43
         44

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

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

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

<table> 
 <thead> 
  <tr> 
   <th>数据</th> 
   <th>toString</th> 
   <th>typeof</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>“foo”</td> 
   <td>String</td> 
   <td>string</td> 
  </tr> 
  <tr> 
   <td>new String(“foo”)</td> 
   <td>String</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>new Number(1.2)</td> 
   <td>Number</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>true</td> 
   <td>Boolean</td> 
   <td>boolean</td> 
  </tr> 
  <tr> 
   <td>new Boolean(true)</td> 
   <td>Boolean</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>new Date()</td> 
   <td>Date</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>new Error()</td> 
   <td>Error</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>new Array(1, 2, 3)</td> 
   <td>Array</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>/abc/g</td> 
   <td>RegExp</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>new RegExp(“meow”)</td> 
   <td>RegExp</td> 
   <td>object</td> 
  </tr> 
 </tbody> 
</table>

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

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

### **真题检测** ###

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

第一题：

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

第二题：

(function f(f){ 
        return typeof f();
      })(function(){  return 1; });
    
       
        
         1
         2
         3
         4

第三题：

第四题：

var foo = {
        bar: function(){  return this.baz; },
        baz: 1
      }
      typeof (f = foo.bar)();
    
       
        
         1
         2
         3
         4
         5
         6

第五题：

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

第六题：

var x = 1;
      if (function f(){ }) {
        x += typeof f;
      }
      x;
    
       
        
         1
         2
         3
         4
         5
         6

第七题：

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

下面公布答案了，这七题的答案分别是：

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

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

第一题：

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

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

变量提升我在[这篇文章][Link 6]中提到过，可以看看。

第二题：

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

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

第三题：

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

第四题：

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

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

第五题：

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

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

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

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

第六题：

var x = 1;
      if (function f(){ }) {
        x += typeof f;
      }
      x;//"1undefined"
    
       
        
         1
         2
         3
         4
         5
         6

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

第七题：

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

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

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

--------------------

## **instanceof** ##

接下来该说说instanceof方法了。instanceof运算符可以用来判断某个构造函数的prototype属性**是否存在于另外一个**要检测对象**的原型链上**。  
如果对原型不太了解，可以看看[深入理解原型][Link 7]。

下面我们看看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
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26

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

function f(){  return f; }
    document.write(new f() instanceof f);//false
    function g(){ }
    document.write(new g() instanceof g);//true
    
       
        
         1
         2
         3
         4
         5

第一个为什么返回false呢？因为构造函数的原型被覆盖了，我们可以看看new f和new g的区别：  
![这里写图片描述][20151218203015913]

[javascript_typeof_instanceof]: http://blog.csdn.net/mevicky/article/details/50353881
[javascript]: http://www.csdn.net/tag/javascript
[Link 1]: http://www.csdn.net/tag/%e5%87%bd%e6%95%b0
[typeof]: http://www.csdn.net/tag/typeof
[instanceof]: http://www.csdn.net/tag/instanceof
[Link 2]: http://blog.csdn.net/mevicky/article/details/50353881#comments
[Link 3]: http://blog.csdn.net/mevicky/article/details/50353881#report
[category_icon.jpg]: /images/20220607/b45121b3afe2428aad942e31dfd43b52.png
[arrow_triangle_20_down.jpg]: /images/20220607/50acdd1b51e347dc93f9a209939a6c41.png
[Link 4]: http://blog.csdn.net/mevicky/article/details/50353881#
[Link 5]: http://blog.csdn.net/mevicky/article/details/46722261
[Link 6]: http://blog.csdn.net/mevicky/article/details/49813289
[this]: http://blog.csdn.net/mevicky/article/details/46659273
[ES6]: http://blog.csdn.net/mevicky/article/details/49942559
[Link 7]: http://blog.csdn.net/mevicky/article/details/46625787#t2
[20151218203015913]: /images/20220607/d397c92dcbc14201b226f6fce334baf3.png