JavaScript的IIFE(即时执行方法)

前面的话

  严格来讲,IIFE并不是闭包,因为它并不满足函数成为闭包的三个条件。但一般地,人们认为IIFE就是闭包,毕竟闭包有多个定义。本文将详细介绍IIFE的实现和用途

实现

  函数跟随一对圆括号()表示函数调用

//函数声明语句写法
function test(){};
test();

//函数表达式写法
var test = function(){};
test();

  但有时需要在定义函数之后,立即调用该函数。这种函数就叫做立即执行函数,全称为立即调用的函数表达式IIFE(Imdiately Invoked Function Expression)

  [注意]javascript引擎规定,如果function关键字出现在行首,一律解释成函数声明语句

  【1】函数声明语句需要一个函数名,由于没有函数名,所以报错

//SyntaxError: Unexpected token (
function(){}();

  【2】函数声明语句后面加上一对圆括号,只是函数声明语句与分组操作符的组合而已。由于分组操作符不能为空,所以报错

//SyntaxError: Unexpected token )
function foo(){}();

//等价于
function foo(){};
();//SyntaxError: Unexpected token )

  【3】函数声明语句加上一对有值的圆括号,也仅仅是函数声明语句与不报错的分组操作符的组合而已

function foo(){}(1);

//等价于
function foo(){};
(1);

  所以,解决方法就是不要让function出现在行首,让引擎将其理解成一个表达式

最常用的两种办法

(function(){ /* code */ }()); 
(function(){ /* code */ })(); 

其他写法

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来说,通过作用域链来查找变量与普通函数有一些不同的地方

【with】

  with语句中的IIFE会先在with语句中查找,然后再向上查找。在下列代码中,标准浏览器下f()函数和IIFE都返回'bar',但IE10-浏览器中的f()函数返回'abc'

var foo = "abc";
with({
    foo:"bar"
}){
    function f(){
        console.log(foo);
    };
    (function(){
        console.log(foo);
    })();
    f();
}

【try-catch】

  在下列代码中,标准浏览器下f()函数和IIFE都返回'error',但IE10-浏览器中的f()函数返回'10'

try{
    var e = 10;
    throw new Error();
}catch(e){
    function f(){
        console.log(e);
    }
    (function (){
        console.log(e);
    })();
    f();
}

【具名函数表达式】

  在下列代码中,标准浏览器下a()函数返回1,而IIFE返回a函数代码;但IE8-浏览器中,二者都返回1

function a(){
    a = 1;
    console.log(a);
};
a();
(function a(){
    a = 1;
    console.log(a);
})();

用途

  IIFE一般用于构造私有变量,避免全局空间污染

  接下来用一个需求实现来更直观地说明IIFE的用途。假设有一个需求,每次调用函数,都返回加1的一个数字(数字初始值为0)

【1】全局变量

  一般情况下,我们会使用全局变量来保存该数字状态

var a = 0;
function add(){
    return ++a;
}
console.log(add());//1
console.log(add());//2

【2】自定义属性

  但上面的方法中,变量a实际上只和add函数相关,却声明为全局变量,不太合适。

  将变量a更改为函数的自定义属性更为恰当

function add(){
    return ++add.count;
}
add.count = 0;
console.log(add());//1
console.log(add());//2

【3】IIFE

  其实这样做,还是有问题。有些代码可能会无意中将add.count重置

  使用IIFE把计数器变量保存为私有变量更安全,同时也可以减少对全局空间的污染

var add = (function(){
    var counter = 0;
    return function(){
        return ++counter; 
    }
})();
console.log(add())//1
console.log(add())//2    

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

写在前面

这是一篇译文,原文:Immediately-Invoked Function Expression (IIFE)

原文是一篇很经典的讲解IIFE的文章,很适合收藏。本文虽然是译文,但是直译的很少,而且添加了不少自己的理解。

ps:下文中提到的“立即执行函数”其实就是“立即执行函数表达式”

我们要说的到底是什么?

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// makeCounter函数返回的是一个新的函数,该函数对makeCounter里的局部变量i享有使用权 function makeCounter() {   // i只是makeCounter函数内的局部变量   var i = 0;     return function() {     console.log( ++i );   }; }   // 注意counter和counter2是不同的实例,它们分别拥有自己范围里的i变量   var counter = makeCounter(); counter(); // 1 counter(); // 2   var counter2 = makeCounter(); counter2(); // 1 counter2(); // 2   i; // 报错,i没有定义,它只是makeCounter内部的局部变量

很多情况下我们并不需要像以上代码一样初始化很多实例,甚至有时候并不需要返回值。

  • 问题的核心

现在我们定义了一个函数(function foo(){}或者var foo = function(){}),函数名后加上一对小括号即可完成对该函数的调用,比如下面的代码:

JavaScript

1 2

var foo = function(){ /* code */ }; foo();

接着我们来看下面的代码:

JavaScript

1

function(){ /* code */ }(); // SyntaxError: Unexpected token (

报错了,这是为何?这是因为在javascript代码解释时,当遇到function关键字时,会默认把它当做是一个函数声明,而不是函数表达式,如果没有把它显视地表达成函数表达式,就报错了,因为函数声明需要一个函数名,而上面的代码中函数没有函数名。(以上代码,也正是在执行到第一个左括号(时报错,因为(前理论上是应该有个函数名的。)

  • 一波未平一波又起

有意思的是,如果我们给它函数名,然后加上()立即调用,同样也会报错,而这次报错原因却不相同:

JavaScript

1

function foo(){ /* code */ }(); // SyntaxError: Unexpected token )

为什么会这样?在一个表达式后面加上括号,表示该表达式立即执行;而如果是在一个语句后面加上括号,该括号完全和之前的语句不搭嘎,而只是一个分组操作符,用来控制运算中的优先级(小括号里的先运算)。所以以上代码等价于:

JavaScript

1 2

function foo(){ /* code */ } (); // SyntaxError: Unexpected token )

相当于先声明了一个叫foo的函数,之后进行()内的表达式运算,但是()(分组操作符)内的表达式不能为空,所以报错。(以上代码,也就是执行到右括号时,发现表达式为空,所以报错)。

如果想要了解更多,可以参考ECMA-262-3 in detail. Chapter 5. Functions.

立即执行函数(IIFE)

看到这里,相信你一定迫不及待地想知道究竟如何做了吧,其实很简单,只需要用括号全部括起来即可,比如下面这样:

JavaScript

1

(function(){ /* code */ }());

为什么这样就能立即执行并且不报错呢?因为在javascript里,括号内部不能包含语句,当解析器对代码进行解释的时候,先碰到了(),然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。

而立即执行函数并非只有上面的一种写法,写法真是五花八门:

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 最常用的两种写法 (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 */ }() // 带参数

  • 无论何时,给立即执行函数加上括号是个好习惯

通过以上的介绍,我们大概了解通过()可以使得一个函数表达式立即执行。

有的时候,我们实际上不需要使用()使之变成一个函数表达式,啥意思?比如下面这行代码,其实不加上()也不会保错:

JavaScript

1

var i = function(){ return 10; }();

但是我们依然推荐加上():

JavaScript

1

var i = (function(){ return 10; }());

为什么?因为我们在阅读代码的时候,如果function内部代码量庞大,我们不得不滚动到最后去查看function(){}后是否带有()来确定i值是个function还是function内部的返回值。所以为了代码的可读性,请尽量加上()无论是否已经是表达式。

  • 立即执行函数与闭包的暧昧关系

立即执行函数能配合闭包保存状态。

像普通的函数传参一样,立即执行函数也能传参数。如果在函数内部再定义一个函数,而里面的那个函数能引用外部的变量和参数(闭包),利用这一点,我们能使用立即执行函数锁住变量保存状态。

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

// 并不会像你想象那样的执行,因为i的值没有被锁住 // 当我们点击链接的时候,其实for循环已经执行完了 // 于是在点击的时候i的值其实已经是elems.length了 var elems = document.getElementsByTagName( 'a' );   for ( var i = 0; i < elems.length; i++ ) {     elems[ i ].addEventListener( 'click', function(e){     e.preventDefault();     alert( 'I am link #' + i );   }, 'false' );   }   // 这次我们得到了想要的结果 // 因为在立即执行函数内部,i的值传给了lockedIndex,并且被锁在内存中 // 尽管for循环结束后i的值已经改变,但是立即执行函数内部lockedIndex的值并不会改变 var elems = document.getElementsByTagName( 'a' );   for ( var i = 0; i < elems.length; i++ ) {     (function( lockedInIndex ){       elems[ i ].addEventListener( 'click', function(e){       e.preventDefault();       alert( 'I am link #' + lockedInIndex );     }, 'false' );     })( i );   }   // 你也可以这样,但是毫无疑问上面的代码更具有可读性 var elems = document.getElementsByTagName( 'a' );   for ( var i = 0; i < elems.length; i++ ) {     elems[ i ].addEventListener( 'click', (function( lockedInIndex ){     return function(e){       e.preventDefault();       alert( 'I am link #' + lockedInIndex );     };   })( i ), 'false' );   }

其实上面代码的lockedIndex也可以换成i,因为两个i是在不同的作用域里,所以不会互相干扰,但是写成不同的名字更好解释。以上便是立即执行函数+闭包的作用。

  • 我为什么更愿意称它是“立即执行函数”而不是“自执行函数”

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 这是一个自执行函数,函数内部执行的是自己,递归调用 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好了。

  • 最后的旁白:模块模式

立即执行函数在模块化中也大有用处。用立即执行函数处理模块化可以减少全局变量造成的空间污染,构造更多的私有变量。

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// 创建一个立即执行的匿名函数 // 该函数返回一个对象,包含你要暴露的属性 // 如下代码如果不使用立即执行函数,就会多一个属性i // 如果有了属性i,我们就能调用counter.i改变i的值 // 对我们来说这种不确定的因素越少越好   var counter = (function(){   var i = 0;     return {     get: function(){       return i;     },     set: function( val ){       i = val;     },     increment: function() {       return ++i;     }   }; }());   // counter其实是一个对象   counter.get(); // 0 counter.set( 3 ); counter.increment(); // 4 counter.increment(); // 5   counter.i; // undefined i并不是counter的属性 i; // ReferenceError: i is not defined (函数内部的是局部变量)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

ES6新特性概览

前言 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言...

37311
来自专栏C/C++基础

C++11 POD类型

POD(Plain Old Data,普通旧数据)类型是从C++11开始引入的概念,Plain代表它是一个普通类型,Old代表它可以与C兼容。通俗的讲,一个类、...

822
来自专栏猿人谷

C++ 模板学习

1. 模板的概念。 我们已经学过重载(Overloading),对重载函数而言,C++的检查机制能通过函数参数的不同及所属类的不同。正确的调用重载函数。例如,为...

20110
来自专栏互联网杂技

28个JavaScript 编程黑科技:还有这种操作!

从来不需要声明一个变量的值是undefined,因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写,会被鄙视的

903
来自专栏互联网杂技

深入理解javascript原型和闭包(1)——一切都是对象

“一切都是对象”这句话的重点在于如何去理解“对象”这个概念。 ——当然,也不是所有的都是对象,值类型就不是对象。 首先咱们还是先看看javascript中一个常...

35316
来自专栏Golang语言社区

第十一节 Go语言数组

干货来了!!!为了让更多的小伙伴喜欢Golang、加入Golang之中来,Golang语言社区发起人彬哥联合业界大牛共同推出了Go语言基础、进阶、提高课程,目前...

833
来自专栏恰同学骚年

剑指Offer面试题:30.第一个只出现一次的字符

  最直观的想法是从头开始扫描这个字符串中的每个字符。当访问到某字符时拿这个字符和后面的每个字符相比较,如果在后面没有发现重复的字符,则该字符就是只出现一次的字...

522
来自专栏pangguoming

JS原型继承和类式继承

类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。类式继...

3839
来自专栏zaking's

用js来实现那些数据结构02(数组篇02-数组方法)

    上一篇文章简单的介绍了一下js的类型,以及数组的增删方法。这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么。由于...

35311
来自专栏.Net Core 开发记录

JavaScript权威指南 - 对象

JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删。 JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等...

552

扫描关注云+社区