理解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 Jquery 遍历Json的实现代码
Mar 31 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
js实现时间日期校验
May 26 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python中创建二维数组
2018/10/17 Python
基于python实现百度翻译功能
2019/05/09 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
简述python&pytorch 随机种子的实现
2020/10/07 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
英国森林假期:Forest Holidays
2021/01/01 全球购物
工作求职信
2014/07/04 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
客户答谢会致辞
2015/07/30 职场文书
2016年寒假家长评语
2015/10/10 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
七年级作文之冬景
2019/11/07 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python