浅谈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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
elementui的el-popover修改样式不生效的解决
Jun 30 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php构造函数的继承方法
2015/02/09 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
php实现文件上传基本验证
2020/03/04 PHP
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python中的类学习笔记
2014/09/23 Python
详解Python之unittest单元测试代码
2018/01/24 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python图形用户接口实例详解
2019/12/16 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Django nginx配置实现过程详解
2020/09/10 Python
医学专业五年以上个人求职信
2013/12/03 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
公司投资建议书
2014/05/16 职场文书
个人向公司借款协议书
2014/10/09 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书