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. Qt重绘之update,repaint详解

    Qt里面的重绘和Windows编程里面的重绘差不多.但是Qt的重绘更有特色,更加智能. 在讲之前,先说说paintEvent() paintEvent()是一个虚函数槽(slot),子类可以对父类的p ...

  2. OLTP和OLAP的区别

    OLTP和OLAP的区别 联机事务处理OLTP(on-line transaction processing) 主要是执行基本日常的事务处理,比如数据库记录的增删查改.比如在银行的一笔交易记录,就是一 ...

  3. python基础_格式化输出(%用法和format用法)

      目录 %用法 format用法 %用法 1.整数的输出 %o —— oct 八进制%d —— dec 十进制%x —— hex 十六进制 1 >>> print('%o' % 2 ...

  4. Java笔记 #06# 自定义简易参数校验框架——EasyValidator

    索引 一.校验效果演示 二.校验器定义示例 定义一个最简单的校验器 正则校验器 三.EasyValidator的实现 四.更好的应用姿势——配合注解和面向切面 “参数校验”属于比较无聊但是又非常硬性的 ...

  5. CentOS 离线安装 MYSQL+APACHE+PHP

    一.MYSQL安装 下载MYSQL安装包:MySQL-client-XXX.rpm   MySQL-server-XXX.rpm   MySQL-devel-XXX.rpm 如有冲突,要先删除原来的M ...

  6. JS制作蔡徐坤打篮球小游戏(鸡你太美?)

    一.前提: 和我之前写的 QT小球游戏 差不多(指的是实现方法). 感谢大佬的 Github:https://github.com/kasuganosoras/cxk-ball 外加游戏网页:http ...

  7. Android中粗字体

    前言 最近UI大牛出了一版新的效果图,按照IOS的效果做的,页面里面有普通字体.中粗字体.加粗字体.对于IOS的小伙伴,分分钟搞定,但是对于Android开发的我,瞬间懵逼了.WTF! 安卓只有粗和不 ...

  8. 3、Docker镜像管理基础

    Docker image     # docker image ls REPOSITORY TAG IMAGE ID CREATED SIZE redis -alpine 23d561d12e92 d ...

  9. MySQL卸载安装8.0.*

    一.卸载 1. 本人安装目录在C盘Program Files文件中(删除MySQL文件夹) 2. 找到C盘Program Data隐藏文件夹中的MySQL并删除(删除提示MySQL在运行的话可以去任务 ...

  10. C语言 Struct 结构体在 Java 中的体现

    大一整个学期完成了 C 语言的学习,大二就进入了Java 的学习. 和C语言一样,我们都会尝试写一个小小的学生管理系统什么的,学习过 C 语言同学知道,在管理系统中 Struct 结构体是个很好用的东 ...