理解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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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产生不重复随机数的5个方法总结
2014/11/12 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python中的多重继承实例讲解
2014/09/28 Python
python win32 简单操作方法
2017/05/25 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
C/C++程序员常见面试题一
2012/12/08 面试题
C#软件工程师英语面试题
2015/06/07 面试题
新闻专业推荐信范文
2013/11/20 职场文书
《木笛》教学反思
2014/03/01 职场文书
销售内勤岗位职责
2014/04/15 职场文书
安全员岗位职责范本
2015/04/11 职场文书
PHP命令行与定时任务
2021/04/01 PHP
浅谈golang 中time.After释放的问题
2021/05/05 Golang
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL