JavaScript-funktionsanrop


Innehållsförteckning

    Visa innehållsförteckning


Koden inuti en JavaScript funktion kommer att köras när "något" anropar den.


Anropa en JavaScript-funktion

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.


Anropa en funktion som en funktion

Exempel

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.

Notera

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:

Exempel

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>



Vad är det här?

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.

Notera

detta är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna.

Se även:

JavaScript-handledningen för denna



Det globala objektet

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:

Exempel

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.


Anropa en funktion som en metod

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):

Exempel

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:

Exempel

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.


Anropa en funktion med en funktionskonstruktör

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:

Exempel

// 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.