JavaScript基础教程之学习过程中遇到的匿名函数问题
程序员文章站
2022-07-25 19:45:11
前提
今天在做项目的时候,看到别人的js文件在使用匿名函数,我也就好奇的跟着用。但是我是在没有完全理解匿名函数的基础上使用它的,只知道它是一个自执行匿名函数,可以自动执行里面的内...
前提
今天在做项目的时候,看到别人的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>
//正确写法
下一篇: 史上最全的web前端开发程序员学习清单!