js原生自调用函数原理

简介: JavaScript中的IIFE(Immediately Invoked Function Expression)是定义后立即执行的函数表达式。它有两种实现方式:匿名函数表达式 `(function() { /* 函数体 */ })()` 和命名函数声明 `(function myFunction() { /* 函数体 */ })()`。IIFE提供封闭作用域,防止变量冲突,常用于创建私有作用域、封装代码和避免变量提升问题。执行后,IIFE内部的变量和函数会被销毁,除非被特意暴露。

JavaScript中的自调用函数(Immediately Invoked Function Expression,IIFE)是一种特殊的函数表达式,它在定义后立即执行。自调用函数可以通过以下方式实现:

  1. 函数表达式:
    可以使用函数表达式的方式定义一个匿名函数,并立即调用它。这种方式使用圆括号将函数表达式包裹起来,并在后面添加一对空的圆括号()来立即调用函数。

    (function() {
         
      // 函数体
    })();
    

    在上述示例中,匿名函数被定义为(function() { /* 函数体 */ }),并通过最后的一对空的圆括号()立即调用。

  2. 函数声明与调用:
    除了函数表达式,也可以使用函数声明的方式定义一个函数,并立即调用它。需要注意的是,在函数声明后面添加一对空的圆括号()来立即调用函数。

    (function myFunction() {
         
      // 函数体
    })();
    

    在上述示例中,函数被声明为myFunction,并通过最后的一对空的圆括号()立即调用。

自调用函数的原理是将函数定义和调用结合在一起,形成一个封闭的作用域。这样可以避免函数内部的变量与外部作用域发生冲突,也可以控制函数的执行时机。

自调用函数常见的应用场景包括:

  • 创建私有作用域:通过自调用函数可以创建一个私有作用域,其中的变量和函数在函数内部是私有的,不会污染全局命名空间。
  • 封装代码:自调用函数可以用于封装一段代码,形成一个独立的模块,方便代码的组织和管理。
  • 避免变量提升问题:自调用函数可以避免因为变量提升导致的意外行为,通过将变量限定在函数内部,可以更好地控制变量的作用范围。

需要注意的是,自调用函数执行后会立即销毁,其中定义的变量和函数也会被销毁,除非在函数内部将它们暴露出来,以便外部访问。

相关文章
|
11天前
|
前端开发 JavaScript Java
JavaScript的运行原理
JavaScript 的运行原理包括代码输入、解析、编译、执行、内存管理和与浏览器交互几个步骤。当打开网页时,浏览器加载 HTML、CSS 和 JavaScript 文件,并通过 JavaScript 引擎将其解析为抽象语法树(AST)。接着,引擎将 AST 编译成字节码或机器码,并在执行阶段利用事件循环机制处理异步操作,确保单线程的 JavaScript 能够高效运行。同时,JavaScript 引擎还负责内存管理和垃圾回收,以减少内存泄漏。通过与 DOM 的交互,JavaScript 实现了动态网页效果,提供了灵活且高效的开发体验。
|
9天前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
13 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
16天前
|
存储 JavaScript 前端开发
[JS] ES Modules的运作原理
【9月更文挑战第16天】ES Modules(ECMAScript Modules)是 JavaScript 中的一种模块化开发规范,适用于浏览器和 Node.js 环境。它通过 `export` 和 `import` 关键字实现模块的导出与导入。模块定义清晰,便于维护和测试。JavaScript 引擎会在执行前进行静态分析,确保模块按需加载,并处理循环依赖。ES Modules 支持静态类型检查,现代浏览器已原生支持,还提供动态导入功能,增强了代码的灵活性和性能。这一规范显著提升了代码的组织和管理效率。
|
2月前
|
缓存 JavaScript 前端开发
[译] Vue.js 内部原理浅析
[译] Vue.js 内部原理浅析
|
2月前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
46 2
|
2月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
30 0
|
2月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
22 0
|
2月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
2月前
|
存储 JavaScript 前端开发
JavaScript——对闭包的看法,为什么要用闭包?说一下闭包原理以及应用场景
JavaScript——对闭包的看法,为什么要用闭包?说一下闭包原理以及应用场景
32 0
|
3月前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
31 0
下一篇
无影云桌面