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 ...
随机推荐
- SSISDB1:使用SSISDB管理SSIS Projects
使用Project Deployment Model,将SSIS Project部署到Integration Services Catalog之后,SSISDB负责管理SSIS Project.在SS ...
- OpenCASCADE Make Primitives-Sphere
OpenCASCADE Make Primitives-Sphere eryar@163.com Abstract. The sphere is the simplest topology shape ...
- alert()与console.log()的区别
[1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al ...
- Java 8新特性-2 接口定义增强
为了解决当原有的接口中方法不足时,向原有的接口中添加新的方法,该接口下的N多实现类也需要重写该方法的问题!Java8引入了接口定义增强概念! Java8 打破了原有的接口的方法定义: 公共的.抽象的 ...
- 使用karma测试平时写的小demo(arguments为例)
有人说前端自动化测试非常困难,我觉得确实如此.在项目中,我个人也不放心写的测试,还是要手动测试.但是我们平时写demo学习时,完全可以使用自动化测试. 传统demo 1,新建一个html 2,写入js ...
- iOS开发之SQLite--C语言接口规范(三)——Binding Values To Prepared Statements
在前面的博客中已经介绍了如何连接SQLite数据库,并且简单的查询和遍历结果集.在前面用到了sqlite3_stmt *stmt,也就是预编译后的SQL语句.在本篇博客中会了解一下sqlite3_st ...
- 用jekyll制作高大上的网站(二)——实际应用
最近公司要制作个文档库,直接就可以将jekyll应用到实际中. 模版使用了Jekyll Clean,这么模版相对内部简单一点,学习成本不会很大,而复杂的Minimal Mistakes就当作参考. 模 ...
- 移动端 h5调试技巧
一 安卓 一 chrome 1.安卓手机安装chrome浏览器,手机打开开发者模式,用usb线链接电脑,并且允许调试. 2.电脑chrome地址栏输入 chrome://inspect 进入后点击 i ...
- Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)
上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...
- C# NPOI导出Excel和EPPlus导出Excel比较
系统中经常会使用导出Excel的功能. 之前使用的是NPOI,但是导出数据行数多就报内存溢出. 最近看到EPPlus可以用来导出Excel,就自己测了下两者导出上的差异. NPIO官网地址:http: ...