JavaScript instanceof运算符深入分析

前言

如果你要开发一个复杂的产品,那么肯定少不了使用面向对象机制,当然也避不开 Javascript 里面的继承,instanceof 运算符是原生 Javascript 语言中用来判断实例继承的操作符。所以我们有必要深入理解该运算符!

instanceof 运算符简介

在 JavaScript 中,要判断某个变量的类型,我们第一个想起的就是 typeof 运算符,但是在使用 typeof 运算符的时候 ,只要是引用类型存储的变量,无论你引用的是什么类型的对象,统一返回 “object” ,这就是一个大问题,我们如何判断这个对象是属于哪个类型的呢? ECMAScript 引入了在Java 中的instanceof运算符来解决这个问题,instanceof与typeof都可以检测数据类型,instanceof 运算符与 typeof 运算符的不同点是:要求开发者明确的确认检测对象为某特定类型的数据

举例说明分析

Javascript 变量类型

这个网上有很多种说法,说法很多的原因也很简单,就是因为在JS一切皆对象,一切引用类型都是继承于 Object 类型的。我在这里分为几大类

 undefiend 没有定义数据类型
 number 数值数据类型 例如 10或者1或者5.5
 string 字符串数据类型用来描述文本 例如 "你的姓名"
 boolean 布尔类型 true|false  不是正就是反,是或者否,有或者没有
 object 对象类型 复杂的一组描述信息的集合
 function 函数类型 

这么分的根据是什么呢?很简单,就是通过 typeof 来区分的

function Fun(){}
var unde = typeof abc;    // 基本类型
var numb = typeof 300;    // 基本类型
var str  = typeof "hello";    // 基本类型
var bool = typeof true;       // 基本类型
var func = typeof function(){}   // 引用/对象 类型
var obje = typeof new String("hello");   // 引用/对象 类型
var nul = typeof null;    // 引用/对象 类型
var obj = typeof new Fun()   // 引用/对象 类型
console.log('\n',unde,'\n',numb,'\n',str,'\n',bool,'\n',func,'\n',obje);
console.log('\n',obj,'\n',nul)

结果为:

answer

从中可以看出,typeof 就只能返回这六种数据类型,所以基本类型就确定为这六种。其实函数 function 也是对象类型,这个问题后面会讲到的。
注意基本变量类型不是对象类型,只有基本包装类型才是对象类型。所以 str instanceof Object/String 都是 false

instanceof 举例

  1. 常规用法
var StringObje = new String("instanceof");
console.log(StringObje instaceof String); // 输出为true

这段代码问的是,变量 StringObje 是不是 String 对象的实例,答案为 true,很显然是的 , typeof 只会返回 "Object",所以 instanceof 还是有用的,当然你会发现 StringObje instanceof Object 也是true
通常来讲使用 instanceof 就是判断一个实例是否属于某种类型

// 判断 foo 是否是 Foo 的实例
function Foo(){}
var foo = new Foo();
console.log(foo instaceof Foo)  // true
  1. **instanceof 在继承中关系应用 **
// 判断 a 是否是A类的实例,和是否是其父类 AFather 的实例
function AFather(){}
function A(){}
AFather.prototype = new A(){};  // js原型继承
var a = new A();
console.log(a instanceof A)  //true
console.log(a instanceof AFather)   //true

在多层继承中,仍然适用。

  1. instanceof 复杂用法
function Foo(){}
console.log(Object instanceof Object);//1  true 
console.log(Function instanceof Function);//2  true 
console.log(Number instanceof Number);//3  false 
console.log(String instanceof String);//4  false 
console.log(Function instanceof Object);//5   true 
console.log(Foo instanceof Function);//6  true 
console.log(Foo instanceof Foo);//7  false

对上面的结果有没有感觉到奇怪,奇怪也正常,因为确实挺奇怪的!
对上面的分析,首先要看看,你检测的到底是什么?

console.log(Object,Function,String,Number,Foo);
  /***
  *  结果如下
  *   function Object() { [native code] } 
  *   function Function() { [native code] } 
  *   function String() { [native code] } 
  *   function Number() { [native code] } 
  *   function Foo(){}
  */

这已经很明显了,所有的检测对象都是一个函数,那么必定属于函数类型和对象类型,只剩下3,4,7有问题了,那么为什么是 false 呢?你想想,Foo函数是Foo的实例吗?显然不是啊,同理,String和Number函数也不是其本身的实例,new Func() , 这个才是实例对象。
想彻底明白其中奥妙,必须要了解语言规范原型继承机制

  1. 规范中 instanceof 运算符定义
    可以参考这个网址 :instanceof 语法
      规范定义很晦涩,而且看起来比较复杂,涉及到很多概念,但把规范翻译成 JavaScript 代码却很简单,如下:
 function instance_of(L, R) {    //L 表示左表达式,R 表示右表达式
  var O = R.prototype;           // 取 R 的显示原型
  L = L.__proto__;               // 取 L 的隐式原型
  while (true) { 
    if (L === null)  return false;
    if (O === L)  return true;   // 这里重点:当 O 严格等于 L 时,返回 true 
    L = L.__proto__; 
  } 
 }
  1. Javascript 原型继承机制
      本文主要在分析 JavaScript instanceof 运算符,对于 JavaScript 的原型继承机制不再做详细的讲解,下面参考来自http://www.mollypages.org/misc/js.mp 的一张图片,此图片详细的描述了 JavaScript 各种对象的显示和隐式原型链结构。
      由其涉及显示原型和隐式原型,所以下面对这两个概念作一下简单说明。在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型,在 JavaScript 里用 prototype 属性表示,这个是 JavaScript 原型继承的基础知识,在这里就不在叙述了。

    原型结构图

    这个图片很好地表达了js原型链的关系,要仔细去看,跟着箭头一步一步分析。

  2. 上述复杂问题的推演过程
    如果你理解了 javascript 原型链,那么这个问题就简单了!
    下面将详细讲解 Object instanceof Object,Function instanceof Function 和 Foo instanceof Foo 三个示例,其它示例读者可自行推演。

 1. Object instanceof Object
 // 为了方便表述,首先区分左侧表达式和右侧表达式
 ObjectL = Object, ObjectR = Object; 
 // 下面根据规范逐步推演
 O = ObjectR.prototype = Object.prototype 
 L = ObjectL.__proto__ = Function.prototype 
 // 第一次判断
 O != L 
 // 循环查找 L 是否还有 __proto__ 
 L = Function.prototype.__proto__ = Object.prototype 
 // 第二次判断
 O == L 
 // 返回 true
 2. Function instanceof Function
 // 为了方便表述,首先区分左侧表达式和右侧表达式
 FunctionL = Function, FunctionR = Function; 
 // 下面根据规范逐步推演
 O = FunctionR.prototype = Function.prototype 
 L = FunctionL.__proto__ = Function.prototype 
 // 第一次判断
 O == L 
 // 返回 true
 3. Foo instanceof Foo
 // 为了方便表述,首先区分左侧表达式和右侧表达式
 FooL = Foo, FooR = Foo; 
 // 下面根据规范逐步推演
 O = FooR.prototype = Foo.prototype 
 L = FooL.__proto__ = Function.prototype 
 // 第一次判断
 O != L 
 // 循环再次查找 L 是否还有 __proto__ 
 L = Function.prototype.__proto__ = Object.prototype 
 // 第二次判断
 O != L 
 // 再次循环查找 L 是否还有 __proto__ 
 L = Object.prototype.__proto__ = null 
 // 第三次判断
 L == null 
 // 返回 false

推荐阅读更多精彩内容