JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


Definities van JavaScript- functies


JavaScript-functies worden gedefinieerd met het functiontrefwoord.

U kunt een functiedeclaratie of een functie -uitdrukking gebruiken .


Functieverklaringen

Eerder in deze zelfstudie hebt u geleerd dat functies worden gedeclareerd met de volgende syntaxis:

function functionName(parameters) {
  // code to be executed
}

Gedeclareerde functies worden niet onmiddellijk uitgevoerd. Ze worden "opgeslagen voor later gebruik" en worden later uitgevoerd wanneer ze worden aangeroepen (opgeroepen).

Voorbeeld

function myFunction(a, b) {
  return a * b;
}

Puntkomma's worden gebruikt om uitvoerbare JavaScript-instructies te scheiden.
Aangezien een functiedeclaratie geen uitvoerbare instructie is, is het niet gebruikelijk om deze te eindigen met een puntkomma.


Functie-uitdrukkingen

Een JavaScript-functie kan ook worden gedefinieerd met behulp van een expressie .

Een functie-uitdrukking kan worden opgeslagen in een variabele:

Voorbeeld

const x = function (a, b) {return a * b};

Nadat een functie-uitdrukking in een variabele is opgeslagen, kan de variabele als functie worden gebruikt:

Voorbeeld

const x = function (a, b) {return a * b};
let z = x(4, 3);

Bovenstaande functie is eigenlijk een anonieme functie (een functie zonder naam).

Functies die in variabelen zijn opgeslagen, hebben geen functienamen nodig. Ze worden altijd aangeroepen (aangeroepen) met de variabelenaam.

De functie hierboven eindigt met een puntkomma omdat het deel uitmaakt van een uitvoerbaar statement.



De Function() Constructor

Zoals je in de vorige voorbeelden hebt gezien, worden JavaScript-functies gedefinieerd met het functiontrefwoord.

Functies kunnen ook worden gedefinieerd met een ingebouwde JavaScript-functieconstructor genaamd Function().

Voorbeeld

const myFunction = new Function("a", "b", "return a * b");

let x = myFunction(4, 3);

U hoeft de functieconstructor eigenlijk niet te gebruiken. Het bovenstaande voorbeeld is hetzelfde als schrijven:

Voorbeeld

const myFunction = function (a, b) {return a * b};

let x = myFunction(4, 3);

Meestal kunt u het gebruik van het newtrefwoord in JavaScript vermijden.


Functie Hijsen

Eerder in deze tutorial heb je geleerd over "hijsen" ( JavaScript Hoisting ).

Hijsen is het standaardgedrag van JavaScript om declaraties naar de bovenkant van het huidige bereik te verplaatsen.

Hijsen is van toepassing op variabele declaraties en op functiedeclaraties.

Hierdoor kunnen JavaScript-functies worden aangeroepen voordat ze worden gedeclareerd:

myFunction(5);

function myFunction(y) {
  return y * y;
}

Functies die met een expressie zijn gedefinieerd, worden niet gehesen.


Zelfoproepende functies

Functie-uitdrukkingen kunnen "zelfaanroepend" worden gemaakt.

Een zichzelf aanroepende expressie wordt automatisch aangeroepen (gestart), zonder te worden aangeroepen.

Functie-expressies worden automatisch uitgevoerd als de expressie wordt gevolgd door ().

U kunt een functiedeclaratie niet zelf aanroepen.

U moet haakjes rond de functie plaatsen om aan te geven dat het een functie-uitdrukking is:

Voorbeeld

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

De functie hierboven is eigenlijk een anonieme zelfoproepende functie (functie zonder naam).


Functies kunnen als waarden worden gebruikt

JavaScript-functies kunnen als waarden worden gebruikt:

Voorbeeld

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3);

JavaScript-functies kunnen worden gebruikt in uitdrukkingen:

Voorbeeld

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3) * 2;

Functies zijn objecten

De typeofoperator in JavaScript retourneert "function" voor functies.

Maar JavaScript-functies kunnen het best worden omschreven als objecten.

JavaScript-functies hebben zowel eigenschappen als methoden .

De arguments.lengtheigenschap retourneert het aantal argumenten dat is ontvangen toen de functie werd aangeroepen:

Voorbeeld

function myFunction(a, b) {
  return arguments.length;
}

De toString()methode retourneert de functie als een string:

Voorbeeld

function myFunction(a, b) {
  return a * b;
}

let text = myFunction.toString();

Een functie gedefinieerd als de eigenschap van een object, wordt een methode voor het object genoemd.
Een functie die is ontworpen om nieuwe objecten te maken, wordt een objectconstructor genoemd.


Pijlfuncties

Pijlfuncties staan ​​een korte syntaxis toe voor het schrijven van functie-uitdrukkingen.

U hebt het functiontrefwoord, het returntrefwoord en de accolades niet nodig .

Voorbeeld

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

Pijlfuncties hebben geen eigen this. Ze zijn niet erg geschikt voor het definiëren van objectmethoden .

Pijlfuncties worden niet gehesen. Ze moeten worden gedefinieerd voordat ze worden gebruikt.

Gebruiken const is veiliger dan gebruiken var, omdat een functie-uitdrukking altijd een constante waarde heeft.

returnU kunt het trefwoord en de accolades alleen weglaten als de functie een enkele instructie is. Daarom is het misschien een goede gewoonte om ze altijd te bewaren:

Voorbeeld

const x = (x, y) => { return x * y };

Pijlfuncties worden niet ondersteund in IE11 of eerder.