Erklärung der Funktion zur sofortigen Ausführung von JS

Dieser Artikel teilt Ihnen hauptsächlich die Erklärung der sofort ausgeführten Funktion in JS mit. Die sogenannte sofort ausgeführte Funktion (Immediately-Invoked Function Expression) bedeutet, dass das Hinzufügen von () nach dem Funktionsausdruck dazu führen kann, dass die Funktion selbst ausgeführt wird. Hinweis: Sie können nach einer Funktionsdeklaration keine Klammern () hinzufügen.

(function foo(){/* code */}()); //正确，推荐这样使用
(function foo(){/* code */})(); //正确，这样可以
var foo = function foo(){/* code */}(); //正确
function foo(){/* code */}(); //SyntaxError: Unexpected token (
// 但是如果你在括弧()里传入一个表达式，将不会有异常抛出
// 但是foo函数依然不会执行
function foo(){ /* code */ }( 1 );
 
// 因为它完全等价于下面这个代码，一个function声明后面，又声明了一个毫无关系的表达式： 
function foo(){ /* code */ }
( 1 );
// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的
// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
// 不过，请注意下一章节的内容解释
var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();

// 如果你不在意返回值，或者不怕难以阅读
// 你甚至可以在function前面加一元操作符号
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率
// http://twitter.com/kuvos/status/18209252090847232
new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

Bereich

IIFE kann einen gekapselten Bereich für lokale Variablen bereitstellen, auf den in der von IIFE zurückgegebenen Funktion zugegriffen werden kann. Dieser Ansatz, , ermöglicht einer Funktion den Zugriff auf diese lokale Variable, selbst wenn die Funktion außerhalb des lexikalischen Bereichs des IIFE ausgeführt wird.

const uniqueId1 = function() {
    let count1 = 0;
    return function() {
        ++count1;
        return count1;
    };
};
uniqueId1(); //ƒ () {++count1;return count1;}

const uniqueId2 = function() {
    let count = 0;
        return count;
};
uniqueId2(); //0
uniqueId2(); //0
uniqueId2(); //0

const uniqueId3 = (function() {
    let count3 = 0;
    return function() {
        ++count3;
        return count3;
    };
})();
uniqueId3(); //1
uniqueId3(); //2
uniqueId3(); //3
uniqueId3(); //4

const uniqueId4 = function() {
    let count4 = 0;
    return (function() {
        ++count4;
        return count4;
    })();
};
uniqueId4(); //1
uniqueId4(); //1
uniqueId4(); //1
uniqueId4(); //1

Hinweis: Auf diese Zählvariable count kann außerhalb des IIFE nicht zugegriffen werden. Diese Variable kann von niemandem gelesen oder geschrieben werden, außer von Funktionen, die von IIEF zurückgegeben werden. Dadurch entsteht ein wirklich privater Zustand, der nur auf kontrollierte Weise geändert werden kann.

Der Modulmodus basiert stark auf dem IIFE-Mechanismus. Wenn Sie ein IIFE verwenden, um eine Funktion zurückzugeben, die einige lokale Variablen zum Verwalten privater Daten „einschließt“, können weder let noch const diese ersetzen.

// 创建一个立即调用的匿名函数表达式
// return一个变量，其中这个变量里包含你要暴露的东西
// 返回的这个变量将赋值给counter，而不是外面声明的function自身

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不是返回对象的属性
i; // 引用错误: i 没有定义（因为i只存在于闭包）

Abschluss und IIFE

Genau wie die Übergabe von Parametern bei der Ausführung einer normalen Funktion können auch selbstausführende Funktionsausdrücke so aussehen Durch die Übergabe von Parametern kann der selbstausführende Funktionsausdruck mithilfe dieser übergebenen gesperrten Parameter direkt auf die übergebenen Parameter verweisen und den Status effektiv speichern.

// 这个代码是错误的，因为变量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(&#39;click&#39;, function (e) {
        e.preventDefault();
        alert(&#39;I am link #&#39; + i);
    }, &#39;false&#39;);

}

// 这个是可以用的，因为他在自执行函数表达式闭包内部
// i的值作为locked的索引存在，在循环执行结束以后，尽管最后i的值变成了a元素总数（例如10）
// 但闭包内部的lockedInIndex值是没有改变，因为他已经执行完毕了
// 所以当点击连接的时候，结果是正确的

var elems = document.getElementsByTagName(&#39;a&#39;);

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener(&#39;click&#39;, function (e) {
            e.preventDefault();
            alert(&#39;I am link #&#39; + lockedInIndex);
        }, &#39;false&#39;);

    })(i);

}

// 你也可以像下面这样应用，在处理函数那里使用自执行函数表达式
// 而不是在addEventListener外部
// 但是相对来说，上面的代码更具可读性

var elems = document.getElementsByTagName(&#39;a&#39;);

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener(&#39;click&#39;, (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert(&#39;I am link #&#39; + lockedInIndex);
        };
    })(i), &#39;false&#39;);

}

Frage 1,

for (var i = 0; i < 5; i++) {
  setTimeout(function(i) {
    console.log(i);
  }, i * 1000);
}

Frage 2,

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

Frage 3,

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    return function() {
        console.log(i);
    }
  })(i), i * 1000);
}

Frage 4.

for (var i = 0; i < 5; i++) {
    setTimeout((function(i) {
        console.log(i);
    }).bind(this,i), i * 1000);
}

Empfohlene Schreibmethode:

var j = 0;
for (i = 0; i < 5; i++) {
  setTimeout(function() {
     console.log(j);
     j++;
  }, i * 1000);
}

Die Hauptfunktion der Verwendung von Funktionsausdrücken, die sofort aufgerufen/ausgeführt werden, ist: Imitieren Sie den Bereich auf Blockebene (auch privater Bereich genannt) : Vermeiden Sie das Hinzufügen zu vieler Variablen und Funktionen zum globalen Bereich. Auf diese Weise kann jeder Entwickler seine eigenen Variablen verwenden, ohne sich Sorgen machen zu müssen, dass der globale Bereich beeinträchtigt oder durcheinander gebracht wird.

IIFE-Paketierung und -Komprimierung

1. Verkürzte Parameter

IIFE kann Parametervariablennamen wie folgt aliasen:

window.$ = function somethingElse() {
    // ...
};
 
(function($) {
    // ...
})(jQuery);

为了解决命名冲突问题，可以将一段代码封装在一个IIEF中，将一个全局变量（比如，jQuery）作为参数传入IIFE。在函数内部，就可以以一个任意的参数名（比如，$）来访问该参数值。

IIFE的这种特性可以用来优化代码，这种方式使代码能够被更有效的压缩。例如：

(function(window, document, undefined) {
    // ...
})(window, document);

可以缩短函数的参数名为单个字母的标识符，更短标识符名会使文件的体积变得更小。

(function(w, d, u) {
    // ...
})(window, document);

2、括号和分号的使用

我们知道，以下两种方法都是立即执行函数的写法：

// 下面2个括弧()都会立即执行
(function () { /* code */ } ());
(function () { /* code */ })();

注意这两种写法：匿名函数上面的写法都存在前后文;问题，所以需要注意的是匿名函数在压缩工具打包压缩后会出现上下文错误合并()的问题，例如第二种写法。如果下面的代码，未压缩之前是正常的，压缩后就不正常了，所以要严格上下文的;问题，而第一种就不会出现类似问题。

var a="bbb"
(function(){
	alert(1);
})();

//var a = function(){}
var a="bbb"
(function(){
	alert(1);
}());

上述代码会报""bbb" is not a function"错误，若变量a是一函数，则会报"undefined is not a function"，这是因为a变量或a函数会把他后面的匿名函数作为参数传入a中，这就很好的解释了为什么报前面提到的错误，这也很好地解释了为什么有人习惯在匿名函数之前添加;了，就是为了防止上文没有严格遵循javascript语法，漏掉;的问题。

相关推荐：

js立即执行函数的方法

js立即执行函数实例详解

实例详解JavaScript中立即执行函数

Das obige ist der detaillierte Inhalt vonErklärung der Funktion zur sofortigen Ausführung von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!