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 ...
随机推荐
- jQuery源码分析系列(35) : Ajax - jsonp的实现与原理
ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本 json核心就是:允许用户传递一个callba ...
- Use Qt in Debian for OpenCASCADE
Use Qt in Debian for OpenCASCADE eryar@163.com Recently several OpenCASCADE enthusiasts want to buil ...
- Minor【 PHP框架】3.路由、控制器、视图
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
- Android之控件使用
Android系统为我们提供了大量的控件,例如:开关控件.单选按钮.多选按钮.单选菜单等等,那么这些控件如何使用呢?本篇我将带领大家一道学习一下如何使用这些控件.所谓无图无真相,先让大家看一下效果图: ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- ASP.NET中使用HttpWebRequest调用WCF
最近项目需要和第三网站进行数据交换,第三方网站基本都是RESTfull形式的API,但是也有的是Web Service,或者.NET里面的WCF.微软鼓励大家使用WCF替代Web Service. W ...
- geotrellis使用(十一)实现空间数据库栅格化以及根据属性字段进行赋值
Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 安装空间数据库 空间数据库栅格化 根据属性字段进行赋 ...
- js面试题之数组去重对比
最近看一些面试题,很多都提到了数组去重,用的最多的不外乎就是下面这个例子 arr.filter(function(value,index,arr){ return arr.indexOf(value, ...
- js数组去重的4种方法
js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...
- Compute Resource Consolidation Pattern 计算资源整合模式
Consolidate multiple tasks or operations into a single computational unit. This pattern can increase ...