思洋互动网站建设学前班

生命--返回实例

2.2.1节所列举的代码，相信很多读者都见过，甚至有可能也写过类似的代码，但是只有John Resig一个人把它发展成了jQuery这样不朽的框架。

当我们为jQuery添加了两个原型成员：jquery属性和size()方法之后，这个框架最基本的样子就孕育出来了。但是，该如何调用jquery属性和size()方法呢？

也许，你可以采用如下方法调用：

1. <script language="javascript" type="text/javascript"> 
2. var my$ = new $();   //实例化  
3. alert( my$.jquery ); //调用属性，返回"1.3.2"  
4. alert( my$.size() );//调用方法，返回undefined  
5. </script> 

但是，jQuery不是这样调用的。它模仿类似下面的方法进行调用。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. $().jquery;  
2. $().size(); 

也就是说，jQuery没有使用new运算符将jQuery类实例化，而是直接调用jQuery()函数，然后在这个函数后面直接调用jQuery的原型方法。这是怎么实现的呢？

如果你模仿jQuery框架的用法执行下面的代码，浏览器会显示编译错误。这说明上面这个案例代码还不是真正的jQuery技术原型。

1. alert($().jquery );  
2. alert($().size() ); 

也就是说，我们应该把jQuery看做一个类，同时也应该把它视为一个普通函数，并让这个函数的返回值为jQuery类的实例。因此，下面这种结构模型才是正确的。

1. <script language="javascript" type="text/javascript"> 
2. var $ =jQuery = function(){  
3.     return new jQuery();    //返回类的实例  
4. }  
5. jQueryjQuery.fn = jQuery.prototype = {  
6.     jquery: "1.3.2",  
7.     size: function() {  
8.         return this.length;  
9.     }  
10. }  
11. alert($().jquery );  
12. alert($().size() );  
13. </script> 

但是，如果在浏览器中预览，则会提示如图2.1所示的错误。内存外溢，说明出现了死循环引用。

那么如何返回一个jQuery实例呢？

回忆一下，当使用var my$ = new $();创建jQuery类的实例时，this关键字就指向对象my$，因此my$实例对象就获得了jQuery.prototype包含的原型属性或方法，这些方法内的this关键字就会自动指向my$实例对象。换句话说，this关键字总是指向类的实例。

图2.1  内存外溢错误

因此，我们可以这样尝试：在jQuery中使用一个工厂方法来创建一个实例，把这个方法放在jQuery.prototype原型对象中, 然后在jQuery()函数中返回这个原型方法的调用。代码如下所示。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script language="javascript" type="text/javascript"> 
2. var $ =jQuery = function(){  
3.     return jQuery.fn.init();    //调用原型方法init()  
4. }  
5. jQueryjQuery.fn = jQuery.prototype = {  
6.     init : function(){    //在初始化原型方法中返回实例的引用  
7.         return this;  
8.     },  
9.     jquery: "1.3.2",  
10.     size: function() {  
11.         return this.length;  
12.     }  
13. }  
14. alert( $().jquery );   //调用属性，返回"1.3.2"  
15. alert( $().size() );    //调用方法，返回undefined  
16. </script>