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. SSRS分页

    1:首先进行分组,分组表达式为CEILING(RowNumber(Nothing)/50)       注:50是一页放50条数据,一页想放多少条,就改成多少       2:在Group Prope ...

  2. Unity 新手入门 如何理解协程 IEnumerator yield

    Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分,前半部分是通俗解释一下Unity中的协程,后半部分讲讲C#的IEnumerator迭代器 协程是什么,能干什么? 为了能通 ...

  3. 【题解】Luogu P3674 小清新人渣的本愿

    原题传送门 这题还算简单(我记得我刚学oi时就来写这题,然后暴力都爆零了) 看见无修改,那么这题应该是莫队 维护两个bitset,第二个是第一个的反串,bitset内维护每个数字是否出现过 第一种操作 ...

  4. mycat 单库多表实现水平分片

    环境 mycat : 192.168.126.128 root root mysql1: 192.168.126.129:3306 root lizhenghua mysql2: 192.168.12 ...

  5. ORACLE——RMAN 参数解读

    查看默认rman配置参数 oracle用户下登录rman:rman target / 查看所有配置参数详情:show all show all的第一行:using target database co ...

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

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

  7. Windows 控制面板调用命令

    使用命令打开 Windows 控制面板指定页面 control.exe /name microsoft.folderoptions 启动资源管理器的 文件夹属性 选项卡 control.exe /na ...

  8. blogger添加代码高亮

    blogger(blogspot)自带的是没有代码高亮的,我们可以用下面的方法添加代码高亮. 首先我们打开blogger(blogspot)后台,然后点击主题背景-->修改html,然后在弹出的 ...

  9. Qt Designer问题(挖坑)

    同时用两个VS的Qt Designer打开.ui文件,关闭Qt Designer之后再打开发现Qt Designer不在打开方式了.要重启VS才行.

  10. 解决 scapy “NameError: global name 'wrpcap' is not defined” 错误

    解决 scapy "NameError: global name 'wrpcap' is not defined" 错误 通过 scapy 编写发包脚本时遇到如下错误: Trace ...