读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的判断依据的更多相关文章

  1. 深入剖析JavaScript中的数据类型判断(typeof instanceof prototype.constructor)

    关于JavaScript中的类型判断,我想大部分JavaScripter 都很清楚 typeof 和  instanceof,却很少有人知道 constructor,以及constructor与前面二 ...

  2. JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typ ...

  3. 在JavaScript中,如何判断数组是数组?

    如果你没有注意过这个问题,那么这个标题应该会让你感到困惑,判断数据类型这么基础的问题能有什么坑呢? 少年,你不能太天真了,我们朝夕面对的这门语言,可是JavaScript呀,任何你觉得已经习以为常的东 ...

  4. Javascript中类型的判断

    数据类型的判断有这么几种方式 1.一元运算符 typeOf 2.关系运算符 instanceof 3.constructor 属性 4.prototype属性 一.typeof typeof的返回值有 ...

  5. JavaScript中准确的判断数据类型

    在 ECMAScript 规范中,共定义了 7 种数据类型,分为基本类型和引用类型两大类. 其中: 基本类型:String.Number.Boolean.Symbol.Undefined.Null  ...

  6. Javascript中数组的判断方法

    摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.i ...

  7. JavaScript中instanceof运算符的用法以及和typeof的区别

    instanceof : 判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例:返回boolean类型栗子①: var aColors = ["red", "g ...

  8. javascript中的分支判断与循环

    分支判断与循环 分支结构 单一选择结构(if) 二路选择结构(if/else) 内联三元运算符 ?: 多路选择结构(switch) var condition = true; if (conditio ...

  9. JavaScript 中 if 条件判断

    在JS中,If 除了能够判断bool的真假外,还能够判断一个变量是否有值. 下面的例子说明了JS中If的判断逻辑: 变量值 true '1' 1 '0' 'null' 2 '2'  false 0 n ...

随机推荐

  1. 详解es6 class语法糖中constructor方法和super的作用

    大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中 ...

  2. uC/OS-III 时钟节拍(一)

    时钟节拍就是操作系统的时基,操作系统要实现时间上的管理,必须依赖于时基(时基即时间基准,操作系统的基准时钟). uC/OS-III时钟节拍的实现过程 时钟节拍就是系统以固定的频率产生中断(时基中断), ...

  3. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. Kotlin基本语法和使用技巧

    基本语法 val value: String? = "HelloWorld" val name: String = getName() ?: return //如果是null就re ...

  5. java架构之路-(SpringMVC篇)SpringMVC主要流程源码解析(下)注解配置,统一错误处理和拦截器

    我们上次大致说完了执行流程,也只是说了大致的过程,还有中间会出错的情况我们来处理一下. 统一异常处理 比如我们的运行时异常的500错误.我们来自定义一个类 package com.springmvcb ...

  6. latex转word公式 java (latextoword,latex_word,latex2word,latex_omml)

    latex_word 主要目的:     给大家分享一个我的原创作品:latex转为word公式(omml)工具 [java] 此工具主要用于将含有latex公式的文本下载成word时,将latex转 ...

  7. asp.net core 3.0 更新简记

    asp.net core 3.0 更新简记 asp.net core 3.0 更新简记 Intro 最近把活动室预约项目从 asp.net core 2.2 更新到了 asp.net core 3.0 ...

  8. MongoDB 学习笔记之 replica set搭建

    Replica set搭建: 修改mongodb.conf文件,指明replSet 登入客户端,指定副本集成员,进行初始化, 如果priority需要调整,使用reconfig()方法.Seconda ...

  9. php导出excel乱码怎么处理

    使用PHP导出excel文档,有时候莫名其妙就会出现导出的数据乱码,现在推荐一个万能修补大法 话不多说,直接上代码 核心就是在处理完数据之后,输出excel文件之前 添加 ob_end_clean() ...

  10. (转) websocket 和 socket 剖析

    Socket 与 WebSocket 本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本站部分原创和翻译文 ...