初识jQuery源码

Posted 2020-11-15 dajunjun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识jQuery源码相关的知识，希望对你有一定的参考价值。

为了深入学习下jQuery，最近打算看看源码，刚开始看这个我内心其实是拒绝的。。。第一印象就是好难理解，没办法硬骨头总是要去啃得，看了好多分析源码的文章博客，第一篇当然是Aaron的jQuery源码解读系列的开篇之整体架构。介绍的还是比较详细的，推荐~当然要抱着怀疑的眼光去看，不一定人家写的就是对的，敲出来验证下才是王道，这篇文章后的评论也可以看看，是大家对于该文章某些地方的质疑。

看完这篇文章其实我是半懂的状态，后来又看到一篇总结的博文，大概是在此基础上总结的。

点这里

我并不想重复的记录下相同的文字，只是想说一下我理解的时候觉得困难的地方。

先附上源码：

jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
},
jQuery.fn = jQuery.prototype = { 
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        ...
        return this;
    }
    ...
}
jQuery.fn.init.prototype = jQuery.fn;

1.jQuery中为什么要返回new jQuery.fn.init
首先为了让我们在调用jQuery的时候像这样：

1 2	$('#id').css(); $.ajax();

就是把jQuery看成是一个类，在原型上绑定方法就相当于成员方法，在jQuery上绑定工具方法，相当于类的静态方法，实例化之后就能直接调用这些方法了。
那要怎样才能返回一个实例呢，对最容易想到的就是return new jQuery();
写完有没有发现什么不对的地方，var jQuery = function(selector, context) { return new jQuery();}这个方法陷入了死循环了。然后就把方法放到原型中去

jQuery = function( selector, context ) {
    return jQuery.fn.init();
},
jQuery.fn = jQuery.prototype = {
    init: function() {
            this.name='Tom';
            return this;
    },
    anotherName:'Mike'
};
console.log(jQuery().anotherName);//"Mike"
console.log(jQuery().name);//"Tom"

这样返回实例对象是解决了，但是this原本只指向jQuery类的，这里却指向了jQuery.fn;所以需要隔离出作用域出来。故返回的是new jQuery.fn.init();

但是这个时候，jQuery并不能调用jQuery.fn上的方法了。所以才有了这一句：
jQuery.fn.init.prototype = jQuery.fn;将init的原型指向jQuery.fn,也就是用jQuery的原型对象覆盖init的原型对象，因为JQ对象根本就是init函数的实例对象，console.log(jQuery() instanceof jQuery.prototype.init); //true;这样一来，jQuery就能调用jQuery.fn上的属性和方法了。

2.为什么为了避免全局污染的时候要传入第二个参数undefined

在参数列表中给出undefined，但是不传入值，那么就确保了函数内部undefined是自身的值。在ECMAScript5之前undefined都是可写的，也就是undefined可以赋值的。jQuery作者这么做的目的还有防止程序员对undefined进行赋值后使得代码出现了不可预料的bug。

以上就是个人结合各方博客对于初识源码中难点的理解，有不对的请指出，不胜感激~

附上两篇博文的链接：
http://www.cnblogs.com/aaronjs/p/3278578.html

http://www.cnblogs.com/SheilaSun/p/4779895.html

原文:大专栏初识jQuery源码

以上是关于初识jQuery源码的主要内容，如果未能解决你的问题，请参考以下文章