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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
js实现异步循环实现代码
Feb 16 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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 jsonp单引号转义
2014/11/23 PHP
php中的登陆login实例代码
2016/06/20 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
js获取单选按钮的数据
2006/11/27 Javascript
定义select的边框颜色
2008/04/28 Javascript
超级退弹代码
2008/07/07 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
详解python tkinter模块安装过程
2020/01/06 Python
python时间日期操作方法实例小结
2020/02/06 Python
Django实现内容缓存实例方法
2020/06/30 Python
一些Unix笔试题和面试题
2013/01/22 面试题
自荐信的两点禁忌
2013/10/30 职场文书
社区工作者思想汇报
2014/01/13 职场文书
会计工作心得体会
2014/01/13 职场文书
常务副总经理任命书
2014/06/05 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
《七律·长征》教学反思
2016/02/16 职场文书