匿名函数和自调用（可以创建一个独立的作用域）

匿名函数

两种写法：注意括号的位置

(function(){console.log("aaaaaaaä")})()

(function(){console.log("aaaaaaaä")}())

函数的创建

在了解什么是匿名函数之前，让我们先来上一段创建函数最常见的的形式。

  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。于是经过测试IE6、IE7、IE8全部都能够弹出"one Dog"

不遵守ES5标准的IE8就问你怕不怕

因为undefined全局环境下能够被重写，赋予新的值。所以早期jQuery在自调用匿名函数 的作用域内，为了确保undefined是真的未定义。（早期可是IE天下）

为什么jQuery采用匿名函数

采用匿名函数自执行，就可以形成一个巨大的作用域。里面拥有很多不用担心被污染的局部变量，之后只需要开放暴露一个接口就可以了。

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

赶紧记笔记

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

如上一个匿名函数形成了一个作用域，然后$符就是其中的局部变量。这个时候如果我们直接去拿这个$变量，console.log($)那么浏览器肯定会报如下错。

 

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

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

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

 

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

作者：车大棒
链接：https://www.jianshu.com/p/82cb460af066
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。