理解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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
关于vue面试题汇总
Mar 20 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
react结合bootstrap实现评论功能
May 30 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中session定期自动清理的方法
2015/11/12 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
2013年军训通讯稿
2014/02/05 职场文书
总经理工作职责范文
2014/03/14 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
使用pandas模块实现数据的标准化操作
2021/05/14 Python