instanceof 原理

时间:2022-02-10 14:38:38

运行流程

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深入浅出——学习笔记&lpar;包装对象和类型检测&rpar;

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

  8. JS学习笔记Day17

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

  9. 前端JS基础知识

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

随机推荐

  1. Linux实现ftp账号同时访问两个目录方法

    在做项目时,客户需要FTP同时访问两个目录,要清楚,在建FTP时,都是一个用户对应一个目录,当FTP用户登录后,就只访问当前目录,如果需要访问到其他目录,得另想办法.刚开始以为使用链接可以实现这个功能 ...

  2. EF实体框架之CodeFirst六

    上午的时候把复杂类型学习了一下,想着趁着周六日把Code First学习完,所以下午还是把Code First中的关系学习下.在数据库中最重要的恐怕就是E-R图了,E-R体现了表与表直接的关系.使用C ...

  3. hdu 4268 multiset&plus;贪心

    Alice和Bob有n个长方形,有长度和宽度,一个矩形可以覆盖另一个矩形的条件的是,本身长度大于等于另一个矩形,且宽度大于等于另一个矩形,矩形不可旋转,问你Alice最多能覆盖Bob的几个矩形? /* ...

  4. java文件上传到服务器

    最近项目中使用到了文件从本地到服务器的功能.其实是为了解决目前浏览器不支持获取本地文件全路径.不得已而想到上传到服务器的固定目录,从而方便项目获取文件,进而使程序支持EXCEL批量导入数据. 在前台界 ...

  5. 1242Rescue (优先队列BFS)

    Problem Description Angel was caught by the MOLIGPY! He was put in * by Moligpy. The * is ...

  6. CMake 简单介绍

    CMake特点 CMake需要用户用CMake规范的语法编写CMake脚本,该语法简单易用,入门极其顺手 原生支持 C/C++/Fortran/Java 的相依性的自动分析功能,免除了程序员对代码依赖 ...

  7. win10遇见的问题

    所有问题的终极解决办法:系统重置 1.Windows PowerShell打不开,重装.net framework装不上 电脑系统为win10企业版,今天第n遍安装sql server 2017的时候 ...

  8. 在java web项目中实现随项目启动的额外操作

    前言 在web项目中经常会遇到在项目启动初始,会要求做一些逻辑的实现,比如实现一个消息推送服务,实现不同类型数据同步的回调操作初始化,或则通知其他客户服务器本项目即将启动,等等.对于这种要求,目前个人 ...

  9. Spring再接触 Scope范围

    <bean id="userService" class="com.bjsxt.service.UserService" scope="prot ...

  10. python 数据可视化 -- 读取数据

    从 CSV 文件中读取数据(CSV) import sys import csv # python 内置该模块 支持各种CSV文件 file_name = r"..\ch02_data\ch ...