前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript立即执行函数的解释分析(4)—总结篇

JavaScript立即执行函数的解释分析(4)—总结篇

作者头像
FEWY
发布2019-05-26 21:30:00
4930
发布2019-05-26 21:30:00
举报
文章被收录于专栏:FEWYFEWY
说明

这次来对立即执行函数 Immediately-Invoked Function Expression (IIFE) ,做最后的总结,会把前面几篇提到的内容做一个整合,这样立即执行函数就算是说完了。

解释

我们回到最初,看代码

代码语言:javascript
复制
(function (){
    console.log(1);
})();

(function (){
    console.log(2);
}());

这是两种比较常见的立即执行函数的写法,这里提两点注意事项!!! 1、函数调用,需要 函数表达式 (),这样来调用,如果是 函数声明 (),就会报错。

代码语言:javascript
复制
var a=function (){
    console.log(1);
}();     //可以输出1,( )前面是函数表达式

function b(){
    console.log(2);
}
b();    //可以输出2,( )前面是函数表达式

function c(){
    console.log(3);
}();   //报错,( )前面是函数声明

2、javascript中圆括号()里面不能包含语句,所以在这一点上,解析器在解析function关键字的时候,会将相应的代码解析成函数表达式,而不是函数声明。

代码语言:javascript
复制
(function c(){
    console.log(3);
})();   //可以输出3,( )前面是函数表达式

所以我们明白了,为什么最开始的那两种立即执行函数的写法,可以起作用了,因为()把函数声明解析为了,函数表达式,而函数表达式与()一起使用,就能调用函数了,所以,我们只要把函数声明变为函数表达式,然后搭配(),就可以调用函数了,请看这些写法。

代码语言:javascript
复制
+function (){
    console.log(1);
}();

-function (){
    console.log(2);
}();

!function (){
    console.log(3);
}();

delete function (){
    console.log(4);
}();

void function (){
    console.log(5);
}();

~function (){
    console.log(6);
}();

+、-、!、delete、void、~、()等其他一些运算符,都可以将函数声明转换为函数表达式,所以立即执行函数的写法是多种多样的,但是用()的方法会更清楚一些。

作用

立即执行函数,可以避免全局变量的污染

这里写图片描述
这里写图片描述

定义一个全局变量a,第一次能打印出来,第二次也能打印出来,用立即执行函数的写法,在函数中也定义一个变量a,函数执行了,打印了a,然后再次打印 a 的时候,打印出的是全局变量的a,立即执行函数中的变量a已经没有了。(函数执行后,函数中的变量如果没有被继续引用,就会被释放),而全局变量a,还是存在的,所以,立即执行函数可以避免全局变量的污染 , 也防止产生冲突。 当函数只需要执行一次的时候,我们选择立即执行函数的方式也是很好的。

总结

立即执行函数,相信大家应该明白了,到此算是把立即执行函数说完了,如果文中有什么问题,也非常欢迎大家指正。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年06月19日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 说明
  • 解释
  • 作用
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档