理解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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
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下通过POST还是GET来传值
2008/06/05 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
Convert Seconds To Hours
2007/06/16 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
毕业生实习鉴定
2013/12/11 职场文书
培训讲师邀请函
2014/01/10 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
市场营销工作计划书
2014/09/15 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
导游词之阆中古城
2019/12/23 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
Python的property属性详细讲解
2022/04/11 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python