2、将jQuery.fn.init 的 prototype 属性设置为jQuery.fn，那么使用 new jQuery.fn.init() 生成的对象的原型对象就是jQuery.fn ，所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init()生成的 jQuery 对象上，所有使用new jQuery.fn.init()生成的对象也能够访问到 jQuery.fn 上的所有原型方法。

3、也就是实例化方法存在这么一个关系链
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;
new jQuery.fn.init()相当于 new jQuery() ;
jQuery()返回的是 new jQuery.fn.init()，而 var obj = new jQuery()，所以这 2 者是相当的，所以我们可以无 new 实例化 jQuery 对象。

-------来自某博客大牛的小结（看到好多博客上面都有，不清楚谁才是原创）

PS：
原本这里打算把晒上我用思维箭头图画出个整个结构之后，就基本上一句话可以带过了。但是我看到别人博客上这一段总结很好，所以就直接引用了。当然写博客的时候，我就料到直接引用可能会有点影响不好。修改一下，然后用自己语言来说，可能会效果好的多。

但是完全觉得没有必要， 好东西我觉得就应该直接拿出来分享。事实上我本来的学习jQuery源码就是吸收各种视频资源，以及各路大牛博客去学习参考。别人写的好，写的详细这就是无可厚非的。（如果有原话博客主，对我私自引用有意见。留言，我立刻删或者改。）

jQuery的链式调用

早在第一次接触jQuery的时候，就被它风骚的链式调用给吸引了，感觉操作真TMD的6到飞起。
例如：$('div').eq(0).show().end().eq(1).hide();

所以希望待会简单的谈及这个知识点之后，我不希望你们来一句：“大神，这波操作666！！”，而是高呼道：“what？这么简单！”（PS：大牛们请无视这句话，还有不懂这两句话差别的也请无视这句话！）

var oneDog = { food : function(){ console.log("今天晚餐是泡面和一个卤鸡蛋！"); return this; }, sad : function(){ console.log("坐地铁被喂了十几站的狗粮！"); return this; }, game : function(){ console.log("今天DOTA2开黑10连跪"); return this; }, } oneDog.food().sad().game(); //没错，这样就是实现了链式调用。

然后控制台就能够依次输出每个方法当中的log语句，就是这么简单每次调用返回它自己本身就可以形成一个链式调用。（来！开始喊那句话吧！）

看过前面的小demo之后，让我们回过头来看jQuery的源码是如何实现链式调用。
首先第一步，显示HTML骨架部分：

<div>我是dog1</div> <div>我是dog2</div>

接下来就是jQuery代码

console.log($(''div').eq(0))

这个时候控制台输出结果：

之后在eq(0)后面紧紧跟end()结束的时候，然后相当于整个代码返回给prevObject这个集合了：

//jQuery源码当中的end函数 end: function() { return this.prevObject || this.constructor(null); }

总的来说，

1、eq(i) 之后留下prevObject 属性，这个属性记录了操作的 jQuery 对象集合；

2、当我们在链式调用 end() 方法后，内部就返回当前 jQuery 对象的 prevObject 属性，完成回溯。

3、和前面我们返回的this的小demo，有异曲同工之妙。

小结：

今天将的知识点比较少，先是带大家回顾了prototype知识点，之后浅谈了一下jQuery的无new的构造结构，以及链式调用的原理。

两篇博客所讲的知识完全没有一些知名大牛博客一篇博客讲的知识点多，但是哪怕能讲懂一个点我也会很欣慰。有句话说的好：
不积跬步，无以至千里；不积小流，无以成江海。

原创文章，文笔有限，才疏学浅，文中若有不正之处，再次再次再次欢迎各位啪啪啪的打脸赐教。（有句话说的好，重要的词得说三遍。）

我是车大棒，我的目标是星辰与大海！

posted @