理解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 相关文章推荐
gridpanel动态加载数据的实例代码
Jul 18 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
vue路由插件之vue-route
Jun 13 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue-cli4.5.x快速搭建项目
May 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
理解PHP中的stdClass类
2014/04/18 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
Web开发之JavaScript
2012/03/29 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
layui选项卡效果实现代码
2017/05/19 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
Angular CLI 安装和使用教程
2017/09/13 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python中强大的命令行库click入门教程
2016/12/26 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
什么是serialVersionUID
2016/03/04 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
年终工作总结范文2014
2014/11/27 职场文书
自荐信格式模板
2015/03/27 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
企业团队精神心得体会
2016/01/19 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS