脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 浅谈jQuery构造函数分析

浅谈jQuery构造函数分析

 更新时间：2015年05月11日 09:27:02   投稿：hebedich  
jquery的构造函数很好的运用的javascript的充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求，以至于一个函数可以实现多种功能需求，也为JavaScript语言的多态性提供了基础，在这个构造函数中，提供了六种不同的调用格式（根据官方API文档）

在我的上一篇文章里面 阐述了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()的操作也不需要手动初始化就行调用普通函数一样简单。

您可能感兴趣的文章:

相关文章

最新评论