立即调用函数(IIFE)

定义:

IIFE:立即调用的函数表达式,声明函数的同时立即调用这个函数。



语法:

IIFE的常用写法:这两种写法的作用相同,只是表现形式不同而已,()只是起了自执行的作用

(function(){......})() 把函数当作表达式解析,然后执行解析后的函数[相当于 var a = function(){}; a(); a得到的是函数]

(function(){......}())是把函数表达式和执行当作语句直接执行[相当于 var a = function(){}(); a得到的是结果]

传统写法:

声明:function func(){......}

调用:func();

IIFE其他写法:

!function foo() {...}();

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



IIFE和传统写法的区别:

IIFE:是用一个()把函数声明括起来了,让js编译器知道,这是一个需要立即执行的函数;

传统:声明函数之后,只有在调用的时候才会执行函数,并且直接污染全局命名空间。

说明:所谓不去污染全局命名空间,是因为 IIFE 创建了一个新的函数作用域,你真正的业务代码被封装在其中,自然就不会触碰到全局对象了。如果你需要全局对象,那就 pass 给 IIFE:

void function (global) {

// 在这里,global 就是全局对象了

}(this)    // 在浏览器里,this 就是 window 对象



为什么要使用IIFE:

  在js中只有function才能实现作用域的隔离,如果要将一段代码中的变量、函数等的定义隔离出来,只能将这段代码封装到一个函数中。

在我们通常的理解中,将代码封装到函数中的目的是为了复用,在JS中,当然声明函数的目的在大多数情况下也是为了复用,但是JS迫于作用域控制手段的贫乏,我们也经常看到只使用一次的函数:这通常的目的是为了隔离作用域,既然只使用一次,那么立即执行好了,既然只使用一次,函数的名字也省掉了,这就是IIFE的由来。

原文地址:https://www.cnblogs.com/zhaoxinmei-123/p/8908428.html

时间: 2024-10-11 06:36:28

立即调用函数(IIFE)的相关文章

js 立即调用函数 IIFE(Immediately Invoked Function Expression) 【转】

原文链接:https://www.cnblogs.com/ming-os9/p/8891300.html 1 (function(){...})() 3 (function(){...}()) 这是两种js立即执行函数的常见写法. 基本概念: 函数声明:function fname(){...}; 使用function关键字声明一个函数,再指定一个函数名. 函数表达式:var fname=function(){...}; 使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予

理解JavaScript的立即调用函数表达式(IIFE)

首先这是js的一种函数调用写法,叫立即执行函数表达式(IIFE,即immediately-invoked function expression).顾名思义IIFE可以让你的函数立即得到执行(废话). 一般来说,IIFE有以下几种用途: 1. 创建只使用一次的函数,并立即执行它. 2. 创建闭包,保存状态,隔离作用域. 3. 作为独立模块存在(例子如jQuery),防止命名冲突,命名空间注入(模块解耦). 1. 创建只使用一次的函数,并立即执行它 创建只使用一次的函数比较好理解,在需要调用函数的

立即执行函数(IIFE)的理解与运用

作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从基础讲起,要创建一个JS函数,有两种方式. (一)函数定义(Function Declaration) function Identifier ( Parameters ){ FunctionBody } 函数定义中,参数(Parameters)标识符(Identifier )是必不可少的.如果遗漏

【javaScript基础】立即调用函数表达式

在javaScript中,每个函数被调用时,都会创建一个新的执行上下文.因为在一个函数里面定义的变量和函数只能在里面访问,在外面是不行的,上下文提供了一种很容易的方法来创建私有性. //makeCounter函数返回另外一个匿名函数,这个匿名函数能够访问到"私有"变量i, 好像有一点"特权"性. function makeCounter() { // i只能在makeCounter的里面被访问到 var i = 0; return function() { cons

Javascript 自动执行函数(立即调用函数)

开头:各种原因总结一下javascript中的自动执行函数(立即调用函数)的一些方法,正文如下 在Javascript中,任何function在执行的时候都会创建一个执行上下文,因为function声明变量和function有可能只在该function内部,这个上下文,在调用function的时候,提供一些简单的方式来创建自由变量或私有子function. eg: // 由于该function里返回了另外一个function,其中这个function可以访问自由变量i // 所有说,这个内部的f

【javaScript基础】马上调用函数表达式

在javaScript中,每一个函数被调用时,都会创建一个新的运行上下文.由于在一个函数里面定义的变量和函数仅仅能在里面訪问.在外面是不行的.上下文提供了一种非常easy的方法来创建私有性. //makeCounter函数返回另外一个匿名函数,这个匿名函数可以訪问到"私有"变量i, 好像有一点"特权"性. function makeCounter() { // i仅仅能在makeCounter的里面被訪问到 var i = 0; return function()

函数声明、 函数表达式 与立即调用函数表达式的比较

函数声明 函数声明创建将来代码调用的函数.函数可以在声明之前的位置被调用.代码样例如下: //可以在声明之前的位置被调用 var size=area(3,6); function area(width,height){ return width*height; }; //可以在声明之后的位置被调用 var size2=area(2,4); 函数表达式   将函数放在本该表达式待的位置,这称为函数表达式.在函数表达式中,经常使用匿名函数.代码样例如下 var area=function(width

JavaScript的函数IIFE

javaScritp的函数(IIFE) 一.认识函数 javaScritp中的的函数 // 函数声明语法定义 function fun1(name, age) { console.log(name + ',' + age); } fun1('Amy', 18); //Amy,18 // 函数表达式定义 var fun2 = function(name, age) { console.log(name + ',' + age); } fun1('Amy', 18); //Amy,18 javaSc

调用函数时传递的实参个数arguments.length; ,函数定义时的形参个数sum.length

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>范例6-4</title>

javascript学习笔记(二):定义函数、调用函数、参数、返回值、局部和全局变量

定义函数.调用函数.参数.返回值 关键字function定义函数,格式如下: function 函数名(){ 函数体 } 调用函数.参数.返回值的规则和c语言规则类似. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body