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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 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
做一个有下拉功能的留言版
2006/10/09 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
使用python实现省市三级菜单效果
2016/01/20 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
工作的心得体会
2013/12/31 职场文书
高一学生期末评语
2014/04/25 职场文书
节约能源标语
2014/06/17 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python