浅谈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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
Javascript 学习书 推荐
Jun 13 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 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
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
js实现在同一窗口浏览图片
2014/09/17 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
学习python (2)
2006/10/31 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
extern是什么意思
2016/03/10 面试题
小学岗位竞聘方案
2014/01/22 职场文书
挂牌仪式主持词
2014/03/20 职场文书
医学生求职信
2014/07/01 职场文书
个人授权委托书模板
2014/09/14 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
高中体育课教学反思
2016/02/16 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
java基础——多线程
2021/07/03 Java/Android