JS - 立即执行函数

简介: 这篇文章解释了JavaScript中的立即执行函数(IIFE,Immediately Invoked Function Expression)的概念和用法,它用于创建局部作用域以避免全局变量的污染。文中提供了多种立即执行函数的示例,展示了如何通过不同的语法结构立即调用函数。

含义:立即执行,且执行一次,执行后销毁的函数。

作用:创建一个局部作用域,避免变量污染全局作用域。

1、如何理解`(function(i){})(i)`?

`(function(i){})`表示定义了一个匿名函数,它接受一个参数`i`,然后函数体中没有任何操作。最后的`(i)`表示立即执行这个函数,并传入一个参数`i`。

2、如何使用立即执行函数?

首先js中的函数通常有两种命名方式,分别是声明式函数和函数表达式,如下所示。

// 声明式函数
function hello() {
   }

// 函数表达式
const hello = function() {
   }

当我们的有些简单函数只执行一次的时候,我们通常会这么做。

// 声明式函数
function hello1 (name) {
   
    console.log('你好1', name);
}
hello1('龍')

// 函数表达式
const hello2 = function() {
   
    console.log('你好2');
}
hello2()

// 箭头表达式
const hello3 = () => {
   
    console.log('你好3');
}
hello3()

在这里,我们发现执行函数需要用到函数名,若我们不想定义这个函数名呢?那就需要用到立即执行函数了。

<script type="text/javascript">
  !function (name) {
   
    console.log('你好, ' + name + '!');
  }('吕布');

  ~function (name) {
   
    console.log('你好, ' + name + '!');
  }('云缨');

  +function (name) {
   
    console.log('你好, ' + name + '!');
  }('后羿');

  -function (name) {
   
    console.log('你好, ' + name + '!');
  }('王昭君');

  void function (name) {
   
    console.log('你好, ' + name + '!');
  }('亚瑟');

  (function (name) {
   
    console.log('你好, ' + name + '!');
  }('钟馗'));

  (function (name) {
   
    console.log('你好, ' + name + '!');
  })('澜');

  (
    (name) => {
   
      console.log('Hello, ' + name + '!');
    }
  )('帅龍之龍')
</script>
目录
相关文章
|
1天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
10天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
18 4
|
9天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
11 2
|
1月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
12天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
20 5
|
12天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
17 3
|
15天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
14 3
|
17天前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
22 2
|
22小时前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是由关键词 `function` 开头的代码块,用于执行特定任务。函数可以无参数或带多个参数,参数以逗号分隔。调用函数时,传入的参数值会被函数内部使用。JavaScript 对大小写敏感,函数名和调用时必须保持一致。示例展示了如何通过按钮点击调用带参数的函数,根据不同的参数显示不同的欢迎信息。
|
29天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值