理解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+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
vue element实现表格合并行数据
Nov 30 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
当海贼王变成JOJO风
2020/03/02 日漫
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php绘制一条直线的方法
2015/01/24 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python向excel中写入数据的方法
2019/05/05 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
中职生自荐信
2013/10/13 职场文书
终止合同协议书
2014/04/17 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
毕业实习计划书
2015/01/16 职场文书
总经理检讨书范文
2015/02/16 职场文书
会计岗位职责范本
2015/04/02 职场文书