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. 2.获取指定目录及子目录下所有txt文件的个数,并将这些txt文件复制到F盘下任意目录

    package cn.it.text; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ...

  2. 通过Long类型的出生日期算年龄

    package com.utils; import java.text.ParseException; import java.text.SimpleDateFormat; import java.u ...

  3. MacOS修改用户名后变为普通用户,无法创建管理员账号

    摘要:有的时候用户修改原电脑用户名,会把该用户降为普通用户,点击下方的锁会弹出下方图示,导致无法修改任何设置 解决方案: 重启电脑Restart按Command+S进入终端terminal输入以下命令 ...

  4. 创建局域网yum服务器

    首先需要安装createrepo这个软件包,使用yum安装即可 创建软件库文件夹,比如mkdir -p /var/www/html/myrepo/x86_64, 将软件包拷贝到文件夹下. cd到该文件 ...

  5. 自制操作系统Antz(8)——实现内核 (中) 扩展内核

    Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.html 在前几天的任务中,我们已经简单实现了MBR,直接操作显示器和硬盘操作 ...

  6. UI自动化(十四)yaml配置文件

    import yamlimport jsonf = open('config.yaml','rb')data = yaml.load(f)print(json.dumps(data,indent=4) ...

  7. CEF 支持JSON操作

    转载:https://blog.csdn.net/foruok/article/details/50687864(解析json) 转载:https://blog.csdn.net/foruok/art ...

  8. 在CAcUiTabChildDialog中使用点取或者(拾取)时卡住的问题

    问题描述:在Tab的对话框中,其子对话框CAcUiTabChildDialog中用点取或者(拾取)时卡住的问题 在子对话框中: BeginEditorCommand(); CompleteEditor ...

  9. Visual Studio 2019 double clicking project(custom behavior)

    Issue

  10. SAP FI中配置“特别总帐标志” SGL

    SAP FI中配置“特别总帐标志” SGL   创建时间:2018年10月6日(星期六) 下午3:42 | 分类:未分类 | 字数:396 |  SAP FI中配置“特别总帐标志” SGL 2013年 ...