jQuery源码学习一:对jQuery对象的一点思考

本文解析了jQuery源码中$()函数的工作原理,发现其并非直接返回jQuery实例,而是通过init构造函数实例化对象,并探讨了这种设计的原因。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    利用暑假时间开始看之前一直想看的jQuery源码,参考资料有高云的《jQuery 技术内幕:深入解析jQuery架构设计与实现原理》,源码版本就是书中的jQuery 1.7.1。

   之前就猜到$()应该是调用一个构造器,返回jQuery对象,但真正看到源码才发现,它返回的并不是jQuery的实例,而是另外一个构造函数init()的实例。这样应该是为了在创建jQuery对象的时候省去写new操作符。

(ps:写给初学者:在用new操作符创建一个构造函数的实例的时候,构造函数里的this指向一个新的空的对象,执行完构造函数的代码后,返回这个this,而作者return另外一个构造函数的实例,打破了这个关系,就不会返回jQuery的实例,而是返回init()的实例,因此创建jQuery对象的时候也就不用加new操作符了)

        var jQuery = (function() {
           var jQuery = function( selector, context ) {
                return new jQuery.fn.init( selector, context, root jQuery );
           },
              // 一堆局部变量声明
           jQuery.fn = jQuery.prototype = {
               constructor: jQuery,
                  init: function( selector, context, rootjQuery ) { ... },
                  // 一堆原型属性和方法
           };
          jQuery.fn.init.prototype = jQuery.fn;
          jQuery.extend = jQuery.fn.extend = function() { ... };
          jQuery.extend({
                 // 一堆静态属性和方法
         });
         return jQuery;

        })();

      并且把实际构造函数init()放在原型上,为了让init()的实例能够使用jQuery对象原型上的方法,又把init()的原型指向jQuery的原型,也就是jQuery.fn.init.prototype = jQuery.fn;

      我感觉如果是我来写jQuery对象,就算是为了省new操作符而另外写一个构造函数,也不会把init()函数放在原型上,而是会在jQuery并列的地方写个新的构造函数,我不知道作者把init()放在原型上是为了把所有方法封装在jQuery上还是什么。

    PS:源码真的写的蛮枯燥的,看不下去的时候,可以写个简单的小的调用例子,打个断点,一行行看。

    PS:说法有误的地方希望得到指正

   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值