博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js - 立即执行函数
阅读量:5256 次
发布时间:2019-06-14

本文共 1666 字,大约阅读时间需要 5 分钟。

问题引入:我们写函数,就是为了使我们的代码更加模块化,然后,提高代码的重用。但是,有些函数,从定义到整个函数就运行了一遍。但是这个函数依然存在,就占用了大量的内存。那有没有一种函数,执行完了之后,就不存在了的呢?

 

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.立即执行函数好处

  1. 不必为函数命名,避免了污染全局变量
  2. 立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量
  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.立即执行函数使用场景

1、你的代码在页面加载完成之后,不得不执行一些设置工作,比如时间处理器,创建对象等等。
2、所有的这些工作只需要执行一次,比如只需要显示一个时间。
3、但是这些代码也需要一些临时的变量,但是初始化过程结束之后,就再也不会被用到,如果将这些变量作为全局变量,不是一个好的注意,我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中,不会让任何变量泄露成全局变量。看如下代码:
如果没有被包裹在立即执行函数中,那么临时变量todaydom,days,today,year,month,date,day,msg都将成为全局变量(初始化代码遗留的产物)。用立即执行函数之后,这些变量都不会在全局变量中存在,以后也不会其他地方使用,有效的避免了污染全局变量。

 

转载于:https://www.cnblogs.com/L-xmin/p/11178599.html

你可能感兴趣的文章
css3学习01
查看>>
【USACO】 奶牛会展
查看>>
ActiveMQ笔记之点对点队列(Point-to-Point)
查看>>
继承和多态
查看>>
Dijkstra+计算几何 POJ 2502 Subway
查看>>
修复IE不能执行JS的方法
查看>>
程序员究竟该如何提高效率zt
查看>>
希尔排序法(缩小增量法)
查看>>
PHP编程基础学习(一)——数据类型
查看>>
MongoDB-JAVA-Driver 3.2版本常用代码全整理(2) - 查询
查看>>
NPOI处理Word文本中上下角标
查看>>
Android笔记 Handler
查看>>
如何阅读大型前端开源项目的源码(转)
查看>>
java.util.Arrays类详解
查看>>
idea搭建tocmat
查看>>
NYOJ-626-intersection set(二分查找)
查看>>
spring配置详解-连接池配置(转载)
查看>>
堆排序算法原理
查看>>
java 跨数据库导入大数据
查看>>
项目管理之路(1):初步踏入项目管理
查看>>