JavaScript中的立即执行函数

最新推荐文章于 2024-07-03 08:33:25 发布

学习&实践爱好者

最新推荐文章于 2024-07-03 08:33:25 发布

阅读量1.4k

点赞数

分类专栏： JavaScrip技术前端开发编程资料文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cnds123/article/details/122436028

版权

JavaScrip技术同时被 3 个专栏收录

132 篇文章 24 订阅

订阅专栏

编程资料

127 篇文章 7 订阅

订阅专栏

前端开发

69 篇文章 4 订阅

订阅专栏

JavaScript中的立即执行函数

立即调用函数表达式（IIFE）是一个在定义时就会立即执行的 JavaScript 函数。

关于 IIFE (Immediately Invoked Function Expression 立即调用函数表达式)可见IIFE（立即调用函数表达式） - 术语表 | MDN

在一般情况下，函数必须先调用才能执行，例如：

function fn(){

console.log("hello");

}

fn(); //调用

如果不调用的话，不会自动执行显示结果。

所谓立即执行函数，就是不需要调用，立马就能执行的函数。

立即执行函数的写法：

(function(){})()

【也可以写为 (function(){}())】

立即执行函数中后面的小括号就相当于调用函数，可以给立即执行函数传参数，将我们要传递的参数写在后面的（）里面，作为实参。例如：

(function fn(a,b){

console.log('a+b='+(a+b));

})(1,2)

或

(function fn(a,b){

console.log('a+b='+(a+b));

}(1,2))

如果有多个立即执行函数，他们之间需要逗号分隔，否则会报错。同时，在立即执行函数里面，也可以采用匿名函数的形式书写。

普通函数中的变量不能从外部访问，但普通函数内部可以访问外部的变量，在这点上，立即执行的函数和普通函数类似，立即执行的函数中的变量不能从外部访问，但立即执行函数内部可以访问外部的变量。下面给出具体示例：

在一个函数（function）中定义的变量不能从这个函数外部的任何地方访问，因为这个变量的作用域仅在这个函数的内部。

function numbers() {

var num1 = 2, num2 = 3;

return num1 + num2;

}

numbers (); //5

console.log(num1); //Uncaught ReferenceError num1 is not defined

一个函数可用使用在它所被定义的作用域中的所有变量【换句话说，当一个函数被定义在全局作用域的时候，它可以访问所有在全局作用域中定义的变量】。

var num1 = 2, num2 = 3;

function numbers() {

return num1 + num2;

}

numbers(); //5

console.log(num1); //2

立即执行函数在这点上和普通函数（function）类似

立即执行的函数中的变量不能从外部访问。

(function() {

var num1 = 2, num2 = 3;

return num1 + num2;

})(); //5

console.log(num1); // /Uncaught ReferenceError num1 is not defined

立即执行的函数可用使用在它所被定义的作用域中的所有变量。

var num1 = 2, num2 = 3;

(function() {

return num1 + num2;

})(); //5

console.log(num1); //2

下面给出一个在HTML文件中使用立即执行函数的的例子，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>立即执行函数示例</title>
<style>
           li{
               list-style: none;
          }
          button{
               width:40px;
               height: 20px;
                  
           }
</style>
</head>
<body>
<ul>
       <li><button>0</button></li>
       <li><button>1</button></li>
       <li><button>2</button></li>
       <li><button>3</button></li>
       <li><button>4</button></li>
       <li><button>5</button></li>
</ul>
你单击的是: <input type="text" id="field" readonly="true">
<script>
var liList = document.getElementsByTagName('li')
for(var i=0; i<6; i++){
     //下面是一个立即执行函数
     (function(j){
            liList[j].onclick = function(){
                document.getElementById("field").value=j; // 0、1、2、3、4、5
            }
     })(i)
}
</script>
</body>
</html>

保存文件名为：在HTML中使用立即执行函数的例子.html

运行效果：