运行流程

function instance_of(L, R) {                               //L 表示左表达式,R 表示右表达式
  var O = R.prototype;                                    // 取 R 的显式原型(后面的对象只取显式原型prototype)
  L = L.__proto__;                                       // 取 L 的隐式原型(判断的对象取__proto__,而且会一直向上判断)
  while (true) { 
    if (L === null) 
      return false; 
    if (O === L)                                          // 这里重点:当 O 严格等于 L 时,返回 true 
      return true; 
    L = L.__proto__; 
  } 
 }
 
在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE11 以下不行。所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显式的原型,在 JavaScript 里用 prototype 属性表示
 
 
 
判断举例
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
 
 
Function instanceof Function
// 为了方便表述,首先区分左侧表达式和右侧表达式
 FunctionL = Function, FunctionR = Function; 
 // 下面根据规范逐步推演
 O = FunctionR.prototype = Function.prototype 
 L = FunctionL.__proto__ = Function.prototype 
 // 第一次判断
 O == L 
 // 返回 true
 
 
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
 

instanceof 原理的更多相关文章

  1. 夯实基础之--new关键字、instanceOf原理

    1.instanceOf原理  检测右边构造函数的prototype是否在左边对象的原型链上,在返回true,不在返回false 例:function  Persion(name,age){ this ...

  2. javascript中原型链与instanceof 原理

    instanceof:用来判断实例是否是属于某个对象,这个判断依据是什么呢? 首先,了解一下javascript中的原型继承的基础知识: javascript中的对象都有一个__proto__属性,这 ...

  3. 详解 JS 中 new 调用函数原理

    JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数),那在使用 new 调用一个函数的时候到底发生了什么?先看几个例子,再解释背后发生了什么. 1)看三个例子 1.1 ...

  4. JavaScript 数据类型

    JavaScript 数据类型 字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 一,JavaScript 字符串 ...

  5. JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包

    了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...

  6. 详谈JavaScript原型链

    目录 创建对象有几种方法 原型.构造函数.实例.原型链 instanceof的原理 new运算符 创建对象的方法 在了解原型链之前,首先先了解一下创建对象的几种方式,介绍以下三种. 代码: <s ...

  7. javascript深入浅出——学习笔记(包装对象和类型检测)

    3包装对象:https://www.imooc.com/video/5676 当我们尝试把基本类型已对象的方式访问时,javascript会把该基本类型转换为对应的包装类型对象(临时对象),相当于ne ...

  8. JS学习笔记Day17

    一. 创建对象的方法 (一)在了解原型链之前,首先先了解一下创建对象的几种方式,介绍以下三种. 代码: <script type="text/javascript"> ...

  9. 前端JS基础知识

    1. 原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个JavaScript ...

随机推荐

  1. 程序员的自我修养九Windows下的动态链接

    9.1 DLL简介 DLL即动态链接库的缩写,它相对于Linux下的共享对象. Windows下的DLL文件和EXE文件实际上是一个概念,它们都是有PE格式的二进制文件. 微软希望通过DLL机制加强软 ...

  2. js特效遮罩层(弹出层)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. springmvc 格式化返回日期格式

    <mvc:annotation-driven conversion-service="conversionService"> <mvc:message-conve ...

  4. ch340是什么芯片

    CH340 是一个USB 总线的转接芯片,实现USB 转串口.USB 转IrDA 红外或者USB 转打印口.     在串口方式下,CH340 提供常用的MODEM联络信号,用于为计算机扩展异步串口, ...

  5. unset与unlink

    unset() -- 释放给定的变量 详见->http://www.kuqin.com/php5_doc/function.unset.html unlink() --删除文件    常用于用户 ...

  6. http://codeforces.com/contest/610/problem/D

    D. Vika and Segments time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  7. Java中的类型擦除与桥方法

    类型擦除 Java在语法中虽然存在泛型的概念,但是在虚拟机中却没有泛型的概念,虚拟机中所有的类型都是普通类.无论何时定义一个泛型类型,编译后类型会被都被自动转换成一个相应的原始类型. 比如这个类 pu ...

  8. jQuery实现web页面固定列表搜索

    1.需求分析:现在有一个数据展示列表页面,列表内容固定,使用jQuery在固定的列表中实现搜索功能. 2.核心代码: <!-- 添加jquery库 --> <script type= ...

  9. Jquery cookie操作示例,写入cookie,读取cookie,删除cookie

    <html> <head> <meta name="viewport" content="width=device-width" ...

  10. CodeSmith(C#)简单示例及相关小知识

    // 本文将介绍CodeSmith与数据库进行交互生成相应的存储过程,本例使用的数据库为SQL Server 2000. // 在与数据库进行交互时,我们使用到了一个CodeSmith自带的组件Sch ...