javascript面向对象的写法及jQuery面向对象的写法

文章由来:jQuery源码学习时的总结

在JS中,一般的面向对象的写法如下:

function Cao(){}//定义一个构造函数
Cao.prototype.init = function(){}//原型上添加初始化方法
Cao.prototype.other = function(){}//可执行的其他实际方法
var c1 = new Cao();//实例化对象
c1.init();//初始化
c1.css();//操作函数

定义一个对象Cao,实例化c1,c1.init()初始化,c1.other()调用其他可用方法,这样的做法比较麻烦,每次调用都需要实例化c1,然后初始化c1.init(),最后才可以调用其他方法。
jQuery的做法是:

function jQuery(){return new jQuery.prototype.init();}
jQuery.prototype.init = function(){}
jQuery.prototype.other = function(){}
jQuery.prototype.init.prototype = jQuery.prototype;//这句话可以先忽略,下面会讲
jQuery().other();

只有一行

jQuery().other();

代码就完成了所有工作,为什么?

分析下:

调用jQuery(),实际上完成了实例化和初始化的过程,因为jQuery()返回jQuery.prototype.init()的初始化对象。

 

jQuery->jQuery.prototype

jQuery->jQuery.prototype->jQuery.prototype.init

 

像上面的关系那样,返回的 new jQuery.prototype.init(),在jQuery的原型上,jQuery.prototype.init()上根本没有other()方法,如何让jQuery.prototype.init()也能操作other()呢?

 

所以就有了这样一句话:

jQuery.prototype.init.prototype = jQuery.prototype;

这句话是把jQuery原型的引用赋值给jQuery.prototype.init原型,像下面所示:

 

jQuery->jQuery.prototype

jQuery->jQuery.prototype->jQuery.prototype.init->jQuery.prototype.init.prototype->jQuery.prototype

 

这样在jQuery.prototype.init的原型上就有了jQuery原型的引用。

那jQuery()返回的jQuery.prototype.init(),实际上就包含了jQuery对象上的所有内容,所以jQuery().other();就是直接操作jQuery对象上的other()。

修改jQuery原型就是在修改初始化init对象的原型。

 

jQuery源码中实际的写法:

#61-#64行:

jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
},    

jQuery.fn.init是什么鬼呢?

 

在#96有这么一句话:

jQuery.fn = jQuery.prototype = {...}

说明jQuery.fn就是jQuery.prototype,即jQuery原型。

在#283:

jQuery.fn.init.prototype = jQuery.fn;

就是jQuery.prototype.init.prototype = jQuery.prototype;

posted @ 2015-06-29 13:59 caoruiy 阅读(...) 评论(...) 编辑 收藏