Wat is de (functie () {}) () Construct in JavaScript?

Ik wist altijd wat dit betekende, maar ik worstel nu …

Is dit in principe zeggen document.onload?

(function () {
})();

1, Autoriteit 100%

Het is een onmiddellijk ingezette functie-expressie , of iife voor kort. Het voert onmiddellijk na het gecreëerd.

Het heeft niets te maken met elke gebeurtenis-handler voor evenementen (zoals document.onload).
Overweeg het deel in het eerste paar haakjes: (function(){})();…. Het is een reguliere functie-expressie. Kijk vervolgens naar het laatste paar (function(){})();, dit wordt normaal gesproken toegevoegd aan een uitdrukking om een ​​functie te bellen; in dit geval, onze eerdere expressie.

Dit patroon wordt vaak gebruikt bij het vermijden van vervuiling van de Global Namespace, omdat alle variabelen die in de iife worden gebruikt (zoals in een andere Normaal -functie) niet zichtbaar zijn buiten de reikwijdte.
Daarom verwarde je deze constructie met een gebeurtenis-handler voor window.onload, omdat het vaak wordt gebruikt als dit:

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

correctie voorgesteld door guiffa :

De functie wordt direct uitgevoerd nadat het is gemaakt, niet nadat het is geparseerd. Het gehele scriptblok wordt geparseerd voordat een code erin wordt uitgevoerd. Ook betekent het parserencode niet automatisch dat het wordt uitgevoerd, indien bijvoorbeeld de iife in een functie zit, dan wordt het niet uitgevoerd totdat de functie wordt genoemd.

update
Aangezien dit een vrij populair onderwerp is, is het de moeite waard om te vermelden dat ik ook kunnen worden geschreven met ES6’s pijl-functie (zoals Gajus heeft aangegeven in een opmerking ):

((foo) => {
 // do something with foo here foo
})('foo value')

2, Autoriteit 13%

Het is slechts een anonieme functie die direct is uitgevoerd nadat deze is gemaakt.

Het is net alsof je het hebt toegewezen aan een variabele en gebruikt het direct na, alleen zonder de variabele:

var f = function () {
};
f();

In jQuery is er een soortgelijke constructie die je misschien aan denkt:

$(function(){
});

Dat is de korte vorm van binding van de readyevenement:

$(document).ready(function(){
});

Maar de bovenstaande twee constructen zijn niet iife s.

3, Autoriteit 7%

Een onmiddellijk ingeroepen functie-expressie (iife) roept onmiddellijk een functie. Dit betekent gewoon dat de functie onmiddellijk wordt uitgevoerd na de voltooiing van de definitie.

Drie veelere beoordelingen:

// Crockford's preference - parens on the inside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
}());
//The OPs example, parentheses on the outside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();
//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
  console.log('Welcome to the Internet. Please follow me.');
}();

Als er geen speciale vereisten zijn voor de retourwaarde, kunnen we schrijven:

!function(){}();  // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}();  // => NaN

Als alternatief kan het zijn:

~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();

U kunt zelfs schrijven:

new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required

4, Autoriteit 3%

Het verklaart een anonieme functie, noemt het vervolgens:

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);

5, Autoriteit 3%

Dat zegt onmiddellijk uitvoeren.

Dus als ik het doe:

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();
alert(val(10)); //10
alert(val(11)); //21

Fiddle: http://jsfiddle.net/maniator/LqvpQ/

Tweede voorbeeld:

var val = (function(){
     return 13 + 5;
})();
alert(val); //18

Antwoord 6, autoriteit 3%

Die constructie wordt een Immediately Invoked Function Expression (IIFE)genoemd, wat betekent dat het onmiddellijk wordt uitgevoerd. Zie het als een functie die automatisch wordt aangeroepen wanneer de tolk die functie bereikt.

Meest voorkomende gebruik:

Een van de meest voorkomende gebruiksgevallen is het beperken van de reikwijdte van een variabele gemaakt via var. Variabelen die zijn gemaakt via varhebben een bereik dat beperkt is tot een functie, dus deze constructie (die een functieomhulling is rond bepaalde code) zal ervoor zorgen dat uw variabele bereik niet uit die functie lekt.

In het volgende voorbeeld zal countniet beschikbaar zijn buiten de onmiddellijk aangeroepen functie, d.w.z. het bereik van countzal niet uit de functie lekken. U zou een ReferenceErrormoeten krijgen, mocht u deze toch proberen te openen buiten de onmiddellijk aangeroepen functie.

(function () { 
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

ES6-alternatief (aanbevolen)

In ES6 kunnen we nu variabelen laten maken via leten const. Beiden hebben een blokbereik (in tegenstelling tot vardat een functiebereik heeft).

Daarom, in plaats van die complexe constructie van IIFE te gebruiken voor de use case die ik hierboven noemde, kun je nu veel eenvoudiger code schrijven om ervoor te zorgen dat het bereik van een variabele niet uit je gewenste blok lekt.

{ 
    let count = 10;
}
console.log(count);  // ReferenceError: count is not defined

In dit voorbeeld hebben we letgebruikt om de variabele countte definiëren, waardoor countbeperkt blijft tot het codeblok dat we hebben gemaakt met de curly haakjes {...}.

Ik noem het een “Curly Jail”.

Antwoord 7, autoriteit 2%

(function () {
})();

Dit wordt IIFE (Immediately Invoked Function Expression) genoemd. Een van de beroemde JavaScript-ontwerppatronen, het is het hart en de ziel van het moderne modulepatroon. Zoals de naam al doet vermoeden, wordt het onmiddellijk uitgevoerd nadat het is gemaakt. Dit patroon creëert een geïsoleerd of privé-uitvoeringsbereik.

JavaScript vóór ECMAScript 6 gebruikte lexicale scoping, dus IIFE werd gebruikt voor het simuleren van blokscoping. (Met ECMAScript 6 is block scoping mogelijk met de introductie van de trefwoorden leten const.)
Referentie voor probleem met lexicale scoping

Simuleer blokscoping met IIFE

Het prestatievoordeel van het gebruik van Iife is het vermogen om veel gebruikte wereldwijde objecten zoals window, document, enz. Als een argument te geven door de scope-opzoeking te verminderen. (Onthoud dat JavaScript zoekt naar eigenschappen in de lokale reikwijdte en de weg omhoog de ketting tot de wereldwijde reikwijdte). Dus de toegang tot globale objecten in de lokale reikwijdte vermindert de opzoektijd zoals hieronder.

(function (globalObj) {
//Access the globalObj
})(window);

8, Autoriteit 2%

Dit is een onmiddellijk opgeroepen functie-expressie in JavaScript:

Om iife in JS te begrijpen, laten we het breken:

1. expressie : iets dat een waarde retourneert
   Voorbeeld: probeer het volgende in chromen console. Dit zijn uitdrukkingen in JS.

a = 10 
output = 10 
(1+3) 
output = 4

2. functie expressie :
   Voorbeeld:

// Function Expression 
var greet = function(name){
   return 'Namaste' + ' ' + name;
}
greet('Santosh');

hoe functie expressie werkt:
– Wanneer JS-motor voor de eerste keer uitvoert (uitvoeringscontext – Creëer fase), wordt deze functie (aan de rechterkant van = hierboven) niet uitgevoerd of opgeslagen in het geheugen. Variabele ‘Greet’ krijgt ‘undefined’ waarde door de JS-motor.
– Tijdens de uitvoering (uitvoeringscontext – Voer fase uit), wordt het function-object op de vlieg gemaakt (, het is nog niet geëxecuteerd ), toegewezen aan ‘Greet’ variabele en kan worden ingeroepen met behulp van ‘Greet (‘ Somename ‘)’.

3. Onmiddellijk aangeroepen functie-uitdrukking:

Voorbeeld:

// IIFE
var greeting = function(name) {
    return 'Namaste' + ' ' + name;
}('Santosh')
console.log(greeting)  // Namaste Santosh. 

Hoe IIFE werkt:
– Let op de ‘()’ direct na de functiedeclaratie. Aan elk functieobject is een eigenschap ‘CODE’ gekoppeld die kan worden opgeroepen. En we kunnen het noemen (of aanroepen) met ‘()’ accolades.

– Dus hier, tijdens de uitvoering (uitvoeringscontext – uitvoeringsfase), het functieobject wordt gemaakt en tegelijkertijd uitgevoerd
– Dus nu heeft de begroetingsvariabele, in plaats van het functie-object, zijn retourwaarde (een string)

Typisch gebruik van IIFE in JS:

Het volgende IIFE-patroon wordt vrij vaak gebruikt.

// IIFE 
// Spelling of Function was not correct , result into error
(function (name) {
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

• we doen hier twee dingen.
  a) Onze functie-uitdrukking tussen accolades plaatsen (). Dit vertelt de syntaxis-parser dat alles wat binnen de () wordt geplaatst een uitdrukking is (in dit geval een functie-uitdrukking) en een geldige code is.
  b) We roepen deze functie tegelijkertijd op met de () aan het einde ervan.

Dus deze functie wordt tegelijkertijd gemaakt en uitgevoerd (IIFE).

Belangrijke usecase voor IIFE:

IIFE houdt onze code veilig.
– IIFE, dat een functie is, heeft zijn eigen uitvoeringscontext, wat betekent dat alle variabelen die erin worden gemaakt lokaal zijn voor deze functie en niet worden gedeeld met de globale uitvoeringscontext.

Stel dat ik een ander JS-bestand (test1.js) heb gebruikt in mijn toepassing samen met iife.js (zie hieronder).

// test1.js
var greeting = 'Hello';
// iife.js
// Spelling of Function was not correct , result into error
(function (name) { 
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');
console.log(greeting)   // No collision happens here. It prints 'Hello'.

Dus IIFE helpt ons om veilige code te schrijven waar we niet onbedoeld in botsing komen met de globale objecten.

Antwoord 9

Nee, deze constructie creëert alleen een ruimte voor naamgeving. Als je het in delen breekt, kun je zien dat je een externe

. hebt

(...)();

Dat is een functie-aanroep. Tussen haakjes heb je:

function() {}

Dat is een anonieme functie. Alles dat wordt gedeclareerd met varbinnen de constructie, is alleen zichtbaar binnen dezelfde constructie en vervuilt de globale naamruimte niet.

Antwoord 10

Dat is een zelfoproepende anonieme functie.

Bekijk de W3Schools-uitleg van een zelfoproepende functie.

Functie-uitdrukkingen kunnen “zelfoproepend” worden gemaakt.

Een zelfoproepende expressie wordt automatisch aangeroepen (gestart), zonder
wordt gebeld.

Functie-uitdrukkingen worden automatisch uitgevoerd als de uitdrukking is
gevolgd door ().

U kunt niet zelf een functiedeclaratie aanroepen.

Antwoord 11

Dit is de zelfoproepende anonieme functie. Het wordt uitgevoerd terwijl het is gedefinieerd. Wat betekent dat deze functie is gedefinieerd en zichzelf onmiddellijk na de definitie aanroept.

En de uitleg van de syntaxis is: De functie tussen het eerste ()haakje is de functie die geen naam heeft en met het volgende ();haakje kunt u begrijpen dat het wordt genoemd op het moment dat het wordt gedefinieerd. En je kunt elk argument doorgeven tussen dit tweede ()haakje dat zal worden gepakt in de functie die tussen het eerste haakje staat. Zie dit voorbeeld:

(function(obj){
    // Do something with this obj
})(object);

Hier is het ‘object’ dat u doorgeeft binnen de functie toegankelijk via ‘obj’, aangezien u het in de functiehandtekening pakt.

Antwoord 12

Begin hier:

var b = 'bee';
console.log(b);  // global

Zet het in een functie en het is niet langer globaal— je primaire doel.

function a() {
  var b = 'bee';
  console.log(b);
}
a();
console.log(b);  // ReferenceError: b is not defined -- *as desired*

Bel de functie onmiddellijk — oeps:

function a() {
  var b = 'bee';
  console.log(b);
}();             // SyntaxError: Expected () to start arrow function, but got ';' instead of '=>'

Gebruik de haakjes om een syntaxisfout te voorkomen:

(function a() {
  var b = 'bee';
  console.log(b);
})(); // OK now

Je kunt de functienaam weglaten:

(function () {    // no name required
  var b = 'bee';
  console.log(b);
})();

Het hoeft niet ingewikkelder te zijn dan dat.

Antwoord 13

Zelfuitvoerende functies worden meestal gebruikt om context in te kapselen en naamsamenvattingen te voorkomen. Elke variabele die u definieert binnen de (function(){..})() is niet globaal.

De code

var same_name = 1;
var myVar = (function() {
    var same_name = 2;
    console.log(same_name);
})();
console.log(same_name);

produceert deze uitvoer:

2
1

Door deze syntaxis te gebruiken, voorkomt u dat u in botsing komt met globale variabelen die elders in uw JavaScript-code zijn gedeclareerd.

Antwoord 14

Het is een functie-expressie, het staat voor Direct Invoked Function Expression (IIFE). IIFE is gewoon een functie die wordt uitgevoerd direct nadat deze is gemaakt. Dus in plaats van dat de functie moet wachten totdat deze wordt aangeroepen om te worden uitgevoerd, wordt IIFE onmiddellijk uitgevoerd. Laten we de IIFE als voorbeeld construeren. Stel dat we een optelfunctie hebben die twee gehele getallen als args neemt en de som retourneert
laten we van de add-functie een IIFE maken,

Stap 1: Definieer de functie

function add (a, b){
    return a+b;
}
add(5,5);

Stap2: Roep de functie aan door de hele functiedeclaratie tussen haakjes te zetten

(function add (a, b){
    return a+b;
})
//add(5,5);

Stap 3: Om de functie direct aan te roepen, hoeft u alleen maar de ‘add’-tekst uit de aanroep te verwijderen.

(function add (a, b){
    return a+b;
})(5,5);

De belangrijkste redenom een IFFE te gebruiken, is om een privébereik binnen uw functie te behouden. Binnen uw javascript-code wilt u ervoor zorgen dat u geen enkele globale variabele overschrijft. Soms kunt u per ongeluk een variabele definiëren die een globale variabele overschrijft. Laten we een voorbeeld proberen. stel dat we een html-bestand hebben met de naam iffe.html en de codes in de body-tag zijn-

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

Nou, bovenstaande code wordt zonder enige twijfel uitgevoerd, neem nu aan dat u een variabele met de naam document per ongeluk of opzettelijk hebt gewist.

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
        const document = "hi there";
        console.log(document);
    </script> 
</body>

u komt terecht in een SyntaxError: herdeclaratie van niet-configureerbaar globaal eigendomsdocument.

Maar als u een document met een variabelenaam wilt wissen, kunt u dit doen door IFFE te gebruiken.

<body>
    <div id = 'demo'></div>
    <script>
        (function(){
            const document = "hi there";
            this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
            console.log(document);
        })();
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

Uitgang:

Laten we proberen met een ander voorbeeld, stel dat we een rekenmachine-object zoals hieronder staan ​​-

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
    </script> 
</body>

Nou, het werkt als een charme, wat als we per ongeluk de waarde van calculator-object opnieuw toewijzen.

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
        calculator = "scientific calculator";
        console.log(calculator.mul(5,5));
    </script> 
</body>

Ja, u zult eindigen met een TypeError: Calculator.mul is geen functie ife.html

Maar met behulp van IFFE kunnen we een privé-reikwijdte maken waar we een andere calculator voor variabele naam kunnen maken en het gebruiken;

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        var cal = (function(){
            var calculator = {
                sub:function(a,b){
                    return a-b;
                },
                div:function(a,b){
                    return a/b;
                }
            }
            console.log(this.calculator.mul(5,10));
            console.log(calculator.sub(10,5));
            return calculator;
        })();
        console.log(calculator.add(5,10));
        console.log(cal.div(10,5));
    </script> 
</body>

Uitvoer:

Antwoord 15

Zelfuitvoerende anonieme functie. Het wordt uitgevoerd zodra het is gemaakt.

Een kort en dummy-voorbeeld waar dit nuttig is, is:

function prepareList(el){
  var list = (function(){
    var l = []; 
    for(var i = 0; i < 9; i++){
     l.push(i);
    }
    return l;
  })();
  return function (el){
    for(var i = 0, l = list.length; i < l; i++){
      if(list[i] == el) return list[i];
    }
    return null;
  }; 
} 
var search = prepareList();
search(2);
search(3);

Dus in plaats van elke keer een lijst te maken, maak je deze maar één keer (minder overhead).

Antwoord 16

Het heet IIFE – Onmiddellijk aangeroepen functie-expressie. Hier is een voorbeeld om de syntaxis en het gebruik ervan te laten zien. Het wordt gebruikt om het gebruik van variabelen te beperken tot de functie en niet verder.

(function () {
  function Question(q,a,c) {
    this.q = q;
    this.a = a;
    this.c = c;
  }
  Question.prototype.displayQuestion = function() {
    console.log(this.q);
    for (var i = 0; i < this.a.length; i++) {
      console.log(i+": "+this.a[i]);
    }
  }
  Question.prototype.checkAnswer = function(ans) {
    if (ans===this.c) {
      console.log("correct");
    } else {
      console.log("incorrect");
    }
  }
  var q1 = new Question('Is Javascript the coolest?', ['yes', 'no'], 0);
  var q2 = new Question('Is python better than Javascript?', ['yes', 'no', 'both are same'], 2);
  var q3 = new Question('Is Javascript the worst?', ['yes', 'no'], 1);
  var questions = [q1, q2, q3];
  var n = Math.floor(Math.random() * questions.length)
  var answer = parseInt(prompt(questions[n].displayQuestion()));
  questions[n].checkAnswer(answer);
})();

17

iife (onmiddellijk opgeroepen functie-expressie) is een functie die wordt uitgevoerd zodra het script laadt en weggaat.

Overweeg de functie hieronder geschreven in een bestand met de naam iife.js

(function(){
       console.log("Hello Stackoverflow!");
   })();

Hierboven wordt deze code uitgevoerd zodra u iife.js laadt en print ‘hallo stackoverflow! ‘ op de console van de ontwikkelaarstools.

Voor een gedetailleerde uitleg Zie onmiddellijk ingezette functie expressie (iife )

18

Nog een gebruiksbehuizing is memoisatie waarbij een cachebedrag niet globaal is:

var calculate = (function() {
  var cache = {};
  return function(a) {
    if (cache[a]) {
      return cache[a];
    } else {
      // Calculate heavy operation
      cache[a] = heavyOperation(a);
      return cache[a];
    }
  }
})();

Antwoord 19

De volgende code:

(function () {
})();

wordt een onmiddellijk aangeroepen functie-uitdrukking(IIFE) genoemd.

Het wordt een functie-expressie genoemd omdat de operator ( yourcode )in Javascript het in een expressie dwingt. Het verschil tussen een functie-uitdrukkingen een functiedeclaratieis het volgende:

// declaration:
function declaredFunction () {}
// expressions:
// storing function into variable
const expressedFunction = function () {}
// Using () operator, which transforms the function into an expression
(function () {})

Een expressie is gewoon een verzameling code die kan worden geëvalueerd tot een enkele waarde. In het geval van de expressies in het bovenstaande voorbeeld was deze waarde een object met één functie.

Nadat we een expressie hebben die evalueert tot een functie-object, kunnen we het functie-object onmiddellijk aanroepenmet de operator (). Bijvoorbeeld:

(function() {
  const foo = 10;        // all variables inside here are scoped to the function block
  console.log(foo);
})();
console.log(foo);  // referenceError foo is scoped to the IIFE

(function() {
     // all your code here
     // ...
})();

// simple
const simpleNumber = (() => {
  return true ? 1 : 2
})()
// with param
const isPositiveNumber = ((number) => {
  return number > 0 ? true : false
})(4)

(function() {
    var x = 5 + 4;
    console.log(x);
})();

(function(param){
   //code here
})(args);

void function(param){
   //code here
}(args);

var app = window.app || (window.app = {});
console.log(app);
console.log(window.app);

Object {}
Object {}