JavaScript基础之立即执行函数
目录
- 立即执行函数格式
- 立即执行函数其他方式–表达式
- 立即执行函数可以带参数
- 应用
- 总结
在JavaScript中有时候看到一些很神奇的函数比如下面截图：
这种函数只要浏览器加载的时候会自动运行，而需要调用，前面在闭包的时候也说过这种函数，一般将其称之为：立即执行函数。
立即函数的特征：
- 会自动执行
- 只会执行一次
立即执行函数格式
立即执行函数一般有格式如下：
# 格式一（//W3C 推荐这种写法）
(function (){
}())
#格式二 （但是这个才是最常用的方式之一）
(function (){
})();
其实上面还可以看出立即执行函数，一般都不会写函数名字，其意义不大，毕竟立即函数不必通过函数名进行调用了，这个和字面量定义函数的时候作用差不多。
现在结合闭包和立即执行函数相互结合来一个例子：
var fun=(
function(){
function test(a,b){
console.log(a+b);
}
return test;
}
)()
立即执行函数其他方式–表达式
上面的立即执行函数的格式定义，但是还有其他方式实现这个功能，比如下面这个就不是上面的格式
!function(){
console.log("test");
}()
看出其输出的两行，第一个是test，也就是有种立即执行函数的结果，而true被输出是是因为前面多了！，这个在隐式转换的时候说过，在！后面的都会强制换行布尔类型。
现在又有一个疑问了，为什么这种方式可以实现呢？
分析这种情况的产生，首先来一个表达式函数：
var test=function(){
console.log("test表达式")
}
#这样声明后，如何使用呢？如下
test();
这个时候就有一个大胆的想法了，赋值的函数，通过变量值＋（）就可以执行，那为什么不能直接写好。
var test=function(){
console.log("test表达式")
}()
这地方可以看出 表达式函数也有了一种立即执行的效果。
（补充：为什么都有undefined，因为这个函数本身就没有return 值，所以会有undefined这个值在浏览器console面板输出了undefined）
那直接在函数后面放括号可以吗？
function(){
console.log("test表达式")
}()
可以看出需要用表达式前提才可以在后面放（），不然会报错。
这个时候就有了一个大胆的想法，其实！后面方法，其实将函数转换成立表达式函数，所以后面可以＋（）可以直接运行了。那就有了大胆的想法，既然如此那直接在函数前加一个加号（+）试试。
+function(){
console.log("test表达式")
}()
既然加号可以那么：
| + | - |
|---|---|
| ！ | ~ |
当然所谓的乘号和除号是无法实现的，还有一个神奇的关键字也可以有这个神奇的效果，那就是new 和 void
new function(){
console.log("test表达式")
}()
还有一个那就是量逻辑运算符号 || 和&& 也可以实现
不过这个需要根据其特征再前面需要加真或者假才可以，单独使用是不可以的
1 && function(){
console.log("test表达式")
}()
或者
0 || function(){
console.log("test表达式")
}()
还有一个神奇的符号（逗号）也可以实现这个功能：
1,function(){
console.log("test表达式")
}()
可以看出如果使用逗号，无论前面真假都会执行后面的表达式函数。
立即执行函数可以带参数
立即执行函数也可以有参数的，具体如下
(function(a,b){
console.log(a,b)
})(1,2)
应用
这个题是很经典的面试题，首先创建下一个html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<ul id=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
<script>
var liList=document.getElementsByTagName('li');
for(var i=0;i<liList.length;i++)
{
liList[i].onclick=function(){
console.log(i);
}
};
</script>
</body>
</html>
目的是点击第几个标签li 输出几，但是结果
因为在点击li的时候for循环早已循环完毕了，这个可以用前面所学的let，关键字也可以解决
var liList=document.getElementsByTagName('li');
for(let i=0;i<liList.length;i++)
{
liList[i].οnclick=function(){
console.log(i);
}
};
这个可以解决这个问题，但是没有用到立即运行函数，当然也可以通过立即执行函数进行修改
var liList=document.getElementsByTagName('li');
for(let i=0;i<liList.length;i++)
{ (function(a){
liList[a].οnclick=function(){
console.log(a);
}
})(i)
};
可以看出立即执行函数会形成一个自己的封闭空间，其不会被外部的其他变量影响，其实这个如果再有一个return的话就是一个标准的闭包了。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
JavaScript中立即执行函数实例详解
前言 js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此. 下面话不多说了,来一起看看详细的介绍吧. 通常我们声
-
详解javascript立即执行函数表达式IIFE
一.IIFE解释 全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 像如下的代码所示,就是一个匿名立即执行函数: (function(window, undefined){ // 代码... })(window); 二.括号的意义 2.1 包住function(){}的括号的意义 这个括号的目的,是为了把function(){}转化为表达式.像一些库的源码,喜欢用如下方式代替: ~function(){ // 代码... }(); 或者这种方
-
JS立即执行的匿名函数用法分析
本文实例讲述了JS立即执行的匿名函数用法.分享给大家供大家参考,具体如下: ;(function() {})(); 1.他叫做立即运行的匿名函数(也叫立即调用函数) 2.当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!有木有很神奇哦~ 3.要使用一个函数,我们就得首先声明它的存在.而我们最常用的方式就是使用function语句来定义一个函数 4.Function 对象 Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function
-
JS立即执行函数功能与用法分析
本文实例讲述了JS立即执行函数功能与用法.分享给大家供大家参考,具体如下: 相信大家经常会遇到下面这两种写法: (function(){ ... })() 和 (function(){ ... }()) 关于这样写是什么意思呢?有什么区别呢? 在此之前,我们需要了解几个概念: 函数声明.函数表达式.匿名函数 函数声明: function fnName() {...} ; 使用 function 关键字声明一个函数,再执行一个函数名,叫函数声明. 函数表达式: var fnName = funct
-
详解JS中的立即执行函数
1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形式必须是函数表达式,不能是函数声明 function(){alert(123);}(); VM265:1 Uncaught SyntaxError: Unexpected token 3.可以在函数前面加符号,或者用括号将
-
JavaScript基础之立即执行函数
目录 立即执行函数格式 立即执行函数其他方式–表达式 立即执行函数可以带参数 应用 总结 在JavaScript中有时候看到一些很神奇的函数比如下面截图: 这种函数只要浏览器加载的时候会自动运行,而需要调用,前面在闭包的时候也说过这种函数,一般将其称之为:立即执行函数. 立即函数的特征: 会自动执行 只会执行一次 立即执行函数格式 立即执行函数一般有格式如下: # 格式一(//W3C 推荐这种写法) (function (){ }()) #格式二 (但是这个才是最常用的方式之一) (functi
-
JavaScript基础学习之splice()函数详解
目录 splice()函数详解 一.情况一(只有一个参数) 二.情况二 (两个参数) 三.情况三 (大于等于三个参数) 总结 splice()函数详解 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 参数: index —— 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置.howmany —— 必需.要删除的项目数量.如果设置为 0,则不会删除项目.item1, …, itemX —— 可选.向数组添加的新项目. 返回
-
深入理解javascript中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.
-
深入解析JavaScript中的立即执行函数
它是什么 在 JavaScript 里,每个函数,当被调用时,都会创建一个新的执行上下文.因为在函数里定义的变量和函数是唯一在内部被访问的变量,而不是在外部被访问的变量,当调用函数时,函数提供的上下文提供了一个非常简单的方法创建私有变量. function makeCounter() { var i = 0; return function(){ console.log(++i); }; } //记住:`counter`和`counter2`都有他们自己的变量 `i` var counter =
-
JavaScript中的立即执行函数表达式介绍
我们习惯看到这样的匿名函数 复制代码 代码如下: (function(){ console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function) 发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式 相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些. 自执行函数有下面的这一些例
-
JavaScript基础篇（6）之函数表达式闭包
其实js支持函数闭包的主要原因是因为js需要函数能够保存数据.这里的保存数据是只函数在运行结束以后函数内变量的值也会进行保存.至于为什么js需要在函数内可以保存数据,那就是js是一种函数式语言.在函数内保存数据是函数式语言的一大特征. 回顾前面介绍过的三种定义函数方式 functiosu(numnumreturnunum//函数声明语法定义 vasufunction(numnum)returnunum}//函数表达式定义 vasuneFunction("num""num&qu
-
javascript基础进阶_深入剖析执行环境及作用域链
执行环境 执行环境定义了变量或函数有权访问的其他函数,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象. 变量对象 环境中定义的所有变量和函数都保存在这个对象中. 全局执行环境 全局执行环境是最外围的一个执行环境.在web浏览器中,全局执行环境被认为是Window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的. 每个函数都有自己的执行环境. 作用域链 当代码在一个环境中执行,会创建变量对象的一个作用域链. 用途:保证对执行环境有权访问的所有变量和函数有序访问.
-
JavaScript基础函数整理汇总
这里给大家整理汇总了一些javascript的基础函数,都是比较常用和实用的.整理出来也有助于大家更好的理解javascript. 复制代码 代码如下: <script type="text/javascript"> /*创建函数和字面量函数*/ /* function add(){ alert("函数创建成功") }; var testfunction=functi
-
Javascript基础知识盲点总结之函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.本文重点给大家介绍js基础知识盲点总结之函数. 一.函数中的arguments对象 每个函数内部都有一个arguments,它能返回函数所接受的所有参数 注意:argumens接收的是实参 如下是利一个利用arguments特性编写的求和函数: function sumOnSteroids(){ var I, res = 0; var number_of_params = arguments.length; for(I = 0; I <