JavaScript的IIFE(即时执行方法)
程序员文章站
2022-05-15 07:51:12
...
IIFE :immediately-invoked function expression
(1)标准写法
(2)作用域Scope
JavaScript有function作用域,所以function首先创建一个私有的作用域,在执行的时候都会创建一个执行上下文。
调用方法一:
调用方法二:
需要注意的是需要用括号把函数内容括起来:
没有括号的话会报语法错:
也可以强制JavaScript识别代码(一般很少这么用):
比如:
(3)参数Arguments
传递参数给IIFE
undefined参数
在ECMAScript 3中undefined是mutable的,这意味着可以给undefined赋值,而在ECMASCript 5的strict模式('use strict';)下是不可以的,解析式时会报语法错。
所以为了保护IIFE的变量需要undefined参数:
即使有人给undefined赋值也没有关系:
(4)代码压缩Minifying
除undefined变量外,其他的所有希望只在函数内部有效的变量都可以通过参数传递进去,比如以下的jQuery对象。
What (function (window, document, undefined) {})(window, document); really means
(1)标准写法
(function (window, document, undefined) { // })(window, document);
(2)作用域Scope
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
(3)参数Arguments
传递参数给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);
(4)代码压缩Minifying
(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);
What (function (window, document, undefined) {})(window, document); really means