JavaScript基础教程之学习过程中遇到的问题:匿名函数
程序员文章站
2024-03-11 13:50:55
...
Write By Monkeyfly
以下内容均为原创,如需转载请注明出处。
前提
今天在做项目的时候,看到别人的js文件在使用匿名函数,我也就好奇的跟着用。但是我是在没有完全理解匿名函数的基础上使用它的,只知道它是一个自执行匿名函数,可以自动执行里面的内容,可用于页面的初始化。其他的就不太清楚了,并且学的还是比较肤浅的,因此就出了问题。
问题
为什么把函数的定义写在匿名函数里面,在HTML页面中引用js文件的话,会提示该方法为not defined?但是相关的DOM操作写在匿名函数里面执行时却不受影响。
情景再现
很明显,在执行onlineCustomer()
这个方法时,并没有在引入的js文件中找到该方法的定义,所以出错了。
如图所示
报错的方式:onlineCustomer() is not defined.
分析
没办法,只好去群里请教。
//别人1:把这个方法拿出来就好了,不要放在那个匿名函数里面。
//别人1:这要从 js 的执行顺序开始说起。
//我:还是不明白。难道匿名函数中的方法,外面访问不到?
//别人1:你觉得这样能执行不。(如上图所示)
//我:匿名函数不是自执行么?
//别人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>
下一篇: MyBatis源码浅析(一)开篇