当前位置：首页 > news >正文

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

news 2026/5/2 23:33:50

以上高亮部分展示的是 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){}()

原因：

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

而后面几个：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)