理解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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
jQuery表单选择器用法详解
2019/08/22 jQuery
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python实现可视化动态CPU性能监控
2018/06/21 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
代码详解django中数据库设置
2019/01/28 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
主持人演讲稿范文
2013/12/28 职场文书
简单的项目建议书模板
2014/03/12 职场文书
家长通知书家长评语
2014/04/17 职场文书
2014年老干部工作总结
2014/11/21 职场文书
史上最牛辞职信
2015/05/13 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
合作协议书格式范本
2016/03/21 职场文书
导游词之日本富士山
2020/01/06 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python