js 立即执行函数

Posted 2020-06-17

1、我们首先要搞明白：函数表达式和函数声明的区别。

函数表达式：既可以为匿名函数也可以有函数名，但是调用的时候都是通过函数左边的变量func来调用

var func = function(){

  alert(‘xxx‘);

};

var b = new func();

函数声明：必须有函数名

function func(){

  alert(‘xxx‘);

}

func();

所以立即执行调用的函数表达式有一下几种

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();
他们中的每一个都可以看成两部分：!function () { /* code */ }和（），其中
!function () { /* code */ }是一个函数表达式，而（）的意思就是立即执行。
######并不意味着function e(){}()就可以立即执行，并且这个写法会报错！！！！，而function e(){}(1)不会报错，但是也不是立即执行函数表达式

2、理解自执行函数和立即执行函数表达式。
自执行函数：function func(){
　　　　　　  func();
　　　　　　}
而(function(){}())叫做立即执行函数表达式

// 这是一个自执行的匿名函数，因为没有标示名称
// 必须使用arguments.callee属性来执行自己
var foo = function () { arguments.callee(); };

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

// 有些人叫这个是自执行的匿名函数（即便它不是），因为它没有调用自身，它只是立即执行而已。
(function () { /* code */ } ());

// 为函数表达式添加一个标示名称，可以方便Debug
// 但一定命名了，这个函数就不再是匿名的了
(function foo() { /* code */ } ());

// 立即调用的函数表达式（IIFE）也可以自执行，不过可能不常用罢了
(function () { arguments.callee(); } ());
(function foo() { foo(); } ());

3、用闭包保存状态

和普通function执行的时候传参数一样，自执行的函数表达式也可以这么传参，因为闭包直接可以引用传入的这些参数，利用这些被lock住的传入参数，自执行函数表达式可以有效地保存状态。

// 这个代码是错误的，因为变量i从来就没背locked住
// 相反，当循环执行以后，我们在点击的时候i才获得数值
// 因为这个时候i操真正获得值
// 所以说无论点击那个连接，最终显示的都是I am link #10（如果有10个a元素的话）

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的值作为locked的索引存在，在循环执行结束以后，尽管最后i的值变成了a元素总数（例如10）
// 但闭包内部的lockedInIndex值是没有改变，因为他已经执行完毕了
// 所以当点击连接的时候，结果是正确的

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);

}