jQuery源码学习笔记(1)

http://rolfzhang.com/articles/135.html

jQuery源码学习笔记(2) – init初始化 http://rolfzhang.com/articles/312.html

之前去网易笔试了，回来有些感慨，就是要加强JavaScript基础的学习，于是花了一个星期将《ppk on JavaScript》看完了，算是把基础巩固了不少  。

网易笔试里面考到了自运行的匿名函数，让我想起了当初在jQuery发现这种用法时的困惑，下面我就说说这东西吧。

玩过JavaScript的人应该很少有不知道jQuery的吧，一个很强大的JavaScript库，代码简洁明了，屏蔽各种浏览器兼容问题，还有各式各样强大的plugin，用起来就一个字“爽”（jQuery: The Write Less, Do More, JavaScript Library）。

不知道有多少人会去思考它的实现方式呢？我曾经好奇的去看了看它的源码（jquery-1.4.2.js），第一行就震撼了我：

1 2 3

( function ( window, undefined ) {      //jQuery源代码（此处省略6千多行） })(window);

(function(){})();

所有的代码都由这段代码包含起来，格式非常诡异，一个匿名函数被括号包含，紧接着又是一个括号，这算神马意思呢？

这东西叫“自运行的匿名函数”，要说明这个，我先说说“函数”。

1 2 3 4 5

function myfun(){      alert(‘这是一个函数’) };   alert(myfun); //把函数名作为参数输出一下，会咋样捏？

上面输出的是myfun这个函数的源代码，如下：

无论你怎么定义函数，js解释器是将这个函数当做一个Function对象，而函数名即是指向该对象的引用的一个变量，在这个变量后面加上(一对小括号)，就表示运行这个函数。

而“匿名函数”则是没有函数名的函数，即function(){}。

可以将一个匿名函数赋值给一个变量，例如：

1 2 3

var myfun = function (){      alert( '这是一个函数' ); }

这种方式是和前面一种等价的，当然我还可以同时把一个函数赋值给多个变量，例如：

1 2 3 4 5 6 7

var myfun = function (){      alert( '这是一个函数' ); } var myfun2 = myfun;   myfun(); myfun2();

此时myfun()和myfun2()输出的是一样的。

* * * * * * * * * * * * * * * * * * 我是聪明的分割线 * * * * * * * * * * * * * * * * * * *

说回“自运行的匿名函数”，其实（第一对小括号，包括其中匿名函数）是用于获取括号中表达式的值，也就是那个匿名函数对象的引用，后面紧接着的（第二对小括号，也就是‘；’前面的那对）是用于运行前面（第一对小括号）返回的Function对象。

也就是说，这个匿名函数被定义之后就自动运行了。一种替代的写法如下：

1 2 3 4

function myFun(){      //函数体 } myFun();  //运行函数

第一种写法就简洁多了。

这样的自运行匿名函数有什么好处呢？

这样主要是为了将jQuery的代码都通过匿名函数形成的闭包保护起来，是其中定义的变量都是局部变量，便不会和其他的代码产生的全局变量发生命名冲突（如果定义了和jQuery内部同名的变量），并且代码可以得到立刻的初始化。

匿名函数内的最后一句为：

1 2	// Expose jQuery to the global object window.jQuery = window.$ = jQuery;

此处将匿名函数内定义的jQuery变量赋值给了全局变量window.jQuery和window.$（此处的window是匿名函数运行时传入的参数，指向全局的window对象），所以我们就可以在自己的代码中通过‘$’ or ‘jQuery’开始美妙的jQuery之旅了。

* * * * * * * * * * * * * * * * * * 我是聪明的分割线 * * * * * * * * * * * * * * * * * * *

细心的童鞋可能又会提出问题了，上面的匿名函数不是运行完了吗，为啥里面的局部变量还能继续使用（也就是匿名函数内的所有jQuery方法依旧能够调用）？

这个又是JavaScript的一个语言特性了——闭包。

好吧，为了说明白这个问题，下面我举个恶心的例子：

1 2 3 4 5 6 7 8 9 10 11

var test= function (y){   //function1      var x=y; // 这个是局部变量      return function (){  //function2       alert(x++); // 就是这里调用了闭包特性中的       //一级函数局部变量的x，并对它进行操作       alert(y--); // 引用的参数变量也是自由变量      }}(5); // 后面这个(5)，让前面的函数运行了，abc被初始化为function2   test(); // "5" "5" function1之外（function2），能够继续调用x、y test(); // "6" "4" test(); // "7" "3"

x和y都是function1里面的局部变量，但function2所赋值的abc却能在function1之外调用x、y。

什么是闭包？闭包是指程序中的代码块允许一级函数存在（function1）并且在一级函数中所定义的自由变量(x、y)能不被释放，直到一级函数被释放前，一级函数外也能应用这些未释放的自由变量。

(这个东西还是很纠结的  ，看晕了就过段时间再来看吧)

所以呢，尽情的dollar吧(是不是敲js代码的都是财迷呀，到处是美元符号~~  )

* * * * * * * * * * * * * * * * * * 我是聪明的分割线 * * * * * * * * * * * * * * * * * * *

最后顺便说一下，那个jQuery匿名函数里面那个undefined，jQuery的匿名函数有两个参数，一个是window，一个是undefined，但是运行时只传入了一个window，这是为了保证undefined关键字的值为undefined（避免关键字undefined被不小心赋值了的情况），例如：

1 2 3 4 5

function myfun(){      alert( '这是一个函数' ); } undefined = myfun; undefined();

上面会很恶心的输出“这是一个函数”，囧~~~~

（有时还真觉得js的语法很恶心  ）

我说：总而言之，就是“$”用着很爽啦~