instanceof运算符简介

在 JavaScript 中

判断一个变量的类型常常会用 typeof 运算符

判断一个实例是否属于某种类型会使用instanceof

与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。

常规用法

var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // 输出 "true" // 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true

继承关系中的用法

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例,多层继承同样适用
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承 var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true

复杂用法

 console.log(Function instanceof Function) // true
console.log(Object instanceof Object); // true
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true
console.log(Function instanceof String); // false
console.log(String instanceof Object); // true
console.log(String instanceof Function); // true
console.log(String instanceof Number); // false
console.log(Array instanceof Number); // false
console.log(Number instanceof Array); // false
console.log(String instanceof Array); // false
console.log(Array instanceof Object); // true
console.log(Array instanceof Function); // true

instanceof的定义

JavaScript instanceof 运算符的定义用代码实现

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)// 这里重点:当 O 严格等于 L 时,返回 true
return true;
L = L.__proto__;
}
}

讲解 instanceof 复杂用法

有了上面 instanceof 运算符的 JavaScript 代码和原型继承图,再来理解 instanceof 运算符将易如反掌。下面将详细讲解 Object instanceof Object,Function instanceof Function 和 Foo instanceof Foo 三个示例,其它示例读者可自行推演。

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

下篇文章将介绍JavaScript的原型继承

JavaScript instanceof 运算符的更多相关文章

  1. JavaScript instanceof 运算符深入剖析

    简介: 随着 web 的发展,越来越多的产品功能都放在前端进行实现,增强用户体验.而前端开发的主要语言则是 JavaScript.学好 JavaScript 对开发前端应用已经越来越重要.在开发复杂产 ...

  2. JavaScript instanceof 运算符深入剖析【转载】

    http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/   instanceof 运算符简介 在 JavaScript ...

  3. instanceof 运算符简介

    文章摘自: http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/ https://developer.mozilla. ...

  4. JavaScript原型链和instanceof运算符的暧昧关系

    时间回到两个月前,简单地理了理原型链.prototype以及__proto__之间的乱七八糟的关系,同时也简单了解了下typeof和instanceof两个运算符,但是,anyway,试试以下两题: ...

  5. javascript特殊运算符(in,instanceof,typeof,delete,void,逗号)

    in运算符                 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...

  6. javascript中的instanceof运算符

    instanceof运算符希望左操作数是一个对象,右操作数表示对象的类:如果左侧的对象是右侧类的实例,则返回true,否则返回false.由于js中对象的类是通过初始化它们的构造函数来定义的,因此in ...

  7. javascript特殊运算符

    in运算符                 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...

  8. 匿名函数自执行原理和instanceof运算符执行原理

    今天收到RSS订阅中有一篇<Javascript – Arraylike的7种实现>,看第一种实现方式是,瞬间被!function(){}()这种匿名函数自执行方式给亮瞎了眼睛.这种写法绝 ...

  9. javascript instanceof

    object instanceof constructor instanceof运算符用来检测constructor.prototype是否存在于参数object的原型链上. 对于instanceof ...

随机推荐

  1. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  2. 深入理解泛型之JAVA泛型的继承和实现、泛型擦除

    很多的基础类设计会采用泛型模式,有些应用在使用的时候处于隔离考虑,会进行继承,此时子类如何继承泛型类就很讲究了,有些情况下需要类型擦除,有些情况下不需要类型擦除,但是大多数情况下,我们需要的是保留父类 ...

  3. CSc 352 (Spring 2019): Assignment

    CSc 352 (Spring 2019): Assignment 11Due Date: 11:59PM Wed, May 1The purpose of this assignment is to ...

  4. 基于OpenCV做“三维重建”(0)-- OpenCV3.2+VIZ6.3.0在vs2012下的编译和使用

    一.问题提出         ViZ对于显示3维的效果图来说,非常有帮助:我在使用OpenCV进行双目测距的过程中,有一些参数希望能够通过可视化的方法显示出来,所以参考了这方面相关的资料.做了一些实验 ...

  5. 《Java程序设计》课程实验要求

    目录 <Java程序设计>课程实验要求 注册实验楼账号 实验一 Java开发环境的熟悉 实验二<Java面向对象程序设计> 实验三 <敏捷开发与XP实践> 实验四 ...

  6. ORACLE数据库找回用户密码

    安装完oracle数据库后,登录时sys,system,scott这几个用户密码输入后都不对,查阅资料后解决 1,cmd下输入sqlplus,之后让你输入用户名,输入这个 "/as sysd ...

  7. Bootstrap3基础 引入本地的bootstrap

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. jQuary学习の四の遍历

    向上遍历DOM树: parent():返回被选元素的直接父元素 parents():返回被选元素的所有祖先元素(当后边参数存在时则表示其中与参数相同的祖先元素) parentsUntil()返回介于两 ...

  9. html知识点汇总(持续更新中)

    本人从事前端行业三年多,打算从今天开始整理一些关于前端的一些比较经典的知识点,持续更新中...希望能对一些相关知识点有疑问的朋友有一些帮助! HTML篇: 1.常见的行内元素/块级元素/空元素有哪些? ...

  10. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...