JavaScript的IIFE(即时执行方法)

本文详细介绍了立即执行函数表达式(IIFE)的概念及其在JavaScript中的应用。包括标准写法、作用域、参数传递以及代码压缩等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

IIFE :immediately-invoked function expression

[b](1)标准写法[/b]
(function (window, document, undefined) {
//
})(window, document);


[b](2)作用域Scope[/b]
JavaScript有function作用域,所以function首先创建一个私有的作用域,在执行的时候都会创建一个执行上下文。
(function (window, document, undefined) {
var name = '张三';
})(window, document);
console.log(name); // 因为作用域不同,这里的name未定义。


调用方法一:
var logMyName = function (name) {
console.log(name);
};
logMyName('李四');


调用方法二:
var logMyName = (function (name) {
console.log(name);
})('王五');


需要注意的是需要用括号把函数内容括起来:
function () {
// ...
})();


没有括号的话会报语法错:
function () {
// ...
}();


也可以强制JavaScript识别代码(一般很少这么用):
!function () {
// ...
}();

+function () {
// ...
}();

-function () {
// ...
}();

~function () {
// ...
}();


比如:
var a = !function () {
return true;
}();
console.log(a); // 打印输出 false

var b = (function () {
return true;
})();
console.log(b); // 打印输出 true


[b](3)参数Arguments[/b]

传递参数给IIFE
(function (window) {
// 这里可以调用到window
})(window);

(function (window, document) {
// 这里可以调用到window和document
})(window, document);


undefined参数
在ECMAScript 3中undefined是mutable的,这意味着可以给undefined赋值,而在ECMASCript 5的strict模式('use strict';)下是不可以的,解析式时会报语法错。

所以为了保护IIFE的变量需要undefined参数:
(function (window, document, undefined) {
// ...
})(window, document);


即使有人给undefined赋值也没有关系:
undefined = true;
(function (window, document, undefined) {
// undefined指向的还是一个本地的undefined变量
})(window, document);


[b](4)代码压缩Minifying[/b]
(function (window, document, undefined) {
console.log(window); // window对象
})(window, document);

代码压缩后,undefined的参数不再存在,但是由于 (window, document); 的调用没有传递第三个参数,所有c依然是一个本地undefined变量,所有参数中undefined的名字是无所谓什么的,只需要知道他指向的是一个undefined变量。
(function (a, b, c) {
console.log(a); // window对象
})(window, document);


除undefined变量外,其他的所有希望只在函数内部有效的变量都可以通过参数传递进去,比如以下的jQuery对象。
(function ($, window, document, undefined) {
// 使用 $ 指向 jQuery,比如:
// $(document).addClass('test');
})(jQuery, window, document);

(function (a, b, c, d) {
// 代码会被压缩为:
// a(c).addClass('test');
})(jQuery, window, document);


[url=http://toddmotto.com/what-function-window-document-undefined-iife-really-means/]What (function (window, document, undefined) {})(window, document); really means[/url]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值