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实现的抽象CSS圆角效果!!
May 03 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
基于empty函数的判断详解
2013/06/17 PHP
php图像处理类实例
2015/07/28 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
Python 远程开关机的方法
2020/11/18 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
高一家长会邀请函
2014/01/12 职场文书
学习保证书范文
2014/04/30 职场文书
厂区绿化方案
2014/05/08 职场文书
啤酒节策划方案
2014/05/28 职场文书
企业党员个人自我评价
2014/09/20 职场文书
物业工程部岗位职责
2015/02/11 职场文书