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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
May 30 Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
package.json文件配置详解
Jun 15 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 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字符串处理的10个简单方法
2010/06/30 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python绘制漏斗图步骤详解
2019/03/04 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
flask项目集成swagger的方法
2020/12/09 Python
深圳-东方伟业笔试部分
2015/02/11 面试题
业务员薪酬管理制度
2014/01/15 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
机关节能减排实施方案
2014/03/17 职场文书
创先争优承诺书范文
2014/03/31 职场文书
小学生期末评语
2014/04/21 职场文书
连带责任保证书
2014/04/29 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015员工年度考核评语
2015/03/25 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技