引子

最近打算试试看看jQuery的源码，刚开个头就卡住了。无论如何都理解不了jQuery源码入口部分中的

return new jQuery.fn.init( selector, context )

看了好多帖子都没看懂，觉得自己很蠢，心里很苦，吃宵夜都不香了。昨晚去游泳，游完8*100后靠在池壁上喘气，有人从我旁边出发，水花溅起的瞬间，我突然，想通了！这大概就是回光返照 （划掉）福至心灵吧！ 下面一点点地说下我对jQuery入口源码的理解。

自执行的匿名函数

jQuery源码最外层的结构如下:

任何库的引入都得做到不污染全局变量，得有自己的命名空间。上面的自执行匿名函数就可以做到这点，把所有库私有的变量和方法，都包到一个私有的空间内，允许外界访问的属性或方法可以挂载到window上。

例如下面这段代码：

内部定义的count变量以及addOne方法，外部环境下是无法访问到的，但是在window上挂载一个方法outerAddOne，指向addOne，外界就可以访问到了。

OK，了解了这个自执行匿名函数的作用，这里还有两个问题。

第一，为什么要传入window？

看了上面的outerAddOne这个例子，就会发现，不传入window也没什么嘛，照样可以把方法挂到window身上啊。 两个原因：

首先，从代码压缩混淆的角度考虑。

我们用线上工具来压缩混淆下面这段示例代码：

压完混完后瘦了一点：

看到没有，用a代替了name，但是window既不是声明的局部变量也不是参数，是不会被压缩混淆的，所以将window作为参数传入可解决这个问题。

其次，传入window参数，就可以不用沿着作用域链一层层向上查找直到顶层作用域去获取window对象了，访问更快了。

第二，为什么要传入undefined？

undefined并不是JS中的关键字，在IE8及以下中是可以对其重新赋值的。

在参数列表中给出undefined参数，但是不传入值，那么这个参数值就是undefined值了。

jQuery对象的构建

先看jQuery源码中如何对jQuery赋值的：

我就是被new jQuery.fn.init()这里弄晕了，先在这里暂停，回想一下平常我是如何使用jQuery的(\$即对应‘jQuery')：

要实现这两种调用，\$('body')应该是一个实例对象，css是每个实例共享的方法，是原型上的方法。而\$则是一个类，parseJSON则是类的静态方法。 接下来，我们试着往这个结果上靠。

如何不用new关键字得到jQuery对象？

回想一下平常我都是怎么构建实例对象的，通常我会这样写一个Prince类：

然后我会这样去获取一个Prince实例对象：

如果我年纪大了忘记用new关键字了，程序就报错了：

除了调用方法会出错之外，window还被挂载了两个变量上去，何其无辜。

但是获取jQuery对象（以下简称JQ对象）用new和不用new都可以，返回的是一样样的。

为了做到这点，我们很容易想到需要在构造函数内部返回对象。引用下我在另一篇博文JavaScript中的普通函数与构造函数里写的：

构造函数有return值怎么办？ 构造函数里没有显式调用return时，默认是返回this对象，也就是新创建的实例对象。 当构造函数里调用return时，分两种情况： 1.return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。

这种情况下，忽视return值，依然返回this对象。 2.return的是Object

这种情况下，不再返回this对象，而是返回return语句的返回值。

所以我们应该在jQuery构造函数内部去返回一个对象，这样就可以不用new的方式去创建JQ对象了，其实这时候，构造函数就相当于一个工厂函数了。 那么核心问题来了。

该返回什么样的对象？对于这个对象有何要求？

这个对象必须可以调用jQuery.prototype上的方法。

我们使用或自己写jQuery插件的时候会经常遇到\$.fn这个对象，很多插件都是通过扩展这个对象来实现的。 \$.fn其实对应着jQuery.prototype，\$和fn分别是jQuery和prototype的简写方式，只要我们把方法扩展到这个原型对象身上，通过\$()获取的JQ对象都是可以访问到方法的。 例如：

所以，工厂函数内部返回的对象一定要可以调用jQuery.prototype上的方法。

是时候看John Resig到底是怎么做的啦。

jQuery源码

在chrome里调试时候添加JQ对象的watch，会看到类似如下的结果：

看到上面这段源码，原因就很明显了，其实我们所说的JQ对象根本就是init函数的实例对象，而init则是jQuery原型上的一个对象，它本身是没有什么方法的，全靠从jQuery原型上拿。

"jQuery.fn.init.prototype = jQuery.fn"这句很重要，它将init的原型指向jQuery的原型，所以JQ对象才可以访问‘css'、'show'、'hide'这些写在jQuery.fn上的方法。

我们可能会有疑问，为何要从init这绕这么一大圈来访问jQuery的原型，而不是直接返回一个jQuery实例直接通过这个实例来访问自身原型？比如说代码可以写成这样：

问题很明显，这样做只会大家一起死，死在循环里。

好，那我接受init的存在，但是我这样写难道不可以吗？

让我们做点动作来证明加上new是有用的。

上面这段代码是为了说明this的作用域问题，其不仅能访问init函数内部，还能向上一层到fn对象。我听人家说，做框架的，作用域要独立才好呢。 给它加上new关键字：

这样this的作用域就独立出来了。

有任何不妥之处或错误欢迎各位指出，不胜感激~

题外话

经常看别人的博客，有些表述方式实在独特而有趣，每每读来都觉妙趣横生，哑然失笑。不禁心生羡慕，技术过硬，知识面广还写得一手好文章，赞！ 想起在学校时每次我们做presentation，上台第一句，“大家好，我今天讲的题目是……”，然后幻灯片一页页划过去，“历史背景”，“研究现状”，“我使用的方法”……导师都听得一脸崩溃，“nonono，不要，不要这样，你们这样讲，不会有人有耐心听下去的……我们要像说故事一样娓娓道来，抓住听众的注意力，一点点引入……”于是以后我都尽量按照“说故事”这个思路去讲，最后毕业答辩的时候，一个老师说，“为什么我觉得你像故宫导览哈哈哈哈”…… 果然还是没有掌握表述的技巧啊。

原文：
http://sheilasun.me/jqueryyuan-ma-zhong-de-new-jquery-fn-initshi-yao-yi-si/

《前端观察》专注于网站前端设计与前端开发、纯粹的前端技术分享。更多前端文章请订阅本头条号，也可以关注微信订阅号qianduanguancha（长按可复制）