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 相关文章推荐
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
微信小程序实现页面左右滑动
Nov 16 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常用image图像函数集
2013/06/24 PHP
php while循环得到循环次数
2013/10/26 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
JS前端笔试题分析
2016/12/19 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
自我鉴定范文200字
2013/10/02 职场文书
广告设计专业自荐信范文
2013/11/14 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
人事专员岗位说明书
2014/07/29 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2015年招聘工作总结
2014/12/12 职场文书