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


JavaScript -functieaanroep


De code in een JavaScript functionwordt uitgevoerd wanneer "iets" het aanroept.


Een JavaScript-functie aanroepen

De code binnen een functie wordt niet uitgevoerd wanneer de functie is gedefinieerd .

De code binnen een functie wordt uitgevoerd wanneer de functie wordt aangeroepen .

Het is gebruikelijk om de term " een functie aanroepen " te gebruiken in plaats van " een functie aanroepen ".

Het is ook gebruikelijk om te zeggen "een functie aanroepen", "een functie starten" of "een functie uitvoeren".

In deze tutorial gebruiken we invoke , omdat een JavaScript-functie kan worden aangeroepen zonder te worden aangeroepen.


Een functie aanroepen als een functie

Voorbeeld

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2);           // Will return 20

Bovenstaande functie hoort bij geen enkel object. Maar in JavaScript is er altijd een standaard globaal object.

In HTML is het standaard globale object de HTML-pagina zelf, dus de functie hierboven "hoort" bij de HTML-pagina.

In een browser is het pagina-object het browservenster. Bovenstaande functie wordt automatisch een vensterfunctie.

myFunction() en window.myFunction() is dezelfde functie:

Voorbeeld

function myFunction(a, b) {
  return a * b;
}
window.myFunction(10, 2);    // Will also return 20

Dit is een veelgebruikte manier om een ​​JavaScript-functie aan te roepen, maar het is geen goede gewoonte.
Globale variabelen, methoden of functies kunnen gemakkelijk naamconflicten en bugs in het globale object veroorzaken.



Het dit trefwoord

In JavaScript is het ding genaamd this, het object dat de huidige code "bezit".

De waarde van this, wanneer gebruikt in een functie, is het object dat de functie "bezit".

Merk op dat thisdit geen variabele is. Het is een sleutelwoord. U kunt de waarde van niet wijzigen this.

Tip: Lees meer over het thiszoekwoord bij JS dit Zoekwoord .


Het globale object

Wanneer een functie wordt aangeroepen zonder een owner-object, this wordt de waarde van het globale object.

In een webbrowser is het globale object het browservenster.

Dit voorbeeld retourneert het window-object als de waarde van this:

Voorbeeld

let x = myFunction();            // x will be the window object

function myFunction() {
  return this;
}

Door een functie als globale functie aan te roepen, wordt de waarde hiervan het globale object.
Als u het vensterobject als variabele gebruikt, kan uw programma gemakkelijk crashen.


Een functie aanroepen als een methode

In JavaScript kunt u functies definiëren als objectmethoden.

In het volgende voorbeeld wordt een object ( myObject ) gemaakt met twee eigenschappen ( firstName en lastName ) en een methode ( fullName ):

Voorbeeld

const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
myObject.fullName();         // Will return "John Doe"

De methode fullName is een functie. De functie hoort bij het object. myObject is de eigenaar van de functie.

Het ding genaamd this, is het object dat de JavaScript-code "bezit". this In dit geval is de waarde van myObject .

Test het! Wijzig de methode fullName om de waarde te retourneren van this:

Voorbeeld

const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this;
  }
}

// This will return [object Object] (the owner object)
myObject.fullName();

Het aanroepen van een functie als objectmethode zorgt ervoor dat de waarde van this het object zelf is.


Een functie aanroepen met een functieconstructor

Als een functie-aanroep wordt voorafgegaan door het newsleutelwoord, is het een constructor-aanroep.

Het lijkt erop dat u een nieuwe functie maakt, maar aangezien JavaScript-functies objecten zijn, maakt u in feite een nieuw object:

Voorbeeld

// This is a function constructor:
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

// This creates a new object
const myObj = new myFunction("John", "Doe");

// This will return "John"
myObj.firstName;

Een aanroep van een constructor maakt een nieuw object aan. Het nieuwe object erft de eigenschappen en methoden van zijn constructor.

Het thissleutelwoord in de constructor heeft geen waarde.
De waarde van thisis het nieuwe object dat wordt gemaakt wanneer de functie wordt aangeroepen.