在同花顺中学习JS自执行函数的知识

以上高亮部分展示的是 JavaScript 的 IIFE（立即执行函数表达式） 语法

1. 先看完整结构

 

你这段代码：

!function(n){}(),function(n){}(),function(n){}(),function(r){}()

 

它本质就是 4 个独立的、立即执行的匿名函数，用逗号连在一起写了。

 

---

 

2. 核心语法：!function(){} 是什么？

这是 IIFE（Immediately Invoked Function Expression）

 

= 定义完函数，立刻自动执行

 

正常写法是：

(function(n){})();

 

而 !function(n){}() 是简写等价写法：

• ! 把函数声明强行变成表达式
• 后面加 () 就会立刻执行

作用

• 创造一个独立作用域，变量不会污染全局
• 代码一加载就自动执行
• 老版本 JS 非常常用（模块化、隔离代码）

---

 

3. 逗号 , 是什么意思？

fn1(), fn2(), fn3();

 

逗号在这里是 JavaScript 逗号运算符：

• 依次执行每个表达式
• 只返回最后一个结果
• 只是把多个 IIFE 写在一行

---

 

4. 完整拆解你的代码

!function(n){}(),  // 第1个立即执行函数
function(n){}(),   // 第2个
function(n){}(),   // 第3个
function(r){}();   // 第4个

 

它们之间互相独立，只是写在一行。

 

---

 

5. 这种写法一般用在哪？

• 老版模块化（没有 ES6 module 时）
• 压缩后的代码（webpack/rollup 打包产物）
• 避免变量污染全局作用域
• 前端库、插件常用

6.先验证：纯声明写法 必报错

// ❌ 直接报错：Uncaught SyntaxError
function(n){}()

 

原因：

1. 以 function 开头 → JS 解析为函数声明（Function Declaration）
2. 函数声明不能直接加 () 调用，语法不允许

而后面几个：xxx , function(){}()可以正常运行，关键就是逗号运算符 ,

!function(n){}(),
function(n){}(),
function(n){}(),
function(r){}()

逗号会把后面的 B 整体转为表达式

👉 这里的 function 不再是语句开头，被逗号包裹进表达式里

👉 身份变成了函数表达式，不是函数声明

👉 函数表达式 + () 立即调用，完全合法

7.总结：常见 IIFE 三种合法写法

 

都是为了把函数变成表达式：

// 1. 括号包裹（最经典）
(function(){})()

// 2. 一元运算符 ! + - ~
!function(){}()

// 3. 逗号/赋值等前置变成表达式
0, function(){}()

下面进行实例演示，如下：

// 使用 ! 强制将函数视为表达式并立即执行
// 经典模式
!function(n) {
    console.log("我是立即执行的函数！");
    console.log("传入的参数是:", n);
}(666);

// !function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(666),function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(555),function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(444)

// a = 3, function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(666)

 

// 使用 ! 强制将函数视为表达式并立即执行
// 经典模式
// !function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(666);

//一元运算符! + - ~
!function(n) {
    console.log("我是立即执行的函数！");
    console.log("传入的参数是:", n);
}(666),function(n) {
    console.log("我是立即执行的函数！");
    console.log("传入的参数是:", n);
}(555),function(n) {
    console.log("我是立即执行的函数！");
    console.log("传入的参数是:", n);
}(444)

// a = 3, function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(666)

 

// 使用 ! 强制将函数视为表达式并立即执行
// 经典模式
// !function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(666);

//一元运算符! + - ~
// !function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(666),function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(555),function(n) {
//     console.log("我是立即执行的函数！");
//     console.log("传入的参数是:", n);
// }(444)

// 赋值前置，逗号后面为表达式
a = 3, function(n) {
    console.log("我是立即执行的函数！");
    console.log("传入的参数是:", n);
}(333)