JavaScript 之 立即执行函数
1、定义
声明一个函数,并立即调用这个函数,此时这个函数就是立即执行函数,简单来说就是定义函数之后立即执行该函数。立即执行函数一般也写成匿名函数的形式,匿名函数写法为 function(){}
,就是使用function关键字声明一个函数,但是未命名的函数。关于匿名函数有一点要注意的是:匿名函数不能单独使用,否则会报错,至少需要用 () 包裹起来。
2、作用
① 不需要为函数命名,避免污染全局变量。
② 创建一个独立作用域,这个作用域里面的变量,外部访问不到,避免变量污染。
③ 闭包和私有数据
3、使用场景
① 在页面加载完成后,需要立即执行的一些初始化设置,例如时间处理,创建对象等。
② 一些只需要执行一次的代码,代码中的某些变量在执行结束后,再也不会被用到,我们就不适合用全局变量,可能会变量污染,此时更适合用立即执行函数。
4、语法
// 立即执行函数的两种写法// 第一种:用括号把整个函数定义和括号调用包裹起来
(function(){// 函数体
}())// 第二种:用括号把函数定义包裹起来,后面再加括号调用
(function (){// 函数体
})()// 注意:之所以要用圆括号包裹,是因为在浏览器的JS引擎规定,如果function出现在行首,一律解析成语句,
// 而此时我们希望JS引擎将其理解为一个表达式,圆括号的包裹就是起这个作用的。
5、常见写法
// 普通函数形式
function foo(){console.log("Hello World!")}()//声明函数后加()会报错
(function foo(){console.log("Hello World!")}())//用括号把整个表达式包起来,正常执行
(function foo(){console.log("Hello World!")})()//用括号把函数包起来,正常执行
!function foo(){console.log("Hello World!")}()//使用!,求反,这里只想通过语法检查。
+function foo(){console.log("Hello World!")}()//使用+,正常执行,这里只想通过语法检查。
-function foo(){console.log("Hello World!")}()//使用-,正常执行,这里只想通过语法检查。
~function foo(){console.log("Hello World!")}()//使用~,正常执行,这里只想通过语法检查。
void function foo(){console.log("Hello World!")}()//使用void,正常执行,这里只想通过语法检查。
new function foo(){console.log("Hello World!")}()//使用new,正常执行,这里只想通过语法检查。// 匿名函数形式
(function(){console.log("我是匿名函数。")}())
(function(){console.log("我是匿名函数。")})()
!function(){console.log("我是匿名函数。")}()
+function(){console.log("我是匿名函数。")}()
-function(){console.log("我是匿名函数。")}()
~function(){console.log("我是匿名函数。")}()
void function(){console.log("我是匿名函数。")}()
new function(){console.log("我是匿名函数。")}()
6、参数传递
// 如果立即执行函数中需要用到外部变量,我们可以通过参数传递的方式,在函数内部使用
// 形参就是传递进来的外部变量,进入立即执行函数独立的作用域,不再受外部变量的影响(function(j){// 使用外部变量console.log(j)
})(i)
7、返回值
// 跟其他函数一样,可以返回任何类型的值
// 可通过返回值实现闭包var result = (function(){var num = 666;reutrn function() {return num;}
})()
// 由于返回值是一个函数 所以通过 () 进行调用
console.log(result())
8、常见面试题
// 1.普通流程
for(var i=0;i<3;i++) {setTimeout(function() {console.log(i)},300)// 输出结果为 3 3 3
}// 2.立即执行函数
for(var i=0;i<3;i++) {(function (j){setTimeout(function (){console.log(j)},300) // 输出结果为 0 1 2})(i)
}// 3.let 块级作用域
for(let i=0;i<3;i++) {setTimeout(function() {console.log(i)},300)// 输出结果为 0 1 2
}
第一段代码中 setTimeout 定时器属于异步操作,它是在 for 循环执行完之后,才执行的,因为 i 是var 声明的,作用域贯穿于整个函数作用域,所以当执行setTimeout时,i 已经通过for循环变成了 3 ,所以输出结果为:3 3 3。
第二段代码中使用了立即执行函数,使每次for循环都创建了一个独立作用域,并把每次循环 i 的值,传递进独立作用域,不受外界影响,所以输出结果为 :0 1 2。
第三段代码中使用了 ES6 的 let ,使每次for循环都创建了一个块级作用域,不同作用域之间不影响,所以输出结果为: 0 1 2。
JavaScript 之 立即执行函数相关推荐
- JavaScript中立即执行函数实例详解 转载 作者:李牧羊
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.这篇文章 ...
- JavaScript——(function(){})()立即执行函数解析
要理解立即执行函数(function(){})(),先了解些函数的基本概念(函数声明.函数表达式.匿名函数). 函数声明:使用function声明函数,并指定函数名. function setFn() ...
- JavaScript之立即执行函数
我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用, function fn(){console.log(1);}fn(); 打印结果为: 如果不调 ...
- JavaScript ES6立即执行函数
立即执行函数 看过jQuery源码的人应该知道,jQuery开篇用的就是立即执行函数.立即执行函数常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲 ...
- javascript 匿名自执行函数
有一种匿名函数可以自动执行,这种函数定义如下: (function(){//执行一些语句 })(); 也可以为函数添加参数,语法格式如下: (function(arg_1,arg_2,...arg_n ...
- jQuery自执行函数以及封装工具类的方法
自执行函数 javaScript的自执行函数主要用于保护内部变量不被外部声明污染,自执行函数的结构大致如下:(function(){})();其中,第一个括号使编译器编译该函数体,第二个括号另函数执行 ...
- 深入理解javascript中的立即执行函数(function(){…})()
2019独角兽企业重金招聘Python工程师标准>>> javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各 ...
- JavaScript 函数声明,函数表达式,匿名函数,立即执行函数之区别
函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
- 【JavaScript基础笔记】模块化、立即执行函数应用、闭包应用
模块化:为了提高JS代码的长期可读性,易维护性,将JS代码根据其对应的功能块区分成不同的JS文件,并将其包裹在立即执行函数内,从而使其中的变量设定为局部变量,不会造成不同模块的变量污染. 立即执行函数 ...
最新文章
- spark编程基础--5.4综合实例
- 使用Python批量删除windows下特定目录的N天前的旧文件实战:Windows下批量删除旧文件、清除缓存文件、解救C盘、拒绝C盘爆炸
- 有关nginx location规则
- 逆天的IE7中,诡异的横向滚动条
- iOS7应用开发4、Foundation框架
- Autodesk Revit DB Link 中文理解
- 云计算-My Future, The IT's Future
- EBS相关日志和参数
- Atitit code for biz lst idx项目分析法,包括模块分析,与模块位置idx数据库分析 数据表的分类 日志表不断增长(包括用户表,订单表等)。。元数据表表 基本不增长。。。
- 谷歌断网小游戏代码粗略解析
- 什么是Python解释器?
- oracle11g数据库登录01017,windows oracle11g数据库使用sqlplus登录的时候出现ora-01017报错...
- 输入地点名可以直接查询该位置的经度纬度(结合百度地图)
- windows电脑录屏消除回声
- 《深入浅出数据分析》R语言实用教程
- Elasticsearch:Hadoop 大数据集成 (Hadoop => Elasticsearch)
- 汽车车牌自动识别技术
- 计算机制造属于轻工业吗,哪些行业属于轻工业?
- Android App拉起另一个App
- [css] 页面重构“鑫三无准则” 之“无宽度”准则
热门文章
- IIS6.0部署MVC3--解决(您无权查看该网页403错误)(Server Application Unavailable)问题
- SMK用于连接电池的FPC板对板连接器
- java printstream 中文乱码_JAVA的中文字符乱码问题
- 10个提升着陆页设计效果的小技巧
- 领域驱动设计DDD和CQRS落地
- 元旦插画素材|新年伊始,恭贺崭新2021,旭日东升!
- CST微波工作室学习笔记—2.工作界面
- OpenGL glOrtho(left, right, bottom, top, near, far)
- 分治算法——乒乓球比赛日程问题
- SpringBoot整合GitLab-CI实现持续集成