车大棒浅谈jQuery源码（一）

背景

由于最近辞职找工做，投了许多家公司。结果简历要么石沉大海，一点音讯都没有，要么就是邮件回复说不匹配。后面加了一些QQ群，才发现原来我工做经验年限太少了。如今深圳都是3经验起步，北京听说更加恐怖。

宅居在出租房中发愁的时候，看到群里大神说若是在简历上加上一句熟读jquery源码+vue源码，那么3年经验就再也不是一个问题，说到底仍是能力不够。

当时感受心中为之一怔，因而开始一边看源码一边作笔记，才有这个博客的开始。

老王："上网搜搜jQuery源码，一大把源码资料讲解。你这个博客不会直接是复制粘贴，源码注释流吧？那你的博客有啥看头！"

车大棒；'咳咳！！老王你又过来砸场子这样很差吧！固然今天你又砸到钢板了，做为一名前端段子手我会给读者复制粘贴看代码注释吗？'

我但是一条有梦想的咸鱼！

匿名函数

函数的建立

在了解什么是匿名函数以前，让咱们先来上一段建立函数最多见的的形式。

var Hello = function(){
    do something......
}

这种形式看起来好像是常规变量的赋值语句，即建立一个函数并将它赋值给变量Hello。这种状况下建立的函数叫作匿名函数（annoymous function），由于function关键字后面没有标识符。

那么问题来了，若是不用一个变量去接受这个匿名函数。那么如何才能调用这个匿名函数呢？

匿名函数自调用

说到匿名函数自调用，有的小伙伴可能就会尝试直接单独把function拿出来，而后再调用。

function(){console.log(1)}()        //验证猜测

那么接下来让咱们输出这行代码，看浏览器是否正常的解析这行代码。而后成功的在控制台输出数字1

结果浏览器很不给面子的解析失败，还给你报出一串红色警告字符。是否是感受很委屈，恐怕浏览器才委屈吧。由于你没有按照浏览器的规则来，浏览器固然会不给面子给你红色警告。

道理其实很简单，当js编译器开始执行的时候，遇见function以后。看到它周围没有任何东西。因而就把function关键字解析成函数声明，所以致使后面运行出错了。
原文地址：https://stackoverflow.com/questions/13341698/javascript-plus-sign-in-front-of-function-name

这个时候咱们只须要用一个括号把这个匿名函数包裹起来，避免js编译器将function关键字解析成函数声明，而后代码就可以正常执行。

匿名函数调用非主流的写法

固然除了主流经常使用的函数自调用写法，仍是有其余非主流的写法。

同理由于function前面有这些运算符，所以js编译器就把后面的匿名函数看成一个总体，没有将关键字function去解析。

可是既然是非主流的写法，就确定会存在沦为非主流写法所带来的坑。仍是前面的代码，我分开输出并在每行里面添加一个return 1.结果每一行出现的结果各不相同。

这是由于匿名函数也是一种值，这些运算符会将后面的函数体当成一个总体，先对匿名函数进行求值，而后在对结果进行运算。

因此在使用这些非主流的函数自调用写法要注意这些坑，别由于追求个（装）性（B）而致使后面出现问题就尴尬了。

jQuery：匿名自执行函数

当咱们打开jQuery源码的时候，前面提到主流的匿名函数结构一会儿呈现眼前。

(function( window, undefined ) {
    // jquery code
})(window);

为何要传入window呢？

经过传入window变量，使得window由全局变量变为局部变量，当在jQuery代码块中访问window时，不须要将做用域链回退到顶层做用域，这样能够更快的访问window；这还不是关键所在，更重要的是，将window做为参数传入，能够在压缩代码时进行优化，看看jQuery压缩代码：

(function(a,b){})(window);               // window 被优化为 a

能够被修改的undefined

众所周知undefined属于JavaScript基本数据类型中的一种类型，undefined
是全局对象的属性即它是全局范围的变量。初始值undefined是原始值。
可是在ES5规范以前，undefined是能够被定义。

undefined = "one Dog"
alert(undefined)                      // 不遵照ES5规范的浏览器就会输出one dog

原本我还在想去哪里找不遵照ES5版本的浏览器，结果就想起来IE。因而通过测试IE六、IE七、IE8所有都可以弹出"one Dog"

由于undefined可以被重写，赋予新的值。因此早期jQuery在自调用匿名函数 的做用域内，为了确保undefined是真的未定义。（早期但是IE天下）

为何jQuery采用匿名函数

采用匿名函数自执行，就能够造成一个巨大的做用域。里面拥有不少不用担忧被污染的局部变量，以后只须要开放暴露一个接口就能够了。

好吧，估计在这里有人就开始有一点头晕了。没有关系，让咱们回归到举栗子环节当中：

(function( window, undefined ) {
   var $ =  "车大棒"；
})(window);
console.log($)

如上一个匿名函数造成了一个做用域，而后$符就是其中的局部变量。这个时候若是咱们直接去拿这个$变量，console.log($)那么浏览器确定会报以下错。

那么这个时候，我就经过暴露接口，让外面能够经过接口直接访问到这个$这个变量。

(function( window, undefined ) {
   var $ =  "车大棒";
    window.$ = $;
})(window);
console.log($)

那样便可以成功访问到这个我定义的局部变量$

同理jQuery源码里面也是如此，经过window去暴露一个接口。

是否是感受，我嚓！这么简单粗暴！（额，不简单粗暴点估计大家都不肯意看了）

小结：

本节主要是对于一个匿名函数的小结，经过研究jQuery源码从而间接的帮助你们温习和回顾之前的JavaScript知识点。
原创文章，文笔有限，才疏学浅，文中如有不正之处，欢迎各位啪啪的打脸赐教。

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