美文网首页IT修真院-前端
什么是自执行函数?

什么是自执行函数?

作者: 中华田园柴 | 来源:发表于2017-07-28 00:37 被阅读0次

大家好,我是IT修真院武汉分院第7期的学员景鑫,一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

在详细讲解自执行函数之前,我们先来说一下这个函数在叫法上的争议。实际上不同的人对自执行函数的理解不太一样,第一种理解是,自执行即自动执行,也就是大家平时所谓的立即执行函数。

还有一种理解,即自执行函数是在函数内部执行函数本身,即我们平时常说的递归函数。不管是哪种理解,我们都没必要去纠结叫法上的准确与否,因为相比于自执行函数,立即执行函数和递归函数这两种叫法是我们更加熟悉的,实际上平时也很少会看到自执行函数这种叫法。立即执行函数和递归函数都很重要,因此今天打算对两种函数都做一下介绍。

2.知识剖析

知识点1:直接在函数后面加()就可以立即执行吗?在函数声明后面加括号为什么会报错?

知识点2:如何实现立即执行函数

知识点3:递归函数的几种用法

3.常见问题

对函数声明以及函数表达式理解不够深入

不知道立即执行函数的用法

4.解决方案

见demo

5.编码实战

5.1对于函数表达式,在后面加括号即可以让函数立即执行;例如下面这个函数,至于为什么加了括号就可以立即执行,我们可以这么理解,就是像fn1();这样写的话,函数 可以立即执行是没问题的,我们在经常会用到,那么对于函数表达式来说,fn1就是对后面的匿名函数的一个引用,因此在后面的匿名函数后直接加括号,自然也就可以立即执行

函数表达式立即执行

5.2但是对于下面这个函数,如果直接加()就会报错;如果按照上面的思路去理解,在匿名函数后面直接加上()应该是可以立即执行的,但是下面这个函数之所以会报错,而且会报两个错误,是因为js引擎在解析js代码的时候,遇到以function打头的函数会当做函数声明,然后会检查语法错误,那么第一个括号处的语法错误在于函数声明是必须要有函数名字的,而()前面没有所以报错;第二个括号处的语法错误在于函数声明到第二个花括号处,就已经算是结尾了,后面的()会被当作分组操作符,这个()实际上已经和函数声明没关系了,但是既然有了分组操作符,那就要有表达式,不然会报错;

函数声明想要立即执行,会报错

按照上面的分析,我们如果在第一个()前面加上函数名称,在第二个()里面加入表达式,那么久不会报错了,我们来看一下效果

改掉语法错误以后的函数声明

可以看到修改了那两处的问题以后,报错消失了,但是这个时候函数并没有执行,原因上面也已经提到了,就是一旦被当作函数声明,那么到花括号处就算为止了,后面的()就只当作一个分组操作符,和函数没有任何关系了

5.3那么想让这种匿名函数直接执行应该怎么办呢,其实很简单,就是在function前面加上一些操作符,这样js引擎在解析的时候就不会把它当成是函数声明了

推荐使用的方法,看起来比较具有结构性
也是一种常用的写法
两种写法也可以让函数立即执行,不过不常用

5.4以下为最简单的递归函数,即在函数内部调用函数本身。

最简单的递归函数

这种函数有个问题,就是当函数被其他变量引用,而原函数名又被设置为空对象后,递归函数就会报错

此时fun为空,但gun函数内部还会调用fun,这样就会导致报错

5.5利用argumens.callee来解决这个问题,argumens.callee指向当前的函数;

此时无论fun是否为空对象,内部调用的始终是当前的函数本身

但是这个方法在严格模式下是不可使用的,因此还不够完美

5.6利用函数表达式构造递归函数

f函数不会随着fun的改变而改变,而且在严格模式下可用

6.拓展思考

立即执行函数有哪些用处?

立即执行函数有很多用处,下面举一个例子:

在下面这个函数中,result是一个函数数组,希望达到的效果应该执行数组中的任何一个函数,得到的值都应该和该函数在数组中的索引值是一样的,但是实际情况是所有函数执行后得到的值都是10。之所以会这样是因为result数组取值的时候,是通过内部函数去返回外部变量i的值来取得的,由于内部函数会创造一个自己的作用域链,作用域链中存放的是i这个外部变量对象,这个变量对象对内部函数来说只有一个,for循环执行完成后的最后的值,即10;

闭包产生的问题

这个问题可以通过在给result数组取值外面加立即执行函数来解决,立即执行函数外面的()里面是可以传参的,下面这个用法中就是把外部变量i的值通过传参传给了num,然后把num的值又传给了result,这样最后函数数组result中每一个函数都是返回当时具体的值,即i当时的值,而不是i最后的值。

使用立即执行函数传参来解决这个问题

7.参考文献

参考一:汤姆大叔的博客之立即调用的函数表达式 

参考二:Javascript高级程序设计

8.更多讨论

函数这一部分,从执行环境、作用域链、函数声明函数表达式,到闭包、构造函数和原型链都是连在一块的,类似的函数问题大家都可以一起讨论一下

课后问题:

闭包和匿名函数的区别?

答:匿名函数上面已经见过了,类似于常用函数表达式中,function后面直接接一个(),没有函数名字,即为匿名函数;闭包是在某个函数内部的函数,由于闭包的作用域链包含有外部函数的变量对象,因此它可以访问外部函数变量,这个叫闭包

视频链接:


【武汉-第182期】什么是自执行函数?_腾讯视频

PPT链接:PPT 

相关文章

  • 什么是自执行函数?

    大家好,我是IT修真院的学员,一枚正直纯洁善良的web前端程序员 今天给大家分享一下什么是自执行函数? 1.背景介...

  • 什么是自执行函数?

    大家好,我是IT修真院武汉分院第7期的学员景鑫,一枚正直纯洁善良的WEB前端程序员。 1.背景介绍 在详细讲解自执...

  • 什么是自执行函数?

    1.背景介绍 在详细讲解自执行函数之前,我们先来说一下这个函数在叫法上的争议。实际上不同的人对自执行函数的理解不太...

  • 什么是自执行函数?

    大家好,我是IT修真院萌新分院的王寒,一枚正直,纯洁,善良的前端程序员。 1.背景介绍 在详细讲解自执行函数之前,...

  • review javascript 09:自执行匿名函数

    (1)知识点 (1.1)自执行匿名函数是什么? (2)细化 (2.1)自执行匿名函数是什么? 自执行匿名函数:常见...

  • 2018-03-26 什么是自执行函数?

    小课堂对于自执行函数的理解: 什么是自执行函数? 网上对这种类型的函数的叫法众说纷纭。 ...

  • JS自执行函数,匿名函数

    自执行函数 先来看个最简单的自执行函数 相当于声明并调用 自执行函数也可以有名字 自执行函数也可以传参 下面我们来...

  • Js

    1.自执行函数?用于什么场景?好处? 自执行函数:1、声明一个匿名函数2、马上调用这个匿名函数。作用:创建一个独立...

  • JavaScript this

    一、this是谁 作为普通函数调用/自执行,this在全局/自执行(函数名())时,this指向window,实际...

  • 自执行函数

    只有表达式才能被执行函数执行,所以会有以下几种写法

网友评论

    本文标题:什么是自执行函数?

    本文链接:https://www.haomeiwen.com/subject/vaeakxtx.html