js - 立即执行函数
2019-08-14 10:13:16来源:博客园 阅读 ()
问题引入:我们写函数,就是为了使我们的代码更加模块化,然后,提高代码的重用。但是,有些函数,从定义到整个函数就运行了一遍。但是这个函数依然存在,就占用了大量的内存。那有没有一种函数,执行完了之后,就不存在了的呢?
1、什么是匿名函数
声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;
立即执行函数的创建步骤,看下图:
2、立即函数形式
接下来看立即执行函数的两种常见形式:
//匿名函数包裹在一个括号运算符中,后面跟一个小括号 (function(){ //... })() ////匿名函数后面跟一个小括号,整个包裹在一个括号运算符中 (function(){ //... }())
(),!,+,-,=等运算符都能起到立即执行的作用,这些运算符的作用就是将匿名函数或函数声明转换为函数表达式。
要注意两点,一是函数体后面要有小括号(),二是函数体必须是函数表达式而不能是函数声明。
(function (test) { //使用()运算符,输出123 console.log(test); })(123); (function (test) { //使用()运算符,输出123 console.log(test); }(123)); !function (test) { //使用!运算符,输出123 console.log(test); }(123); var fn = function (test) { //使用=运算符,输出123 console.log(test); }(123);
3.立即执行函数好处
- 不必为函数命名,避免了污染全局变量
- 立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量
- 封装变量
总而言之:立即执行函数会形成一个单独的作用域,我们可以封装一些临时变量或者局部变量,避免污染全局变量。以一个面试题为例:
var liList = ul.getElementsByTagName('li') for(var i=0; i<6; i++){ liList[i].onclick = function(){ alert(i) // 为什么 alert 出来的总是 6,而不是 0、1、2、3、4、5 } }
为什么 alert 的总是 6 呢,因为 i 是贯穿整个作用域的,而不是给每个 li 分配了一个 i,如下:
划重点:用户一定是在for运行完了之后,才点击的,此时i为6
解决方案:
用立即执行函数给每个li创造一个独立作用域即可(当然还有其他办法):
var liList = ul.getElementsByTagName('li') for(var i=0; i<6; i++){ !function(ii){ liList[ii].onclick = function(){ alert(ii) // 0、1、2、3、4、5 } }(i) }
3.立即执行函数使用场景
2、所有的这些工作只需要执行一次,比如只需要显示一个时间。
3、但是这些代码也需要一些临时的变量,但是初始化过程结束之后,就再也不会被用到,如果将这些变量作为全局变量,不是一个好的注意,我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中,不会让任何变量泄露成全局变量。看如下代码:
原文链接:https://www.cnblogs.com/L-xmin/p/11178599.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:第一章 JavaScript简介
下一篇:HTML自制计算器
- JavaScript函数表达式详解及实例 2020-03-25
- 带你了解JavaScript中的函数 2020-03-08
- 详谈构造函数加括号与不加括号的区别 2020-01-17
- JavaScript匿名函数与委托使用示例 2020-01-07
- JavaScript中的apply和call函数详解 2020-01-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash