JavaScript 匿名立即自执行函数
匿名自执行函数在以后运用十分宽泛，经过它可能避免很多编程中常见成绩。
下面将经过代码实例对其停止具体引见，文本次要涵盖如下几个方面内容：
（1）.什么是匿名立即自执行函数。
（2）.匿名函数的次要运用模式。
一.匿名立即自执行函数：
匿名立即自执行函数是一种函数运用模式，可能使匿名函数创建之后立即执行。
它并不是ES中定义的一个标准术语，只是对此种运用模式的一种贴切的形容。
创建函数的模式有两种，一种是函数申明模式，一种是函数表达式模式。
本文对于函数的创建不做过多引见，详细参阅JavaScript function 函数一章节。
函数申明模式创建的函数必定是具名函数，表达式模式创建的函数可能是匿名函数，也可能是具名函数。
代码实例如下：
[JavaScript] 纯文本查看 复制代码
// 具名函数 let funcJ = function f() {} // 匿名函数 let funcN = function() {}不要想当然以为funcN是函数的称号，只是一个变量而已，变量值是一个匿名函数。
既然要执行，人造要调用匿名函数，代码实例如下：
[JavaScript] 纯文本查看 复制代码运行代码
(function(){ console.log("HELLO素材网"); })()上面代码会立即打印出字符串"HELLO素材网"，然而上述模式并引荐利用，代码修正如下：
[JavaScript] 纯文本查看 复制代码运行代码
(function(){ console.log("HELLO素材网"); }())调用匿名函数的小括号应该在小括号之内。
只管第一种写法在语法上齐全没有成绩，然而第二种写法看起来更像一个全体。
再额外引见一个知识点，标准规定，凡是function要害字出如今代码的行首，那么代码毕竟被解读为语句。
表达式前往一个值，然而语句并不能，所以如下模式调用函数是谬误的：
[JavaScript] 纯文本查看 复制代码
function func(){}()然而咱们可能先转换为一个表达式，然后再调用，代码实例如下：
[JavaScript] 纯文本查看 复制代码
(function func(){})()将函数放入小括号后，构成一个表达式，表达式可以前往一个值，也就是函数对象。
二.匿名函数次要运用模式：
（1）.避免作用域命名污染：
函数可能生成一个函数作用域，全局作用域变量和此函数作用域中的同名变量不会产生污染。
这个一点十分容易理解，看如下代码实例：
[JavaScript] 纯文本查看 复制代码运行代码
let webName="百度"; (function(){ let webName="HELLO素材网"; console.log(webName); }()) console.log(webName);代码运转效果截图如下：
再来看一个常见的运用，比如页面要引入两个文件a.js与b.js，这两个文件中，都申明了变量webName。
那么同时引入的时分，就能够会产生冲突导致成绩，比如前面的变量笼罩后面的，只需将各自文件的js代码放入匿名自执行函数即可处理此成绩，代码如下：
[JavaScript] 纯文本查看 复制代码
// a.js (function() { var webName = "HELLO素材网"; })(); // b.js (function() { var webName = "百度"; })();（2）.降职功能：
这一点能够很多冤家不是太理解，下面停止一下演示。
[JavaScript] 纯文本查看 复制代码
(function(){ // code }(window))上述代码为匿名函数传递参数window，假设匿名函数内有对window对象的引用，在肯定水平上可能降职功能。
由于不用越过函数作用域向上级作用域查找window对象，缩小了对作用域的查找操作。
（3）.保存闭包形状：
首先看一段代码实例，假设不留意能够出现意想不到的成绩，尤其会给新手带来不小的困扰。
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="" /> <title>HELLO素材网</title> <style> ul li{ width:300px; list-style-type:none; font-size:12px; line-height:30px; height:30px; cursor:pointer; } ul li span{ float:right } </style> <script> window.onload=function(){ var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); var odiv=document.getElementById("show"); for(var index=0;index<lis.length;index++){ lis[index].onclick= function(){ odiv.innerHTML=index; } } } </script> </head> <body> <ul id="box"> <li>HELLO素材网一</li> <li>HELLO素材网二</li> <li>HELLO素材网三</li> <li>HELLO素材网四</li> <li>HELLO素材网五</li> </ul> <div id="show"></div> </body> </html>上述代码的初衷是，点击li元素可能将对应元素的索引地位写入div中。
然而后果却并非如此，点击任何一个li元素，在div中显示的数字都是5，如同逻辑上没有任何成绩。
