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 面向对象编程(1) 基础
May 18 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 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的mysqli_thread_id()函数讲解
2019/01/24 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python中turtle作图示例
2017/11/15 Python
对python3新增的byte类型详解
2018/12/04 Python
Python小进度条显示代码
2019/03/05 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python随机生成库faker库api实例详解
2019/11/28 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Django框架models使用group by详解
2020/03/11 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
Python进行统计建模
2020/08/10 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
《伯牙绝弦》教学反思
2014/03/02 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
投标承诺函范文
2015/01/21 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Python使用pyecharts控件绘制图表
2022/06/05 Python