JavaScript instanceof 的用法
类别:Web前端 浏览量:4573
时间:2013-10-22 JavaScript instanceof 的用法
JavaScript instanceof 的用法在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。这就需要用到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
通常来讲,使用 instanceof 就是判断一个实例是否属于某种类型。
另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。例如:
// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例function Aoo(){} function Foo(){} Foo.prototype = new Aoo();//JavaScript 原型继承 var foo = new Foo(); console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true
上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,instanceof 运算符同样适用。
instanceof 复杂用法
console.log(Object instanceof Object);//true
console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false
console.log(String instanceof String);//false
console.log(Function instanceof Object);//true
console.log(Foo instanceof Function);//true
console.log(Foo instanceof Foo);//false
看了上面的代码是不是又晕头转向了?为什么 Object 和 Function instanceof 自己等于 true,而其他类 instanceof 自己却又不等于 true 呢?如何解释?要想从根本上了解 instanceof 的奥秘,需要从两个方面着手:1,语言规范中是如何定义这个运算符的。2,JavaScript 原型继承机制。
结论
instanceof 检测一个对象A是不是另一个对象B的实例的原理是:查看对象B的prototype指向的对象是否在对象A的[[prototype]]链上。如果在,则返回true,如果不在则返回false。不过有一个特殊的情况,当对象B的prototype为null将会报错(类似于空指针异常)。
您可能感兴趣
- javascript编写的小游戏(CSS3 实现NES游戏机的示例代码)
- jupyternotebook搭建和使用(Jupyter Notebook运行JavaScript的方法)
- js三级联动说明(基于JavaScript实现省市联动效果)
- js 定时切换图片(JavaScript定时器实现无缝滚动图片)
- javascript基础语法和用法(JavaScript中new操作符的原理示例详解)
- web前端快速入门之html(Web前端开发规范2017HTML/JavaScript/CSS)
- javascript执行类的所有方法(Javascript中异步等待的深入理解)
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- JavaScript 阻止超链接跳转的操作方法(多种写法)(JavaScript 阻止超链接跳转的操作方法多种写法)
- javascript dom事件模型(JavaScript WebAPI、DOM、事件和操作元素实例详解)
- javascript检测内容改变了(JavaScript 检测文件的类型的方法)
- js中事件的三个阶段(JavaScript中事件冒泡机制示例详析)
- JavaScript中call、apply、bind实现原理详解(JavaScript中call、apply、bind实现原理详解)
- JavaScript中使用concat合并数组
- js回调函数原理(关于JavaScript回调函数的深入理解)
- javascript如何操作文档元素(JavaScript操作元素实例大全)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
- 每日一典 过江之鲫(每日一典过江之鲫)
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
热门推荐
- docker部署oracle(Docker安装Oracle_11g的方法)
- wampserver配置教程图文(WampServer安装配置及使用图文教程)
- python零基础入门五小时(从0开始的Python学习016异常)
- 安装SQL Server 2016出错提示:需要安装oracle JRE7 更新 51(64位)或更高版本问题的解(安装SQL Server 2016出错提示:需要安装oracle JRE7 更新 5164位或更高版本问题的解)
- python变量指向讲解(详解python中init方法和随机数方法)
- dedecms用什么来调用文章描述(织梦DEDECMS文档关键词频率不能修改的解决方法)
- MVC中CheckBox
- 网站压力测试工具
- mysql什么是慢查询(MySQL慢查询的坑)
- laravel 数据库迁移(Laravel数据库读写分离配置的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9