js立即执行函数是什么？

就是指：声明一个匿名函数，而且该匿名函数会被马上调用。

js使用立即执行函数有什么作用呢？

立即执行函数会创建一个独立作用域， 该作用域的变量外部是无法访问的。立即执行函数主要是为了防止环境污染（也就是说避免变量污染）。在es6中提供了let，使用let声明的变量是块级作用域局部变量。

以一个著名的面试题为例：

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，那么怎么解决这个问题呢？用立即执行函数给每个 li 创造一个独立作用域即可（当然还有其他办法）：

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(j){
    liList[j].onclick = function(){
      alert(j) // 0、1、2、3、4、5
    }
  }(i)
}

在立即执行函数执行的时候，i 的值被赋值给 j，此后 j的值一直不变。i 的值从 0 变化到 5，对应 6 个立即执行函数，这 6 个立即执行函数里面的 j 「分别」是 0、1、2、3、4、5

js立即执行函数的写法有哪些？

1、使用()运算符方式一：

(function(val) {
  console.log(val);  //使用()运算符
})('fly63.com');

2、使用()运算符方式二：

(function(val) {
  console.log(val);  //使用()运算符
}('fly63.com'));

3、使用!运算符：  

!function(val) {
  console.log(val);  //使用!运算符
}('fly63.com');

4、使用+运算符：  

+function(val) {
  console.log(val);  //使用+运算符
}('fly63.com');

5、使用+运算符：    

-function(val) {
  console.log(val);  //使用-运算符
}('fly63.com');

6、使用=运算符：     

var fn = function(val) {
  console.log(val);  //使用=运算符
}('fly63.com');

备注：这里的fn其实打印会发现：其值是undefined哦！

7、其它方式

~function(){
    console.log('fly63.com')
}();

void function(){
    console.log('fly63.com')
}();

new function(){
    console.log('fly63.com')
}();

[ function() {
 console.log('fly63.com')
}() ];

delete function() {
  console.log('fly63.com')
}();

typeof function() {
   console.log('fly63.com')
}();


1, function() {
  console.log('fly63.com')
}();

1 ^ function() {
  console.log('fly63.com')
}();

1 > function() {
   console.log('fly63.com')
}();

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/835