从Console中看看jQuery的原型链

最新推荐文章于 2023-10-09 20:17:40 发布

Annnnty

最新推荐文章于 2023-10-09 20:17:40 发布

阅读量891

点赞数

分类专栏： JavaScript 文章标签： javascript 源码前端

本文链接：https://blog.csdn.net/weixin_40346046/article/details/78283106

版权

本文探讨了jQuery的两种使用方式及其返回实例的原理。通过分析，确认jQuery既是构造函数，其prototype指向包含方法的对象。init方法在jQuery.fn中，且jQuery.fn.init与jQuery.prototype相同。文章通过正向梳理，解释了如何构建一个简单的jQuery原型链，实现无new构造实例、显式new创建实例及实例调用原型链方法的功能。

摘要由CSDN通过智能技术生成

写在最前

这不是一篇分析源码的文章——因为作者也没有怎么看源码。本文主要分析jQuery中到底是如何进行构造原型链的。思路是通过逆推来抛出问题再用正推的方式来分析解决问题。欢迎关注作者博客，不定期更新中——

jQuery是什么

首先你知道jQuery有两种使用方法吧？
一种是jQuery('#xxx')；一种是new jQuery('#xxx')；
这两种方式都会返回一个实例。其原型链应该有一大堆方法。比如：jQuery('#xxx').css；jQuery('#xxx').attr；jQuery('#xxx').html...等等。
并且我们应该认识到jQuery这个函数一方面返回了一个实例，另一方面其本身也是构造函数(因为 new jQuery)，那么其原型链也应该指向了那一大堆方法。我们一步步打印一下来验证下猜测：

console.log(jQuery) // 来看下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 );
  }