理解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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
一个用js实现控制台控件的代码
Sep 04 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 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获取mysql版本的几种方法小结
2008/03/25 PHP
php 函数中使用static的说明
2012/06/01 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
PHP框架性能测试报告
2016/05/08 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python最长公共子串算法实例
2015/03/07 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python构造函数init实例方法解析
2020/01/19 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
岗位职责定义及内容
2013/11/08 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
教师节演讲稿
2014/05/06 职场文书
销售活动策划方案
2014/08/26 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书