JS之instanceof详解
instanceof
用于检测构造函数的 prototype
属性是否出现在某个实例对象的原型链上。
- 语法:
object instanceof constructor
object
:某个实例对象constructor
:某个构造函数
用来检测
constructor.prototype
是否存在于参数object
的原型链上。
示例
// 定义构造函数
function C () {}
function D () {}
// 实例化一个 o 对象
var o = new C()
// true,true --> C.prototype 在 o 的原型链上
console.log(o instanceof C, o.__proto__ === C.prototype, '此时 o 的 __proto__:', o.__proto__, '此时 C 的 prototype:', C.prototype)
// false,false --> D.prototype 不在 o 的原型链上
console.log(o instanceof D, o.__proto__ === D.prototype)
// true true --> Object.prototype 在 o 的原型链上
console.log(o instanceof Object, o.__proto__.__proto__ === Object.prototype)
// 这时我们修改构造函数 C 的原型为一个空对象
C.prototype = {}
// 实例化一个 o2 对象
var o2 = new C()
// true --> C.prototype 在 o2 的原型链上
console.log(o2 instanceof C)
// false,C.prototype 指向了一个空对象,这个空对象不在 o 的原型链上.
console.log(o instanceof C, '此时 o 的 __proto__:', o.__proto__, '此时 C 的 prototype:', C.prototype)
console.log('此时 D 的 prototype:', D.prototype);
// 继承
D.prototype = new C()
console.log('此时 D 的 prototype:', D.prototype);
var o3 = new D()
// true, true --> 因为 o3 是 构造函数 D new 出来的实例对象,所以 D.prototype 一定在 o3 的原型链上
console.log(o3 instanceof D, o3.__proto__ === D.prototype)
// true --> 因为 C.prototype 现在在 o3 的原型链上
console.log(o3 instanceof C)
// true,true --> 上面的结果为什么为 true 呢,看如下代码,D.prototype 是 构造函数 C new 出来的实例对象,所以 C.prototype 一定在 D.prototype 的原型链上
console.log(o3.__proto__ === D.prototype, D.prototype.__proto__ === C.prototype);
// true 相当于如下代码
console.log(o3.__proto__.__proto__ === C.prototype);
运行结果如图所示
一些容易出错的点
var simpleStr = "This is a simple string";
var myString = new String();
var newStr = new String("String created with constructor");
var myDate = new Date();
var myObj = {};
var myNonObj = Object.create(null);// 返回 false, simpleStr 并不是对象
simpleStr instanceof String;
// 返回 true
myString instanceof String;
// 返回 true
newStr instanceof String;
// 返回 true
myString instanceof Object;
// 返回 true
myObj instanceof Object;
// 返回 true
({}) instanceof Object;
// 返回 false, 一种创建非 Object 实例的对象的方法
myNonObj instanceof Object;
// 返回 false
myString instanceof Date;
// 返回 true
myDate instanceof Date;
// 返回 true
myDate instanceof Object;
// 返回 false
myDate instanceof String;
Object.create(null)
会造成创建的对象其__proto__
指向为空
instanceof 判断基本数据类型的方法
其实就是自定义
instanceof
行为的一种方式,这里将原有的instanceof
方法重定义,换成了typeof
,因此能够判断基本数据类型。
class PrimitiveNumber {static [Symbol.hasInstance](x) {return typeof x === 'number'}
}
// true
console.log(111 instanceof PrimitiveNumber)
手动实现一下instanceof的功能
function copyInstanceof (source, target) {// 基本数据类型以及 null 直接返回 falseif (!['function', 'object'].includes(typeof source) || source === null) return false// getProtypeOf 是 Object 对象自带的一个方法,能够拿到参数的原型对象let proto = Object.getPrototypeOf(source)while (true) {// 查找到尽头,还没找到if (proto == null) return false// 找到相同的原型对象if (proto == target.prototype) return trueproto = Object.getPrototypeOf(proto)}
}
console.log(copyInstanceof("111", String)); // false
console.log(copyInstanceof(new String("111"), String)); // true
console.log(copyInstanceof(Date, Function)); // true
console.log(copyInstanceof(null, Object)); // false
JS之instanceof详解相关推荐
- js_long.php,protobuf.js 与 Long.js的使用详解
这次给大家带来protobuf.js 与 Long.js的使用详解,是急用protobuf.js 与 Long.js的注意事项有哪些,下面就是实战案例,一起来看一下. protobuf.js的结构和w ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 --持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
- js排序算法详解-归并排序
js系列教程5-数据结构和算法全解 js排序算法详解-归并排序 归并排序其实可以类比二分法,二分法其实就是二等分的意思,简而言之就是不断和新序列的中间值进行比较.归并排序似乎有异曲同工之妙,什么意思呢 ...
- js排序算法详解-基数排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-基数排序 其实基数排序和桶排序挺类似的,都是找一个容器把属于同一类的元素装起来,然后进行排序.可以把基数排序类 ...
- js排序算法详解-桶排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-桶排序 一看到这个名字就会觉得奇特,几个意思,我排序还要再准备几个桶不成?还真别说,想用桶排序还得真准备几个桶 ...
- js排序算法详解-计数排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-计数排序 计数排序就是遍历数组记录数组下的元素出现过多次,然后把这个元素找个位置先安置下来,简单点说就是以原数 ...
- js排序算法详解-堆排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-堆排序 这种排序方式呢,理论性太强,看动图的时候满脸写着懵逼,多看几遍似乎明白了编者的意图,但是要把这种理论的 ...
- js排序算法详解-快速排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-快速排序 既然是快速排序,那顾名思义一定很快,快的连小编都被懵逼了好几圈!建议先不要看动图,先看第一种写法: ...
最新文章
- BFC与垂直外边距折叠笔记
- 在struts-config.xml中配置validator-plugin导致404 Servlet action is not available
- syslog简介——系统日志写入API
- Win10安装玩Ubuntu19.04后,bios和grub页面都没有Windows启动项,无法进入Windows
- 2017网易云创大会教育论坛,等你!
- 操作系统 第二章【进程管理】【MOOC答案】
- Spring mvc DispatchServlet 实现机制
- python中的def语句_Python def 函数
- error LNK2019: unresolved external symbol “__declspec(dllimport) public: __thiscall 的解决方案
- mysql exporter怎么配置_mysqld_exporter的源码分析和定制化(单个mysqld_exporter监控多个数据库实例)...
- Ubuntu各个版本国内源
- 《BUG创造队》第九次团队作业:Beta冲刺与验收准备
- 记录SpringSecurity jwt问题
- 从技术和历史的视角,理解Too many technical terms in FE BE
- [转载]JXTA技术与原型实现简介
- 运动控制卡应用开发教程之Python
- 【五校联考5day2】光棍
- aspcms用mysql_aspcms增加手机版支持与电脑公用一个后台
- 总结JavaScript的数据类型转换
- 嵩天老师《Python语言程序设计》第6周测试题笔记