一次搞定JS立即执行函数

前言


😬在我们进行平时的开发时候我们经常会使用函数,但是我们并不经常使用立即执行函数,这篇文章我们将讲解下立即执行函数的使用以及不同的写法与使用场景。

一.立即执行函数


🐔立即执行函数顾名思义就是在定义完成之后直接就执行的函数,立即执行函数的定义有两个部分。

  1. 第一部分定义了一个匿名函数()表示这个函数有自己独立的作用域。
  2. 第二部分()表示这个函数被执行了。
js 复制代码
(
  function () {
    console.log("Hello World")
  }
)()

😳立即执行函数的变量传递方式:

js 复制代码
(
  function (name) {
    console.log(name)
  }
)('约翰')

🐸立即执行函数的应用场景


  1. 实现变量私有解决命名冲突
js 复制代码
var count = 100
let sum = (
  function () {
    var count = 0
    function foo () {
      count++
      console.log(count)
    }
    return {
      foo: foo
    }
  }
)()
sum.foo() // 1
console.log(count) // 100
  1. 在原生开发中进行接口请求初始化数据
js 复制代码
(function() {
  // 初始化 AJAX 对象
  var xhr = new XMLHttpRequest();

  // 设置回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      // 处理响应数据
    }
  };

  // 发送 AJAX 请求
  xhr.open('GET', 'https://api.example.com/data', true);
  xhr.send();
})();

🐣立即执行函数的其他写法,除了上述的写法外,下列这些写法也可以进行函数的立即执行,但是不推荐。

js 复制代码
+function () {
  console.log("立即执行函数")
}()

!function() {
   console.log("立即执行函数")
}();

-function () {
  console.log("立即执行函数")
}()

~function () {
  console.log("立即执行函数")
}()
相关推荐
一枚前端小能手2 分钟前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_99992 分钟前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
用户14125016652716 分钟前
一文彻底掌握 ECharts:从配置解读到实战应用
前端
LRH18 分钟前
React 架构设计:从 stack reconciler 到 fiber reconciler 的演进
前端
VIjolie20 分钟前
文档/会议类应用的协同同步机制(OT/CRDT简要理解)
前端
不一样的少年_21 分钟前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
golang学习记22 分钟前
从0死磕全栈之Next.js 企业级 next.config.js 配置详解:打造高性能、安全、可维护的中大型项目
前端
1024小神24 分钟前
next项目使用状态管理zustand说明
前端
Asort24 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我26 分钟前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm