【Web APIs】元素可视区 client 系列属性 ② ( 立即执行函数 )

文章目录

一、立即执行函数
- [1、立即执行函数简介](#1、立即执行函数简介)
- [2、立即执行函数语法](#2、立即执行函数语法)
- [3、立即执行函数与普通函数对比](#3、立即执行函数与普通函数对比)
二、代码示例
- [1、代码示例 - 普通函数](#1、代码示例 - 普通函数)
- [2、代码示例 - 立即执行函数两种写法](#2、代码示例 - 立即执行函数两种写法)

一、立即执行函数

1、立即执行函数简介

立即执行函数 ( Immediately Invoked Function Expression , 简称 IIFE ) 是定义后立刻执行的 JavaScript 函数 , 它的核心特点是 " 定义即执行 " , 且能创建一个独立的私有作用域 ;

立即执行函数 ( IIFE , Immediately Invoked Function Expression ) 定义完成后不会等待手动调用 , 会立刻执行 , 且内部变量不会泄露到全局 , 不会等到后面调用后再执行 ;

立即执行函数核心价值是隔离作用域 , 避免变量污染全局命名空间 ( ES6 前没有块级作用域时 , 这是解决 var 全局污染的关键方案 ) , 也常用于封装模块的私有逻辑 ;

2、立即执行函数语法

立即执行函数 ( IIFE , Immediately Invoked Function Expression ) 核心是把 " 函数表达式 " 用括号包裹 ( 让解析器识别为表达式而非声明 ) , 再加上执行括号 () ;

写法一 : 标准写法 , 函数表达式包裹 + 执行括号 , 推荐使用该方法 ;

javascript 复制代码

// 标准写法：函数表达式包裹 + 执行括号
(function() {
  // 函数体
  console.log("我是立即执行函数 , 马上执行！");
})();

写法二 : 将完整的 " 函数表达式 + 执行括号 " 写在 () 中 , 比较少用 ;

javascript 复制代码

(function() {
  console.log("我也是立即执行函数！");
}());

3、立即执行函数与普通函数对比

对比维度	普通函数	立即执行函数 ( IIFE )
执行时机	定义后不会自动执行 , 需手动调用	定义完成后立刻执行 , 无需手动调用
调用方式	函数名 () / 变量名 () 手动触发	定义时自带执行括号 `()` , 自动触发
作用域暴露	函数名 / 变量名会暴露到全局 / 外层作用域	无任何标识符暴露到全局 , 完全隔离
复用性	可多次调用 , 复用性高	仅执行一次 , 无复用性
命名要求	可命名 / 匿名 ( 匿名需赋值给变量 )	通常匿名 ( 命名无意义 , 执行后销毁 )
典型用途	通用逻辑、需多次执行的功能	一次性初始化、隔离变量、封装模块

二、代码示例

1、代码示例 - 普通函数

普通函数定义后 , function normalFunc() {} , 必须手动调用 normalFunc() 才能执行 , 不调用则无输出 , 调用后才执行 ;

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立即执行函数示例</title>
    <script>
        // 定义普通函数
        function normalFunc() {
            console.log("我是普通函数 , 需要手动调用才执行");
        }

        // 不调用则无输出 , 调用后才执行
        normalFunc(); // 手动调用  ->  输出：我是普通函数 , 需要手动调用才执行
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、代码示例 - 立即执行函数两种写法