Koden inuti en JavaScript funktion
kommer att köras när "något" anropar den.
Koden inuti en funktion exekveras inte när funktionen är definierad.
Koden inuti en funktion exekveras när funktionen anropas.
Det är vanligt att använda termen "ringa en funktion" istället för "anropa en funktion".
Det är också vanligt att säga "ringa på en funktion", "starta en funktion" eller "utför en funktion".
I den här handledningen kommer vi att använda invoke, eftersom en JavaScript-funktionen kan anropas utan att anropas.
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); //
Will return 20
Prova själv →
<!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>
Funktionen ovan tillhör inte något objekt. Men i JavaScript där är alltid ett globalt standardobjekt.
I HTML är det globala standardobjektet själva HTML-sidan, så funktionen ovan "tillhör" till HTML-sida.
I en webbläsare är sidobjektet webbläsarfönstret. Funktionen ovan blir automatiskt en fönsterfunktion.
Detta är ett vanligt sätt att anropa en JavaScript-funktion, men inte en särskilt bra praxis.
Globala variabler, metoder eller funktioner kan enkelt skapa namnkonflikter och buggar i det globala objektet.
myFunction() och window.myFunction() är samma funktion:
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20
Prova själv →
<!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 hänvisar nyckelordet detta
till ett objekt.
Vilket objekt beror på hur detta
anropas (används eller anropas).
Nyckelordet detta
hänvisar till olika objekt beroende på hur det används:
I en objektmetod hänvisar detta
till objektet.
Enbart hänvisar detta
till det globala objektet.
I en funktion hänvisar detta
till det globala objektet.
I en funktion, i strikt läge, är detta
odefinierat
.
I en händelse hänvisar detta
till elementet som tog emot händelsen.
Metoder som call()
, apply()
och bind()
kan hänvisa detta
till alla objekt.
detta
är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna
.
JavaScript-handledningen för denna
När en funktion anropas utan ett ägarobjekt, värdet av detta
blir det globala objektet.
I en webbläsare är det globala objektet webbläsarfönstret.
Det här exemplet returnerar fönsterobjektet som värdet på detta
:
let x = myFunction();
// x will be the window object
function myFunction() {
return this;
}
Prova själv →
<!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>
Att anropa en funktion som en global funktion gör att värdet på detta blir det globala objektet.
Att använda fönsterobjektet som en variabel kan enkelt krascha ditt program.
I JavaScript kan du definiera funktioner som objektmetoder.
Följande exempel skapar ett objekt (myObject), med två egenskaper (förnamn och efternamn), och en metod (fullständigt namn):
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
Prova själv →
<!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 fullName är en funktion. Funktionen tillhör objektet. myObject är ägaren till funktionen.
Det som kallas detta
, är objektet som "äger" JavaScript-koden. I det här fallet värdet av detta
är myObject.
Testa det! Ändra metoden fullName för att returnera värdet för detta
:
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
// This will return [object Object] (the owner object)
myObject.fullName();
Prova själv →
<!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>
Att anropa en funktion som en objektmetod orsakar värdet av detta
att vara själva objektet.
Om en funktionsanrop föregås av nyckelordet new
, det är en konstruktoranrop.
Det ser ut som att du skapar en ny funktion, men eftersom JavaScript-funktioner är objekt som du faktiskt skapar ett nytt 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;
Prova själv →
<!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 konstruktoranrop skapar ett nytt objekt. Det nya objektet ärver egenskaper och metoder från dess konstruktör.
Nyckelordet detta
i konstruktorn har inget värde.
Värdet på detta
kommer att vara det nya objektet som skapas när funktionen anropas.