前端面试之立即执行函数

Posted bzsheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试之立即执行函数相关的知识,希望对你有一定的参考价值。

什么是立即执行函数

声明一个函数,并马上调用这个匿名函数就叫做立即执行函数。在定义好一个函数后,直接执行。

(function() {alert('立即执行函数')})() 

用声明一个函数,用括号包起来,调用此函数。

立即执行函数的写法

有时候,我们定义函数以后,立即调用该函数,这时不能在函数的定义后面直接加圆括号,这会产生语法错误。产生语法错误的原因是,function这个关键字,既可以当做语句,也可以当做表达式。

//语句
function fn() {};

//表达式
var fn = function(){};

规定:如果function出现在行首,一律解析成语句。行首是function关键字时,这一段都是函数定义,不应该以圆括号结尾,所以会报错。当不让function出现在行首时,这将被理解为一个表达式,最简单的处理方式就是将其放在一个圆括号里。

(function() {
    ...
}())

(function() {
    ...
})()

以圆括号开头,这将被理解为表达式,而不是一个函数定义语句,所以就避免了错误,这就叫“立即执行函数”。
其他的写法:

(function() {alert('匿名函数')}())  //用括号将整个表达式包起来
(function() {alert('匿名函数')})()  //用括号将函数包起来
!function() {alert('匿名函数')}()   
+function() {alert('匿名函数')}()
-function() {alert('匿名函数')}()
~function() {alert('匿名函数')}()
void function() {alert('匿名函数')}()
new function() {alert('匿名函数')}()

立即执行函数的作用

1、不必为函数命名,避免了污染全局变量。

2、立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

3、封装变量。

面试题

var list = document.getElementById("list");
var li = list.children;
for(var i = 0 ;i<li.length;i++){
  li[i].onclick=function(){
    alert(i);  // 结果总是3.而不是0,1,2
    }
}

因为i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件使异步用户一定是在for运行完以后才点击,此时i已经变成3了。

解决方法:

1、使用立即执行函数,给每个li创建一个独立的作用域,在立即执行函数执行的时候,i的值从0到2,对应三个立即执行函数,所以就能正常输出了。

var list = document.getElementById("list");
    var li = list.children;
    for(var i = 0 ;i<li.length;i++){
      (function(j) {li[j].onclick=function(){
        alert(j);  // 结果是0,1,2
      }})(i)
    }

2、使用ES6的块级作用域

var list = document.getElementById("list");
var li = list.children;
for(let i = 0 ;i<li.length;i++){
  li[i].onclick=function(){
    alert(i);  // 结果总是3.而不是0,1,2
    }
}

立即执行函数的使用场景

1、代码在页面加载完成之后,不得不执行一些设置工作,比如时间处理器,创建对象等等。

2、所有的这些动作只需要执行一次,比如只需要显示一个事件。

3、将代码包裹在它的局部作用域中,不会让任何变量泄漏成全局变量。

立即执行函数的参数

(function(i) {
    ...
})(j)

如果立即执行函数中需要全局变量,全局变量会被作为一个参数传递给立即执行函数。j代表是实参,i代表的是执行函数的形参。

立即执行函数的作用

1、改变变量的作用域(创建一个独立的作用域)。

2、封装临时变量。

以上是关于前端面试之立即执行函数的主要内容,如果未能解决你的问题,请参考以下文章

剑指offer(面试战备ing,持续更新)

剑指offer(面试战备ing,持续更新)

剑指offer(面试战备ing,持续更新)

前端面试基本---this 指向(callapplybind用法及区别详解)

前端面试送命题

2021前端面试之JavaScript手写题