实例讲解JavaScript中instanceof运算符的用法


Posted in Javascript onJune 08, 2016

instanceof 运算符简介

在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。例如:

清单 1. instanceof 示例

var oStringObject = new String("hello world"); 
 console.log(oStringObject instanceof String); // 输出 "true"

这段代码问的是“变量 oStringObject 是否为 String 对象的实例?”oStringObject 的确是 String 对象的实例,因此结果是”true”。尽管不像 typeof 方法那样灵活,但是在 typeof 方法返回 “object” 的情况下,instanceof 方法还是很有用的。

instanceof 运算符的常规用法:

通常来讲,使用 instanceof 就是判断一个实例是否属于某种类型。例如:

清单 2. instanceof 常规用法

// 判断 foo 是否是 Foo 类的实例
 function Foo(){} 
 var foo = new Foo(); 
 console.log(foo instanceof Foo)//true

另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。例如:

清单 3. instanceof 在继承中关系中的用法

// 判断 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

上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,instanceof 运算符同样适用。

你真的了解 instanceof 操作符吗?

看了上面的代码示例,是不是觉得 instanceof 操作符很简单,下面来看点复杂的用法。

清单 4. instanceof 复杂用法

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

看了上面的代码是不是又晕头转向了?为什么 Object 和 Function instanceof 自己等于 true,而其他类 instanceof 自己却又不等于 true 呢?如何解释?要想从根本上了解 instanceof 的奥秘,需要从两个方面着手:1,语言规范中是如何定义这个运算符的。2,JavaScript 原型继承机制。

清单 5. 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__; 
 } 
 }

清单 6. 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

清单 7. Function instanceof Function

// 为了方便表述,首先区分左侧表达式和右侧表达式
 FunctionL = Function, FunctionR = Function; 
 // 下面根据规范逐步推演
 O = FunctionR.prototype = Function.prototype 
 L = FunctionL.__proto__ = Function.prototype 
 // 第一次判断
 O == L 
 // 返回 true

清单 8. 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 在 Dojo 继承机制中的应用

在 JavaScript 中,是没有多重继承这个概念的,就像 Java 一样。但在 Dojo 中使用 declare 声明类时,是允许继承自多个类的。下面以 Dojo 1.6.1 为例。

清单 9. Dojo 中多重继承

dojo.declare("Aoo",null,{}); 
 dojo.declare("Boo",null,{}); 
 dojo.declare("Foo",[Aoo,Boo],{}); 
 
 var foo = new Foo(); 
 console.log(foo instanceof Aoo);//true 
 console.log(foo instanceof Boo);//false 
 
 console.log(foo.isInstanceOf(Aoo));//true 
 console.log(foo.isInstanceOf(Boo));//true

上面的示例中,Foo 同时继承自 Aoo 和 Boo,但当使用 instanceof 运算符来检查 foo 是否是 Boo 的实例时,返回的是 false。实际上,在 Dojo 的内部,Foo 仍然只继承自 Aoo,而通过 mixin 机制把 Boo 类中的方法和属性拷贝到 Foo 中,所以当用 instanceof 运算符来检查是否是 Boo 的实例时,会返回 false。所以 Dojo 为每个类的实例添加了一个新的方法叫 isInstanceOf,用这个方法来检查多重继承。

Javascript 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
jquery maxlength使用说明
Sep 09 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
详解Anyscript开发指南绕过typescript类型检查
Sep 23 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 #Javascript
JS & JQuery 动态添加 select option
Jun 08 #Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 #Javascript
浅谈几种常用的JS类定义方法
Jun 08 #Javascript
浅谈javascript中的constructor
Jun 08 #Javascript
js定义类的几种方法(推荐)
Jun 08 #Javascript
JavaScript必知必会(七)js对象继承
Jun 08 #Javascript
You might like
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python 备份程序代码实现
2017/03/06 Python
python @property的用法及含义全面解析
2018/02/01 Python
python dumps和loads区别详解
2020/02/04 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
详解Python 中的容器 collections
2020/08/17 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
工厂采购员岗位职责
2014/04/08 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
《鲸》教学反思
2016/02/23 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
react中的DOM操作实现
2021/06/30 Javascript
Java spring单点登录系统
2021/09/04 Java/Android
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS