理解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的多标签实现代码
Sep 19 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
JQuery教学之性能优化
May 14 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 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
一个SQL管理员的web接口
2006/10/09 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
JS传参及动态修改页面布局
2017/04/13 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
Python的高阶函数用法实例分析
2019/04/11 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python安装Bs4的多种方法
2020/11/28 Python
学生会干部自荐信
2014/02/04 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
python 常用的异步框架汇总整理
2021/06/18 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
python 单机五子棋对战游戏
2022/04/28 Python