Koden inde i en JavaScript funktion vil køre, når "noget" kalder den.
Koden inde i en funktion udføres ikke, når funktionen er defineret.
Koden inde i en funktion udføres, når funktionen kaldes.
Det er almindeligt at bruge udtrykket "kald en funktion" i stedet for "kald en funktion".
Det er også almindeligt at sige "kald på en funktion", "start en funktion" eller "udfør en funktion".
I denne vejledning vil vi bruge invoke, fordi en JavaScript-funktionen kan aktiveres uden at blive kaldt.
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); //
Will return 20Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>
Ovenstående funktion hører ikke til noget objekt. Men i JavaScript der er altid et globalt standardobjekt.
I HTML er det globale globale objekt selve HTML-siden, så funktionen ovenfor "tilhører" HTML-side.
I en browser er sideobjektet browservinduet. Funktionen ovenfor bliver automatisk en vinduesfunktion.
Dette er en almindelig måde at kalde en JavaScript-funktion på, men ikke en særlig god praksis.
Globale variabler, metoder eller funktioner kan nemt skabe navnekonflikter og fejl i det globale objekt.
myFunction() og window.myFunction() er den samme funktion:
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Global functions automatically become window methods. Invoking myFunction() is the same as invoking window.myFunction().</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2);
</script>
</body>
</html>
I JavaScript refererer dette søgeordet til et objekt.
Hvilket objekt afhænger af, hvordan dette påkaldes (bruges eller kaldes).
dette søgeordet refererer til forskellige objekter afhængigt af hvordan det bruges:
I en objektmetode henviser dette til objektet.
Alene henviser dette til det globale objekt.
I en funktion henviser dette til det globale objekt.
I en funktion, i streng tilstand, er dette udefineret.
I en begivenhed henviser dette til det element, der modtog begivenheden.
Metoder som call(), apply() og bind() kan henvise dette til ethvert objekt.
dette er ikke en variabel. Det er et nøgleord. Du kan ikke ændre værdien af denne.
JavaScript denne selvstudium
Når en funktion kaldes uden et ejerobjekt, værdien af dette bliver det globale objekt.
I en webbrowser er det globale objekt browservinduet.
Dette eksempel returnerer vinduesobjektet som værdien af dette:
let x = myFunction();
// x will be the window object
function myFunction() {
return this;
}Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>
<p id="demo"></p>
<script>
let x = myFunction();
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Aktivering af en funktion som en global funktion får værdien af dette til at være det globale objekt.
Brug af vinduesobjektet som en variabel kan nemt crashe dit program.
I JavaScript kan du definere funktioner som objektmetoder.
Følgende eksempel opretter et objekt (myObject), med to egenskaber (fornavn og efternavn), og en metode (fuldt navn):
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>myObject.fullName() will return John Doe:</p>
<p id="demo"></p>
<script>
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
Metoden fuldt navn er en funktion. Funktionen hører til objektet. myObject er ejeren af funktionen.
Det, der hedder dette, er det objekt, der "ejer" JavaScript-koden. I dette tilfælde værdien af dette er mit objekt.
Test det! Skift fullName-metoden for at returnere værdien af denne:
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
// This will return [object Object] (the owner object)
myObject.fullName();
Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The value of <b>this</b>, in an object method, is the owner object.</p>
<p id="demo"></p>
<script>
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
Aktivering af en funktion som en objektmetode forårsager værdien af dette at være selve objektet.
Hvis en funktionskald indledes med nøgleordet nyt, det er en konstruktørpåkaldelse.
Det ser ud til, at du opretter en ny funktion, men da JavaScript-funktioner er objekter du rent faktisk opretter et nyt objekt:
// 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;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example, myFunction is a function constructor:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
const myObj = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = myObj.firstName;
</script>
</body>
</html>
En konstruktørinvokation skaber et nyt objekt. Det nye objekt arver egenskaber og metoder fra dens konstruktør.
this søgeordet i konstruktøren har ikke en værdi.
Værdien af dette vil være det nye objekt, der oprettes, når funktionen aktiveres.