理解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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 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操作SVN版本服务器类代码
2011/11/27 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python魔法方法详解
2019/02/13 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python 调用Google翻译接口的方法
2020/12/09 Python
环保建议书400字
2014/05/14 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
花木兰观后感
2015/06/10 职场文书
同乡会致辞
2015/07/30 职场文书
办公室日常管理制度
2015/08/04 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers