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 相关文章推荐
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
JsChart组件使用详解
Mar 04 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 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
php中的数组操作函数整理
2008/08/18 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript DOM基础
2015/04/13 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
python迭代器与生成器详解
2016/03/10 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Django设置Postgresql的操作
2020/05/14 Python
基于Python实现简单学生管理系统
2020/07/24 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
求职信的要素有哪些呢
2013/12/26 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
求职信内容怎么写
2014/05/26 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
创先争优活动承诺书
2014/08/30 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
优秀护士事迹材料
2014/12/25 职场文书
综合办公室岗位职责
2015/04/11 职场文书
公司员工体检通知
2015/04/21 职场文书
法律进社区活动总结
2015/05/07 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
签字仪式主持词
2015/07/03 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Java设计模式之代理模式
2022/04/22 Java/Android
python高温预警数据获取实例
2022/07/23 Python