jQuery中创建实例与原型继承揭秘


Posted in Javascript onDecember 21, 2011

如 new Object()、new Date()等等!(object有{},数组有[]这样的快捷方式 ,我们主要探讨new这种方式。)

我们在使用jQuery时从来没有使用过new,他是不是用其他方法来生成实例呢?是不是没有使用prototype属性呢?事实上他都有使用,只是内部处理的非常巧妙,提高了使用的爽快度。我们来看看他的源码。

funtion jQuery( selector, context){ 
return new jQuery.fn.init( selector, context ); 
}

这里可以看出jQuery是有构造函数的,也是用了new 创建实例的。那么jQuery.fn是什么呢?后面有个这样的处理:
jQuery.fn = jQuery.prototype={ 
init:function (){} 
}

这样我们就明白了,jQuery的构造函数是他原型上的init方法,而不是function jQuery。这样的话每次调用$()他都会用jQuery原型上的init创建一个实例,那么新的问题来了。如果用init创建实例的话,这个对象继承的是init的prototype上的方法而不会继承jQuery prototype上的方法,那么他是怎么实现原型继承的呢?

jQuery.fn.init.prototype = jQuery.fn;
这里他有一个这样的处理,把jQuery.fn赋值给了jQuery.fn.init.prototype ,这一步很关键。我门看看这些是什么。

jQuery.fn是jQuery.prototype

jQuery.fn.init.prototype是jQuery.prototype.init.prototype

这个处理相当于

jQuery.prototype = jQuery.prototype.init.prototype

那么每当我们调用$()是,jQuery就会用new运算符调用他prototype上的init创建一个实例,这个由init创建实例会继承jQuery protype上的所有方法,并且这个实例的__proto__内部属性会指向jQuery的prototype属性。

另外我们注意到这个处理:

jQuery.fn = jQuery.prototype

这是他为了避免频繁的操作jQuery.prototype,所以用jQuery.fn缓存了jQuery.prototype。

这些的处理实在是非常巧妙,内部处理了实例创建不用使用者用new去生成实例,又非常漂亮的处理了prototype保证多实例共享方法减少资源开支。

Javascript 相关文章推荐
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
jquery随机展示头像代码
Dec 21 #Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 #Javascript
jquery $.getJSON()跨域请求
Dec 21 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 #Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 #Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 #Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 #Javascript
You might like
解析php5配置使用pdo
2013/07/03 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
Javascript 解疑
2009/11/11 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
Python实现端口复用实例代码
2014/07/03 Python
Python pickle模块用法实例
2015/04/14 Python
python机器学习实战之K均值聚类
2017/12/20 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书