浅谈jQuery构造函数分析


Posted in Javascript onMay 11, 2015

在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的:

(function( window, undefined ) {...})( window );

我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方法一样,jQuery就是普通的函数吗?如果是构造函数为什么不是 new $(document)的常见形式呢?

其实jQuery是面向对象js库,也有构造函数,每次调用jQuery方法是就会实例化一个jQeury对象,但是jQuery的写法却非常高明。

首先先谈谈js面向对象:  js虽然不是面向对象的语言,却又很多面向对象的写法,这里推荐大家看一下图灵的《javascript高级程序设计》中的面向对象的程序设计部分。在众多方法中比较常使用的写法是构造加原型方式,下面举例:

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'说'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom说你好

其实jQuery也是采用的这种方式只不过用了更聪明的写法,一起再看看jQuery的构造函数有什么不同

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

从源码中可以看到在jQuery真正的函数是init方法,当我们调用jQuery时会返回new init()的结果而不直接new jQuery() .

jQuery.fn是啥呢,在后面我们会看到这样一句代码

jQuery.fn = jQuery.prototype = {...

这样就很好理解了,其实jQuery.fn就是原型对象也就是说在jQuery原型里面有一个init方法,这个方法是真正的构造函数。这样写的好处就是不需要在写$().init()这样的操作,直接就初始化了,但是还有一个问题就是既然init才是构造函数那我们写在jQuery上面的那么方法实例不是不能调用吗?init的实例化自然只能调用init的方法啦,往后看到这样一句代码

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

之前讲过jQuery.fn=jQuery.protype,这就意味着jQuery的原型对象赋给了init的原型,这样jQuery的原型方法自然init也就都有了,通过这样构造方式S使得使用jQuery方法非常简单既不需要new jQuery()的操作也不需要手动初始化就行调用普通函数一样简单。

Javascript 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 Javascript
vue实现文字加密功能
Sep 27 Javascript
vuex实现购物车功能
Jun 28 Javascript
在JavaScript中正确引用bind方法的应用
May 11 #Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 #Javascript
javascript实现验证IP地址等相关信息代码
May 10 #Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 #Javascript
javascript实现获取字符串hash值
May 10 #Javascript
Javascript实现计算个人所得税
May 10 #Javascript
AngularJS基础知识笔记之表格
May 10 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
python进程与线程小结实例分析
2018/11/11 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
js实现验证码功能
2020/07/24 Javascript
基于Python代码编辑器的选用(详解)
2017/09/13 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
django删除表重建的实现方法
2019/08/28 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python调用C/C++的方法解析
2020/08/05 Python
矿泉水广告词
2014/03/20 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
python小程序之飘落的银杏
2021/04/17 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android