JavaScript中instanceof的判断依据
读jquery源码的时候,发现作者为了让创建jquery对象更容易使用了用函数返回对象的方法
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery 对象的方法都定义在jQuery.prototype 上,然后init也是原型上的一个方法,为了让jQuery.fn.init构造函数能够继承jQuery.prototype上的方法把jQuery.fn.init.prototype指向了jQuery.prototype
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
...,
init: function( selector, context, rootjQuery ) {},
...,
}
jQuery.fn.init.prototype = jQuery.fn;
这样是妥善解决了方法继承问题,但是有个疑问:构造函数jQuery.fn.init创建的实例的对象类型是jQuery对象吗?
var obj = jQuery();
obj instanceof jQuery.fn.init //true
obj instanceof jQuery //这里obj好像跟jQuery 毫无关系
但是试了一下jQuery 方法创建的对象确实是jQuery的实例也就是说obj instanceof jQuery 为true;
于是就引出了JavaScript中instanceof的判断依据是什么的困惑,百思不得其解,网上查了一下原来是根据实例的__proto__ 属性。
instanceof的判断依据:
在实现js的继承的时候,每一个用new 构造出来的对象都会有一个私有的属性,在firefox和chrome中这个私有的属性叫做 __proto__,在 IE中也有一个这样类的的私有属性,只不过没有暴露给用户。
这个属性指向其构造函数的 prototype ,在执行 o2 = new O2() 的时候会有类似这样的赋值o2.__proto__ = O2.prototype所以在chrome 和 firefox中:
o2 instaneof O2 其实相当于 o2.__proto__ === O2.prototype || o2.__proto__.__proto__ === O2.prototype || ...
IE中也是类似,只不过这个属性不叫 __proto__
P.S 继承的实现:
当你读取 o2.pro 的时候,会现在o2中寻找有没有一个叫 pro 的属性,没有的话就去o2.__proto__中找有没有,还没有的话,就去o2.__proto__.__proto__中去找(记住一个对象的__proto__就是其构造函数的prototype)。。。这样一直下去其实最终会找到 Object.prototype,这样就实现了所有的对象都继承了Object。
当你写入 o2.pro 的时候就只会在o2中查找,不会递归的查找o2.__proto__,这样就会得到一个新的(如果没有的话)pro属性,然后当你再次访问 o2.pro 的时候,就是访问的这个新的属性,即使o2.__proto__中有这个属性,这就完成了属性/函数的重载
JavaScript中instanceof的判断依据的更多相关文章
- 深入剖析JavaScript中的数据类型判断(typeof instanceof prototype.constructor)
关于JavaScript中的类型判断,我想大部分JavaScripter 都很清楚 typeof 和 instanceof,却很少有人知道 constructor,以及constructor与前面二 ...
- JavaScript中instanceof与typeof运算符的用法及区别详细解析
JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typ ...
- 在JavaScript中,如何判断数组是数组?
如果你没有注意过这个问题,那么这个标题应该会让你感到困惑,判断数据类型这么基础的问题能有什么坑呢? 少年,你不能太天真了,我们朝夕面对的这门语言,可是JavaScript呀,任何你觉得已经习以为常的东 ...
- Javascript中类型的判断
数据类型的判断有这么几种方式 1.一元运算符 typeOf 2.关系运算符 instanceof 3.constructor 属性 4.prototype属性 一.typeof typeof的返回值有 ...
- JavaScript中准确的判断数据类型
在 ECMAScript 规范中,共定义了 7 种数据类型,分为基本类型和引用类型两大类. 其中: 基本类型:String.Number.Boolean.Symbol.Undefined.Null ...
- Javascript中数组的判断方法
摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.i ...
- JavaScript中instanceof运算符的用法以及和typeof的区别
instanceof : 判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例:返回boolean类型栗子①: var aColors = ["red", "g ...
- javascript中的分支判断与循环
分支判断与循环 分支结构 单一选择结构(if) 二路选择结构(if/else) 内联三元运算符 ?: 多路选择结构(switch) var condition = true; if (conditio ...
- JavaScript 中 if 条件判断
在JS中,If 除了能够判断bool的真假外,还能够判断一个变量是否有值. 下面的例子说明了JS中If的判断逻辑: 变量值 true '1' 1 '0' 'null' 2 '2' false 0 n ...
随机推荐
- InnoDB引擎的启动过程
一 前言 一直对InnoDB引擎的启动过程不太了解,查资料整理了下InnoDB引擎启动的过程和关闭过程,后续会整理些有关redo undo 的知识点. 二 思维导图 三 参考文章 MySQL运维内 ...
- ELK 学习笔记之 Logstash安装
Logstash安装: https://www.elastic.co/downloads/logstash 下载解压: tar –zxvf logstash-5.6.1.tar.gz 在/usr/lo ...
- jq方法写选项卡的基本原理以及三种方法
使用jq写选项卡,告别了繁琐的循环以及命名规范 基本原理: 1.当某一个btn被选中时,将这个btn的背景颜色设为橘色,其余兄弟btn背景颜色设为空(none) 2.如果子div与btn的索引相同,就 ...
- linux登录后出现-bash-4.1$
linux登录后有时候会出现-bash-4.1$ 造成这样的原因: 与这个用户有关环境变量没了,有关的文件被删除.也就是用户的家目录下面 .bash_profile .bashrc 被删除. 解决办法 ...
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- python编程基础之二十一
元组: t1 = () t2 = tuple() 成员访问: t1 =(10,7,12,23) print(t1[0]) #下表访问 连接操作 t1 = (1,2,3) t2 =(4,5,6) t3 ...
- 【TencentOS tiny】 超详细的TencentOS tiny移植到STM32F103全教程
移植前的准备工作 1. 获取STM32的裸机工程模板 STM32的裸机工程模板直接使用野火STM32开发板配套的固件库例程即可.可以从我github上获取https://github.com/jiej ...
- 设置Linux支持中文
1.首先在command输入locale,可以看到Linux下默认的系统语言的是英文 2.vim ~/.bashrc打开这个文件,该文件夹相当于系统配置文件 3.打开后,将后三行命令输入到文档中,最后 ...
- .NET Core 3.0 ,WTM 2.3.9发布
.Net Core 3.0已经来了,WTM怎么可以落后呢.最新发布的WTM2.3.9版本已经支持.Net Core 3.0啦,现在在线生成项目的时候可以选择2.2和3.0两个版本.小伙伴们快来体验吧. ...
- Windows 服务程序(一)
Windows 服务程序简介: Windows服务应用程序是一种需要长期运行的应用程序,它对于服务器环境特别适合. 它没有用户界面,并且也不会产生任何可视输出.任何用户消息都会被写进Windows事件 ...