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 相关文章推荐
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 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
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
记录Django开发心得
2014/07/16 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
python requests库的使用
2021/01/06 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
函授本科自我鉴定
2013/11/03 职场文书
超市端午节活动方案
2014/01/23 职场文书
美发店5.1活动方案
2014/01/24 职场文书
法制教育观后感
2015/06/17 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle