jQuery源码分析(三):构造器

前端基础 2016-10-26

起步

这篇是对上一篇的一个补充,静态与实例方法共享设计的在上一篇也提过了:

$(".xx").each()    //作为实例方法存在
$.each()           //作为静态方法存在

源码中:

jQuery.fn = jQuery.prototype = {
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    }
};

实例方法取于静态方法,这就是静态与实例方法共享设计。所以jQuery通过2个构造器划分2种不同的调用方式一种是静态,一种是原型。

两个构造器

init.prototype = jQuery.fn;绝对是点睛之笔,把jQuery.prototype原型的引用赋给jQuery.fn.init.prototype的原型,这样就把2个构造器的原型给关联起来了。一个静态构造器,通过jQuery.fun_name来创建,一个实例构造器,通过jQuery.fn.fun_name创建。结构就有条理了,设计别具匠心。

构造器结构

20161026172828.png

原型传递,把jQuery的原型传递给jQuery.prototype.init.prototype。就是说jQuery的原型对象覆盖了init构造器的原型对象,因为是引用传递所以不需要担心这个循环引用的性能问题。


本文由 hongweipeng 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

赏个馒头吧