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 相关文章推荐
html超链接打开窗口大小的方法
Mar 05 Javascript
ajax与302响应代码测试
Oct 23 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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操作XML作为数据库的类
2010/12/19 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
简介Django中内置的一些中间件
2015/07/24 Python
Python之py2exe打包工具详解
2017/06/14 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python3 max()函数基础用法
2019/02/19 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
成教自我鉴定
2013/10/27 职场文书
高二学生评语大全
2014/04/25 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
教师节感谢信
2015/01/22 职场文书
文案策划岗位职责
2015/02/11 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
面试通知短信
2015/04/20 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS