运行流程

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. Floyd算法(最短路)

    如题,这是最短路算法Floyd. Floyd,是只有五行的代码. 简单,易懂.O(N的三方)的时间也可以. 遇到简单的就这么用. #include<iostream> #include&l ...

  2. JavaWeb(三)JSP概述

    一.JSP概述 1.1.JSP简介 一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束.JSP是一种Java servlet,主要用于实现 ...

  3. java关键字中文对比

    abstract 摘要|抽象assert 声称boolean 布尔break 中断byte 字节case 实例catch 捕捉char 烧焦class 类const 常量continue 持续defa ...

  4. Python实战之文件操作的详细简单练习

    ['_CHUNK_SIZE', '__class__', '__del__', '__delattr__', '__dict__', '__dir__', '__doc__', '__enter__' ...

  5. python之HTMLParser解析HTML文档

    HTMLParser是Python自带的模块,使用简单,能够很容易的实现HTML文件的分析.本文主要简单讲一下HTMLParser的用法. 使用时需要定义一个从类HTMLParser继承的类,重定义函 ...

  6. Qt+VS2015应用程序发布

    本文以Qt 5.9.1+VS2015编译环境为例介绍应用程序发布流程,也适用于Qt+mingw的情况. 1. Qt依赖库 将需要发布的exe(如test.exe),放到单独的目录. 在"开始 ...

  7. ABAP 内表数据 与 Json串 相互转换

    内表: A B C IMINGZHA  HAIMINGZ AIMINGZH 1 2 3 4 5 6 Json串:  [{a: "IMINGZHA", b: "HAIMIN ...

  8. [原创]InnoDB体系结构

    参阅:<innodb存储引擎内幕> innodb整体的体系结构如下图所示:  整体结构分两大部分:内存和进程其中内存包括:buffer_pool\redo log buffer\addit ...

  9. CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装

    CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 http://www.cnblogs.com/ppoo24/p/4918288.ht ...

  10. 【转】ARM vs X86 – Key differences explained!

    原文:http://www.androidauthority.com/arm-vs-x86-key-differences-explained-568718/ Android supports 3 d ...