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处理table表格的代码
Dec 06 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
小程序实现投票进度条
Nov 20 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
js实现随机点名
Jan 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发电子邮件
2006/10/09 PHP
source.php查看源文件
2006/12/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
学习ExtJS form布局
2009/10/08 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
轮播的简单实现方法
2016/07/28 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
python中反射用法实例
2015/03/27 Python
Python出现segfault错误解决方法
2016/04/16 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
PyQt5实现拖放功能
2018/04/25 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python关闭占用端口方式
2019/12/17 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python字典dict常用方法函数实例
2020/11/09 Python
UNIX特点都有哪些
2016/04/05 面试题
安全协议书
2014/04/23 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
教师职位说明书
2014/07/29 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
催款函范本大全
2015/06/24 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
讲解MySQL增删改操作
2022/05/06 MySQL