JavaScript基础教程之学习过程中遇到的问题：匿名函数

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

今天在做项目的时候，看到别人的js文件在使用匿名函数，我也就好奇的跟着用。但是我是在没有完全理解匿名函数的基础上使用它的，只知道它是一个自执行匿名函数，可以自动执行里面的内容，可用于页面的初始化。其他的就不太清楚了，并且学的还是比较肤浅的，因此就出了问题。

问题

为什么把函数的定义写在匿名函数里面，在HTML页面中引用js文件的话，会提示该方法为not defined？但是相关的DOM操作写在匿名函数里面执行时却不受影响。

情景再现

很明显，在执行

onlineCustomer()

这个方法时，并没有在引入的js文件中找到该方法的定义，所以出错了。

如图所示

报错的方式：onlineCustomer() is not defined.

分析

没办法，只好去群里请教。

//别人1：把这个方法拿出来就好了，不要放在那个匿名函数里面。
//别人1：这要从 js 的执行顺序开始说起。
//我：还是不明白。难道匿名函数中的方法，外面访问不到？

//别人1：你觉得这样能执行不。(如上图所示)
//我：匿名函数
4000
不是自执行么？
//别人2：作用域的原因。
//别人3：一语道破天机。
//别人4：执行完就被垃圾回收了。
//我：那是不是不建议写自执行匿名函数？
//别人5：建议用啊，匿名函数就是用来避免全局污染。只是你这里不适用而已。
//别人1：那我们再来看。（如下图示）

//别人1：那你觉得这样它弹出什么？
//别人6：你把函数对外暴露就能调了。
//我：自己在控制台写了一段代码测试了一下，结果（如下图示）。

//我：明白了
//别人7： 绑定事件为啥要弄匿名函数。
//我：我看别人代码里面就是这么写的，然后我就用了。
//别人6：我拥抱着爱  当从梦中醒来。

//然后我拿出来别人写的代码，进行比对
(function(){
getAddress();
})();
function getAddress(){
//code...
};

//别人2：你学反了。人家函数在外面，里面调用。你呢？
//别人8：牛皮，牛批...
//别人5：你真要这么干其实也有方法做到。
//别人5：有一个恶心的办法，可以让你在匿名函数里触发这个点击事件，在匿名函数里面把function直接绑到window上就好了，不过这样写一般都会被骂死。
//我：看来我水平还差得很远。
//别人5：发来一张图。（如下图示）

//我：厉害了！
//别人1：发来一张图。（如下图示）

//别人1：骚操作。
//别人5：这种操作被你大佬看到绝壁骂死。

改正

方法其实很简单，只需要将自定义的方法放在匿名函数的外面就可以了。

//错误写法
<script>
(function(){
//定义函数
function myFunction(){
console.log("");
};
})();
//执行函数
myFunction();
</script>

//正确写法
<script>
(function(){
//执行函数
myFunction();
})();
//定义函数
function myFunction(){
console.log("");
};
</script>