大家好,我是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以下为最简单的递归函数,即在函数内部调用函数本身。
这种函数有个问题,就是当函数被其他变量引用,而原函数名又被设置为空对象后,递归函数就会报错
5.5利用argumens.callee来解决这个问题,argumens.callee指向当前的函数;
但是这个方法在严格模式下是不可使用的,因此还不够完美
5.6利用函数表达式构造递归函数
6.拓展思考
立即执行函数有哪些用处?
立即执行函数有很多用处,下面举一个例子:
在下面这个函数中,result是一个函数数组,希望达到的效果应该执行数组中的任何一个函数,得到的值都应该和该函数在数组中的索引值是一样的,但是实际情况是所有函数执行后得到的值都是10。之所以会这样是因为result数组取值的时候,是通过内部函数去返回外部变量i的值来取得的,由于内部函数会创造一个自己的作用域链,作用域链中存放的是i这个外部变量对象,这个变量对象对内部函数来说只有一个,for循环执行完成后的最后的值,即10;
这个问题可以通过在给result数组取值外面加立即执行函数来解决,立即执行函数外面的()里面是可以传参的,下面这个用法中就是把外部变量i的值通过传参传给了num,然后把num的值又传给了result,这样最后函数数组result中每一个函数都是返回当时具体的值,即i当时的值,而不是i最后的值。
7.参考文献
参考二:Javascript高级程序设计
8.更多讨论
函数这一部分,从执行环境、作用域链、函数声明函数表达式,到闭包、构造函数和原型链都是连在一块的,类似的函数问题大家都可以一起讨论一下
课后问题:
闭包和匿名函数的区别?
答:匿名函数上面已经见过了,类似于常用函数表达式中,function后面直接接一个(),没有函数名字,即为匿名函数;闭包是在某个函数内部的函数,由于闭包的作用域链包含有外部函数的变量对象,因此它可以访问外部函数变量,这个叫闭包
视频链接:
PPT链接:PPT