理解Javascript_07_理解instanceof实现原理


Posted in Javascript onOctober 15, 2010

理解Javascript_07_理解instanceof实现原理
那么instanceof的这种行为到底是如何实现的呢,现在让我们揭开instanceof背后的迷雾。

instanceof原理
照惯例,我们先来看一段代码:

function Cat(){} 
Cat.prototype = {} 
function Dog(){} 
Dog.prototype ={} 
var dog1 = new Dog(); 
alert(dog1 instanceof Dog);//true 
alert(dog1 instanceof Object);//true 
Dog.prototype = Cat.prototype; 
alert(dog1 instanceof Dog);//false 
alert(dog1 instanceof Cat);//false 
alert(dog1 instanceof Object);//true; 
var dog2= new Dog(); 
alert(dog2 instanceof Dog);//true 
alert(dog2 instanceof Cat);//true 
alert(dog2 instanceof Object);//true 
Dog.prototype = null; 
var dog3 = new Dog(); 
alert(dog3 instanceof Cat);//false 
alert(dog3 instanceof Object);//true 
alert(dog3 instanceof Dog);//error

让我们画一张内存图来分析一下:
理解Javascript_07_理解instanceof实现原理
内存图比较复杂,解释一下:
程序本身是一个动态的概念,随着程序的执行,Dog.prototype会不断的改变。但是为了方便,我只画了一张图来表达这三次prototype引用的改变。在堆中,右边是函数对象的内存表示,中间的是函数对象的prototype属性的指向,左边的是函数对象创建的对象实例。其中函数对象指向prototype属性的指针上写了dog1,dog2,dog3分别对应Dog.prototype的三次引用改变。它们和栈中的dog1,dog2,dog3也有对应的关系。(注:关于函数对象将在后续博文中讲解)
来有一点要注意,就是dog3中函数对象的prototype属性为null,则函数对象实例dog3的内部[[prototype]]属性将指向Object.prototype,这一点在《理解Javascript_06_理解对象的创建过程》已经讲解过了。

结论
根据代码运行结果和内存结构,推导出结论:
instanceof 检测一个对象A是不是另一个对象B的实例的原理是:查看对象B的prototype指向的对象是否在对象A的[[prototype]]链上。如果在,则返回true,如果不在则返回false。不过有一个特殊的情况,当对象B的prototype为null将会报错(类似于空指针异常)。

这里推荐一篇文章,来自于岁月如歌,也是关于instanceof原理的,角度不同,但有异曲同工之妙。

Javascript 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
JavaScript 对象模型 执行模型
Oct 15 #Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 #Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 #Javascript
JavaScript访问样式表代码
Oct 15 #Javascript
IE下js调试工具Companion.JS
Oct 15 #Javascript
jquery $.ajax各个事件执行顺序
Oct 15 #Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 #Javascript
You might like
PHP之数组学习
2011/05/29 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
销售求职信范文
2014/05/26 职场文书
525心理健康活动总结
2015/05/08 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL