jQuery中关于jQuery.fn.init.prototype = jQuery.fn的解读

这篇博客探讨了jQuery源码中的初始化过程,特别是`jQuery.fn.init.prototype = jQuery.fn`这一关键语句。作者解释了这段代码如何避免死循环,并通过原型图解帮助读者理解其工作原理。

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

  今天刚好是前一个项目上线的第二天,所以今天很闲,没什么事情做,突发奇想,想看看jQuery的源码。遂将看懂的一点记录与此,后续还会更新。

  今天主要说一下jQuery的初始化,jQuery初始化的时候都是没有用new关键字生成的,所以,下面试想,如果不用new,jQuery的源码应该是这样的

var jQuery = function(selector, context) {
    return new jQuery(selector, context);
}

但是,但凡有一点编程基础的都会知道,这段代码会进入死循环,那jQuery源码到底是怎么解决的呢?带着这个疑问,请继续看下去。

  jQuery初始化源码如下: 

var jQuery = function (selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init(selector, context);
}
jQuery.fn = jQuery.prototype = {

    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,

    // The default length of a jQuery object is 0
    length: 0,

    init:function(){
        ...
    }
    //一些实例方法
    ...
}

最关键的一句

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn

  不知道大家是怎么理解的,反正我是看了几遍没看懂。
  最后,网上查阅资料,终于弄懂了,其实特别的简单,就是关于js原型的东西,一画图,就Ok了。自己画的图,比较丑。
  这里写图片描述

不过,网上找了一张好看的图
这里写图片描述

大概就是这样了,不知道人们看不看的懂,有时候觉得会吹牛逼也是一种能力。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值