Selbstausführende Funktion in js-Funktion-js-Tutorial-php.cn

Wenn ich Code schreibe, schreibe ich oft ähnlichen Code in tpls :

$(function(){ alert("我好饿"); }); Nach dem Login kopieren Als ich anfing, ihn zu schreiben, wusste ich einfach, dass das nicht der Fall ist muss direkt aufgerufen werden, einfach so, ich habe viel Code geschrieben. Allerdings möchte ich auch über die Ladesequenz dieses Produkts sprechen. Wenn Sie den Code direkt in das Skript-Tag schreiben, wird der Code im Skript-Tag ausgeführt, wenn die Seite geladen wird. Wenn in diesem Code ein entladenes DOM verwendet oder eine entladene Methode aufgerufen wird, wird ein Fehler gemeldet. Genauer gesagt handelt es sich bei dieser Funktion tatsächlich um eine selbstausführende Funktion. Viele Leute werden sie beruflich als „unmittelbar aufgerufenen Funktionsausdruck“ bezeichnen.

Hier zitiere ich den Blog von limlimlim, der sich professioneller anfühlt ... Ursprüngliche Adresse

Wenn Sie eine Funktion wie function foo(){} oder var foo = function(){} deklarieren Manchmal , Selbstausführung kann durch Hinzufügen von Klammern erreicht werden, z. B. foo (), schauen Sie sich den Code an:

// 因为想下面第一个声明的function可以在后面加一个括弧()就可以自己执行了，比如foo()，// 因为foo仅仅是function() { /* code */ }这个表达式的一个引用 var foo = function(){ /* code */ } // ...是不是意味着后面加个括弧都可以自动执行？ function(){ /* code */ }(); // SyntaxError: Unexpected token (// Nach dem Login kopieren Der obige Code ist der zweite, wenn er überhaupt ausgeführt wird Der Code weist einen Fehler auf, da der Parser beim Parsen der globalen Funktion oder des funktionsinternen Funktionsschlüsselworts standardmäßig eine Funktionsdeklaration anstelle eines Funktionsausdrucks verwendet. Wenn Sie dies dem Compiler nicht explizit mitteilen, wird standardmäßig eine Funktion verwendet, der ein Name fehlt. und löst eine Syntaxfehlermeldung aus, da die Funktionsdeklaration einen Namen erfordert.

Das Interessante ist, dass selbst wenn Sie oben einen Namen zum falschen Code hinzufügen, ein Syntaxfehler angezeigt wird, der Grund ist jedoch ein anderer als der oben genannte. Das Hinzufügen von Klammern () nach einem Ausdruck führt den Ausdruck sofort aus, das Hinzufügen von Klammern () nach einer Anweisung hat jedoch eine völlig andere Bedeutung. Es handelt sich lediglich um einen Gruppierungsoperator.

// 下面这个function在语法上是没问题的，但是依然只是一个语句// 加上括号()以后依然会报错，因为分组操作符需要包含表达式 function foo(){ /* code */ }(); // SyntaxError: Unexpected token ) // 但是如果你在括弧()里传入一个表达式，将不会有异常抛出// 但是foo函数依然不会执行function foo(){ /* code */ }( 1 ); // 因为它完全等价于下面这个代码，一个function声明后面，又声明了一个毫无关系的表达式： function foo(){ /* code */ } ( 1 ); Nach dem Login kopieren Um das obige Problem zu lösen, müssen wir nur geschweifte Klammern verwenden, um den gesamten Code einzuschließen, da JavaScript keine Anweisungen in Klammern enthalten kann (). Wenn der Parser zu diesem Zeitpunkt das Funktionsschlüsselwort analysiert, analysiert er den entsprechenden Code in einen Funktionsausdruck und nicht in eine Funktionsdeklaration.

// 下面2个括弧()都会立即执行(function () { /* code */ } ()); // 推荐使用这个(function () { /* code */ })(); // 但是这个也是可以用的// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了// 不过，请注意下一章节的内容解释var i = function () { return 10; } ();true && function () { /* code */ } ();0, function () { /* code */ } ();// 如果你不在意返回值，或者不怕难以阅读// 你甚至可以在function前面加一元操作符号!function () { /* code */ } ();~function () { /* code */ } ();-function () { /* code */ } ();+function () { /* code */ } ();// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率// new function () { /* code */ }new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧() Nach dem Login kopieren Die oben erwähnten Klammern werden zur Eindeutigkeit verwendet. Tatsächlich sind sie überhaupt nicht notwendig, da die Klammern ursprünglich als Funktionsausdrücke erwartet wurden, wir sie aber trotzdem verwenden , Hauptsächlich dient es dazu, den Entwicklern das Lesen zu erleichtern. Wenn Sie diese automatisch ausgeführten Ausdrücke einer Variablen zuweisen, sehen wir am Anfang Klammern ((), die schnell verstanden werden können, ohne den Code bis zum Ende ziehen zu müssen, um zu sehen, was Es werden keine Klammern hinzugefügt

In diesem Beitrag haben wir es immer eine selbstausführende Funktion genannt, um genau zu sein, es ist eine selbstausführende anonyme Funktion, aber das Original Der englische Autor hat es immer als selbstausführende Funktion bezeichnet. Der Autor hat eine Reihe von Beispielen zur Erklärung gegeben:

// 这是一个自执行的函数，函数内部执行自身，递归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 */ } ());// 立即调用的函数表达式（IIFE）也可以自执行，不过可能不常用罢了(function () { arguments.callee(); } ()); (function foo() { foo(); } ());// 另外，下面的代码在黑莓5里执行会出错，因为在一个命名的函数表达式里，他的名称是undefined// 呵呵，奇怪(function foo() { foo(); } ()); Nach dem Login kopieren Ich hoffe, dass einige Beispiele hier jedem helfen können, zu verstehen, was Selbstausführung und sofortige Berufung sind (ich habe es jetzt nur ein bisschen verstanden, es lebe die Theorie)

limlimlim hat auch gesprochen Darüber unten Modulmodus , das ist eine wichtige Sache, die ich in Zukunft lernen muss. Natürlich gibt es vorher einen Abschluss (großer Kopf)

Lassen Sie mich Ihnen ein Beispiel zeigen

// 创建一个立即调用的匿名函数表达式// 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(); // 0counter.set(3); counter.increment(); // 4counter.increment(); // 5counter.i; // undefined 因为i不是返回对象的属性i; // 引用错误: i 没有定义（因为i只存在于闭包） Nach dem Login kopieren

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Selbstausführende Funktion in js-Funktion