JS-立即执行函数表达式(IIFE)

javascript函数调用

在javascript中,每一个函数在被调用的时候都会创建一个执行上下文,在该函数内部定义的变量和函数只能在该函数内部被使用,而正是因为这个上下文,使得我们在调用函数的时候能创建一些私有变量。

  • 先声明后调用
// 声明:
var foo = function(){ /* code */ };
// 调用:
foo();
  • 如果想不声明直接调用
function(){ /* code */ }();
// 报错:SyntaxError: Unexpected token (
// 执行到第一个左括号‘(‘时报错,因为函数函数应该有函数名而这里没有
  • 加上函数名再调用
function foo(){ /* code */ }();
// 报错:SyntaxError: Unexpected token )
// 执行到倒数第一个右括号‘)‘时报错
// 因为()是提高优先级的分组操作符,分组操作符内的表达式不能为空

使用立即执行函数(IIFE)

// 最常用的两种写法
(function(){ /* code */ }()); // 老道推荐写法
(function(){ /* code */ })(); // 当然这种也可以

// 括号和JS的一些操作符(如 = && || ,等)可以在函数表达式和函数声明上消除歧义
// 如下代码中,解析器已经知道一个是表达式了,于是也会把另一个默认为表达式
// 但是两者交换则会报错
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

// 如果你不怕代码晦涩难读,也可以选择一元运算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

// 你也可以这样
new function(){ /* code */ }
new function(){ /* code */ }() // 带参数

《立即执行函数》还是《自执行函数》

IIFE的称谓在现在似乎已经得到了广泛推广(不知道是不是原文作者的功劳?),而原文写于10年,似乎当时流行的称呼是自执行函数(Self-executing anonymous function),接下去作者开始为了说明立即执行函数的称呼好于自执行函数的称呼开始据理力争,有点咬文嚼字,不过也蛮有意思的,我们来看看作者说了些什么。

// 这是一个自执行函数,函数内部执行的是自己,递归调用
function foo() { foo(); }

// 这是一个自执行匿名函数,因为它没有函数名
// 所以如果要递归调用自己的话必须用arguments.callee
var foo = function() { arguments.callee(); };

// 这可能也算是个自执行匿名函数,但仅仅是foo标志引用它自身
// 如果你将foo改变成其它的,你将得到一个used-to-self-execute匿名函数
var foo = function() { foo(); };

// 有些人叫它自执行匿名函数,尽管它没有执行自己,只是立即执行而已
(function(){ /* code */ }());

// 给函数表达式添加了标志名称,可以方便debug
// 但是一旦添加了标志名称,这个函数就不再是匿名的了
(function foo(){ /* code */ }());

// 立即执行函数也可以自执行,不过不常用罢了
(function(){ arguments.callee(); }());
(function foo(){ foo(); }());

我的理解是作者认为自执行函数是函数内部调用自己(递归调用),而立即执行函数就如字面意思,该函数立即执行即可。其实现在也不用去管它了,就叫IIFE好了。

原文地址:https://www.cnblogs.com/jffun-blog/p/10211915.html

时间: 2024-10-14 00:16:38

JS-立即执行函数表达式(IIFE)的相关文章

js自执行函数表达式

// 下面2个括弧()都会立即执行 (function () { /* code */ } ()); // 推荐使用这个(function () { /* code */ })(); // 但是这个也是可以用的 和普通function执行的时候传参数一样,自执行的函数表达式也可以这么传参,因为闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态. // 这个代码是错误的,因为变量i从来就没背locked住// 相反,当循环执行以后,我们在点击的时候i

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

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

IIFE(立即执行函数表达式)

我们经常会看到这样的写法: ;(fuction () { // do something })() 这就是一个简单的IIFE(立即执行函数表达式,immediately-invoked function expression)了. 这样的写法有什么好处呢?来简单分析一下. 1. 开头的分号 我们都知道,js是可以加分号或者不加分号的,在某些情况下,不加分号会让解析器解析出错,举个例子: var a = 0 , b = 0 ; a = b + 3 (b = a) // Uncaught TypeE

创建自执行函数表达式

首先贴一段这样的代码 //正确的代码var foo=function(){ //函数内容 }; foo(); 对于这段代码大家都很熟悉,创建一个函数表达式并且立即执行.接下来,我们试着去把这段代码简化,变成一个立即执行函数表达式. //错误的代码function(){ //函数内容 }() 这段代码与上面代码的区别就是把foo省略了,直接替换成function,但是很明显这样做是不行的,js会给我们报出一个错误. 为什么这样会报错呢?其实原因很简单,函数声明以function关键字开始,同时函数

js 立即执行函数

1.我们首先要搞明白:函数表达式和函数声明的区别. 函数表达式:既可以为匿名函数也可以有函数名,但是调用的时候都是通过函数左边的变量func来调用 var func = function(){ alert('xxx'); }; var b = new func(); 函数声明:必须有函数名 function func(){ alert('xxx'); } func(); 所以立即执行调用的函数表达式有一下几种 !function () { /* code */ } ();~function ()

js立即执行函数用法

js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); 方式3.function前面加运算符,常见的是!与void !function(){alert(1);}(); void

js自执行函数

5.1对于函数表达式,在后面加括号即可以让函数立即执行:例如下面这个函数,至于为什么加了括号就可以立即执行,我们可以这么理解,就是像fn1():这样写的话,函数 可以立即执行是没问题的,我们在经常会用到,那么对于函数表达式来说,fn1就是对后面的匿名函数的一个引用,因此在后面的匿名函数后直接加括号,自然也就可以立即执行 函数表达式立即执行 5.2但是对于下面这个函数,如果直接加()就会报错:如果按照上面的思路去理解,在匿名函数后面直接加上()应该是可以立即执行的,但是下面这个函数之所以会报错,而

js立即执行函数的使用

一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); 方式3.function前面加运算符,常见的是!与void !function(){alert(1);}();  void function(){alert(2);}(); 二.立即执行函数的参数 可以给立即执行函数传递参数,例如 (function(who, when){     console.lo

js立即执行函数应用--事件绑定

js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 <titl