jQuery构造函数分析
在我的上一篇文章里面 阐述了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()的操作也不需要手动初始化就行调用普通函数一样简单。
jQuery构造函数分析的更多相关文章
- jQuery构造函数init参数分析(三)
分析完了字符串情况剩下的就不多了. 5.参数selector是函数 这个就是很容易想到了,首先说一下dom加载.我们通常在head里面写脚本的时候需要等待文档加载在进行处理,js是这么写的 windo ...
- jQuery构造函数init参数分析(二)
接着上一篇随笔讨论. 如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string ...
- jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数
一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,con ...
- JQuery安全分析
JQuery安全分析: JQuery的风险均来源于对输入的数据没有进行有效性检验.客户端的Javascript需要检验:来源于服务器的数据.来源于当前页面的用户输入,服务器端需要检验来源于用户端的数据 ...
- 转载 +function ($) { "use strict";}(window.jQuery);全面分析
转载 https://www.cnblogs.com/cndotabestdota/p/5664112.html +function ($) { "use strict";}(wi ...
- 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 浅谈jQuery构造函数
$()函数到底做的什么 jQuery在前端领域路人皆知,对于一向喜欢玩js的博主来说,虽然能力有限,但是还是很喜欢研究他的做为.那么一个简单的美元符号$与一对常见的()括号,jQuery底层到底做了哪 ...
- jQuery构造函数init参数分析(一)
在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用 ...
- jQuery框架分析第一章: 第一个匿名函数
我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码 首先你能看到所有代码被一个 (function(window,undefi ...
随机推荐
- CATransition转场动画
背景: 最近在温习动画,分享个简单系统的转场动画 viewcontroller *VC=[self.storyboard instantiateViewControllerWithIdentifier ...
- C#设计模式系列:模板方法模式(Template Method)
你去银行取款的时候,银行会给你一张取款单,这张取款单就是一个模板,它把公共的内容提取到模板中,只留下部分让用户来填写.在软件系统中,将多个类的共有内容提取到一个模板中的思想便是模板方法模式的思想. 模 ...
- 【.NET深呼吸】清理对象引用,有一个问题容易被忽略
大家知道,托管代码一个重要的特点是自动管理内存,即我们常说的垃圾回收机制,那些高大上的理论我就不重复了,有兴趣的朋友可以翻书.我这个有个毛病——不喜欢很严肃地去说一些理论的东西,所以我不多介绍了. 一 ...
- ExtJS4 源码解析(一)带项目分析
Ext这个东东太大了,能看完就已经很不错了,完整的源码分析就不敢说了,大概就涉及了类管理,事件管理,数据结构缓存架构,UI组件核心机制,MVC这几个方面,只是挑着源码看的,没有实际完整的使用. 公司的 ...
- 解决adb.exe' and can be executed.
百度google大家多说的是任务管理器 kill掉adb 或者重启adb server,但我任务管理器就没有adb ,猜测是某个程序占用了adb端口.于是按此思路查找. 5037为adb默认端口 查看 ...
- 10年C#历程的MVP之路与MVP项目介绍
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 1.意外的惊喜 10月份收到微软总部寄来的荣誉证书,非常激动, ...
- Visual Studio常用小技巧一:代码段+快捷键+插件=效率
用了visual studio 5年多,也该给自己做下备忘录了.每次进新的组换新的电脑,安装自己熟悉的环境又得重新配置,不做些备忘老会忘记一些东西.工具用的好,效率自然翻倍. 1,代码段 在Visua ...
- 移动前端开发-单页应用(spa)模型
一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面:对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合.使用HTML+C ...
- 磁盘操作系统(DOS)
一.概要 Disk Operation System(DOS)即磁盘操作系统,与win7一样是一个操作系统,字符界面,单用户,单任务. dos,是磁盘操作系统的缩写,是个人计算机上的一类操作系统.从1 ...
- ssh整合问题总结--在添加商品模块实现图片(文件)的上传
今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...