IIFE :immediately-invoked function expression
(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
分享到:
相关推荐
本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
主要介绍了JavaScript函数IIFE使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
口香糖一个Gulp插件,用于将JavaScript代码包装在立即调用的函数表达式(IIFE)中。安装$ npm install --save-dev gulp-iife用法var gulp = require ( "gulp" ) ;var iife = require ( "gulp-iife" ) ;gulp . task ...
登录 再次尝试 javascript,试图让 IIFE 工作。 它仍然让我感到困惑。
davidBowie-IIFE:封装囊封IIFE
该插件可以将ES模块的输出转换为IIFE。 安装 npm install -D rollup-plugin-iife 用法 import iife from "rollup-plugin-iife" ; export default { input : [ "entry.js" , "entry2.js" ] , output : { dir : ...
前端开源库-cjs2iifecjs2ife,commonjs模块到iffe代码
Table of Contents generated with DocTocJavaScript装逼指南IIFE(自动执行函数)JavaScript装逼指南通
目录 一、闭包(Closure) 1.1、闭包相关的问题 ...3.5、立即执行函数表达式 (IIFE) 3.5.1、匿名函数与匿名对象 3.5.2、函数与函数表达式 3.5.3、立即执行函数表达式与匿名对象 3.5.4、各种IIFE的写法 3.5.5、参数
最近,我写了一篇关于syntax of Java’s IIFE pattern的文章,来解释为什么我们用现在的方式来写立即执行函数表达式。少数的读者批评文章过时了,都在争论在ECMA 2015中介绍的块级作用域变量使IIFE变得过时了。 恰恰...
将ES模块转换为简单的IIFE。 特征 import语句解析为全局变量。 export语句作为全局变量导出。 在test/cases文件夹下还有更多示例。 用法 const { parse } = require ( "acorn" ) ; const { transform } = require...
js 逆向实战之分离式 webpack 非 IIFE 改写
IIFE(立即调用函数表达式)IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的 JavaScript 函数。示例当函数变成立即执行的函数表达式时,
babel-plugin-typescript-iife-enum目的TypeScript转换为IIFE中的包装器枚举。目的目前,TypeScript将从enum Test { Key = 1} 到var Test ;( function ( Test ) { Test [ Test [ "Key" ] = 1 ] = "Key" ;} ) ( Test ...
发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式 相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些。 自执行函数有下面的这一些...
前端开源库-gulp-iifeGulpIIfe,将JavaScript代码包装在立即调用的函数表达式中。
立即执行函数,即Immediately Invoked Function [removed]IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作: (function() { // 代码 // ... })(); function(){…}...