星空网 > 软件开发 > Java

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构造函数有什么不同

// Define a local copy of jQueryvar 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 instantiationjQuery.fn.init.prototype = jQuery.fn;

 

之前讲过jQuery.fn=jQuery.protype,这就意味着jQuery的原型对象赋给了init的原型,这样jQuery的原型方法自然init也就都有了,通过这样构造方式S使得使用jQuery方法非常简单既不需要new jQuery()的操作也不需要手动初始化就行调用普通函数一样简单。

 




原标题:jQuery构造函数分析

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

都9102年了,你还不知道C2C平台?:https://www.ikjzd.com/articles/96022
关于海运保险常识,看这一篇就够了!:https://www.ikjzd.com/articles/96023
亚马逊无货源模式:无需货源,如何操作?:https://www.ikjzd.com/articles/96024
Alexa排名:精准分析各大电商平台流量与市场容量!:https://www.ikjzd.com/articles/96028
独立站卖家如何玩转Instagram平台:https://www.ikjzd.com/articles/96029
美国第二大电商平台-沃尔玛的入驻条件、流程费用全解析:https://www.ikjzd.com/articles/96030
昆明旅游索道公司 昆明旅游索道公司有哪些:https://www.vstour.cn/a/406243.html
太仓美食网(探寻太仓最美味的美食):https://www.vstour.cn/a/406244.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流