理解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 相关文章推荐
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 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文件上传处理案例分析
2016/10/15 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
iView框架问题整理小结
2018/10/16 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
怎样拟定创业计划书
2014/05/01 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2014年项目工作总结
2014/11/24 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL