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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
基于JavaScript的数据结构队列动画实现示例解析
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
实用函数4
2007/11/08 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
javascript基本语法
2016/05/31 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
python如何在终端里面显示一张图片
2016/08/17 Python
详解python之协程gevent模块
2018/06/14 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Python如何输出整数
2020/06/07 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
生活小常识广播稿
2015/08/19 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js