欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-11 13:50:55
...

Write By Monkeyfly

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

前提

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

问题

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

情景再现

很明显,在执行onlineCustomer()这个方法时,并没有在引入的js文件中找到该方法的定义,所以出错了。

如图所示
JavaScript基础教程之学习过程中遇到的问题:匿名函数

JavaScript基础教程之学习过程中遇到的问题:匿名函数
报错的方式:onlineCustomer() is not defined.

分析

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

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

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

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

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

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

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

//我:明白了
//别人7: 绑定事件为啥要弄匿名函数。
//我:我看别人代码里面就是这么写的,然后我就用了。
//别人6:我拥抱着爱  当从梦中醒来。
//然后我拿出来别人写的代码,进行比对
(function(){
    getAddress();
})();
function getAddress(){
    //code...
};
//别人2:你学反了。人家函数在外面,里面调用。你呢?
//别人8:牛皮,牛批...
//别人5:你真要这么干其实也有方法做到。
//别人5:有一个恶心的办法,可以让你在匿名函数里触发这个点击事件,在匿名函数里面把function直接绑到window上就好了,不过这样写一般都会被骂死。
//我:看来我水平还差得很远。
//别人5:发来一张图。(如下图示)

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

//我:厉害了!
//别人1:发来一张图。(如下图示)

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

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

改正

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

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