JavaScript立即执行函数与函数劫持原理及实操

唐可

发布时间：2026-10-15| 5人浏览过

原创

本文详解JavaScript中立即执行函数（IIFE）的多种写法及其隐藏作用域、避免全局污染的核心优势。同时深入解析函数劫持概念，通过call、apply和bind方法演示如何改变this指向并增强函数功能，助力掌握JS高级特性。

一、立即执行函数

立即执行函数（IIFE）是 JavaScript 中的一种常见模式，指在函数声明完成后立即被调用。这种结构常用于封装代码逻辑，使其在不污染全局命名空间的前提下运行。

第1步：基础语法实现方式

IIFE 主要通过将函数表达式包裹在括号内来实现，这样做的目的是告诉 JavaScript 引擎这是一个表达式而非语句块，从而可以立即执行。

外层包裹法：使用圆括号将整个函数定义包裹起来。
```
let _log = console.log;
console.log = function(str) {
    _log(str + '今天周五啦！');
}
```
此示例展示了如何通过重写 console.log 来扩展原有功能，这是一种典型的函数劫持操作。
双括号法：先用一对圆括号包裹函数定义，再追加一对圆括号进行调用。
```
(function test() {
    console.log('明天晴天~');
}())
```

其核心原理在于利用运算符优先级，将 function 关键字转化为函数表达式，进而允许后续的 () 执行调用。

第2步：理解 IIFE 的作用与场景

IIFE 的主要价值在于创建独立作用域。它内部的变量不会被外部访问，有效避免了与其他库或脚本的变量冲突。

避免全局污染：无需为临时使用的函数命名，减少全局对象上的属性增加。
初始化设置：适用于页面加载后需立即执行的初始化逻辑，如事件绑定或对象创建。
一次性任务：适用于仅执行一次的代码块。

此外，IIFE 还可以有返回值。你可以将返回值赋给一个变量；如果返回的是一个函数，则形成了一个闭包，可用于后续的调用或管理状态。

第3步：进阶写法：单目运算符技巧

除了常规括号，也可以使用一元运算符（如 +、-、!）放在函数前，强制将其转为表达式并立即执行。这通常用于 minify（压缩）代码时节省字符空间。

+function(){
    console.error('Hello World');
}()

该写法与 void function(){}() 异曲同工，均能达成相同效果。

二、函数劫持与 this 控制

函数劫持是指在原函数运行前介入，修改其行为或添加新功能。这在现代前端框架的钩子函数机制中非常常见。在 JavaScript 中，最直观的“劫持”手段是通过控制函数的 this 指向来实现上下文切换。

第4步：使用 call 方法劫持

call() 方法指定一个特定的 this 值并直接传入参数列表。

var obj = {
    name: 'song',
    fun: function(age, height) {
        let age = age;
        let height = height;
        console.log('姓名', this.name); // this 指向被指定的对象
        console.log('年龄', age);
        console.log('身高', height);
    }
};
var obj2 = {
    name: 'hao'
};
obj.fun.call(obj2, 22, 187); // this 指向 obj2，输出姓名为 hao

第5步：使用 apply 传递数组参数

apply() 的功能与 call 类似，但接收参数的方式不同：它以数组形式传递参数列表。

var obj = {
    name: 'song',
    fun: function(n1, n2) {
        console.log('姓名', this.name);
        console.log('年龄', n1);
        console.log('身高', n2);
    }
};
var obj2 = {
    name: 'hao'
};
obj.fun.apply(obj2, [22, '187cm']); // 参数以数组 [22, '187cm'] 传递

第6步：使用 bind 进行强制绑定

bind() 不会立即执行函数，而是返回一个新函数，并将内部的 this 永久绑定到指定对象。无论之后怎么调用这个新函数，this 都不会改变。

let obj2 = {
    name: '小王',
    age: '22',
    height: '187cm'
};
let obj = {
    name: "小锅巴",
    age: '25',
    height: '155cm',
    fun: function() {
        console.log('姓名', this.name);
        console.log('年龄', this.age);
        console.log('身高', this.height);
    }.bind(obj2) // 绑定后 this 始终指向 obj2
};
obj.fun(); // 输出姓名为 小王，而非小锅巴