JavaScript Funktionanrop

Koden inom en JavaScript-funktion körs när 'något' anropar den.

Anropa JavaScript-funktioner

När funktionen ärDefinierakommer koden inom funktionen inte att köras.

När funktionen ärAnropavid, kommer koden inom funktionen att köras.

Att anropa en funktion kan också sägas vara att 'starta en funktion' eller 'utföra en funktion'.

I denna kurs använder vi “Anropa”

Anropa funktionen som en funktion

exempel

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

Prova själv

Dessa funktioner tillhör inget objekt. Men i JavaScript finns alltid ett default globalt objekt.

I HTML är den default globala objektet själva HTML-sidan, alla funktioner ovan 'hör till' HTML-sidan.

I en webbläsare är denna sidobjektet det webbläsarfönstret. Funktionen ovan blir automatiskt en fönsterfunktion.

myFunction() och window.myFunction() är samma funktion:

exempel

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // Återger också 20

Prova själv

Detta är ett vanligt sätt att anropa en funktion, men det är inte en bra vana.

globala variabler, metoder eller funktioner kan lätt skapa namnkonflikter och sårbarheter i det globala objektet.

this nyckelord

i JavaScript kallas this det är "ägande" det objekt som äger den aktuella koden.

this värdet, när det används i en funktion, är "ägande" det objekt som äger funktionen.

Observera this är inte en variabel. Det tillhör nyckelord. Du kan inte ändra this värdet.

det globala objektet

När du anropar ett objekt utan ägarethis värdet blir ett globalt objekt.

I webbläsare är det globala objektet webbläsarobjektet.

Detta exempel använder this värdet returnerar detta window-objekt:

exempel

var x = myFunction();            // x blir window-objektet
function myFunction() {
   return this;
}

Prova själv

Att anropa en funktion som en global funktion leder till this värdet blir ett globalt objekt.

Använda window-objektet som en variabel kan lätt orsaka programkrasch.

Anropa funktionen som en metod

I JavaScript kan du definiera en funktion som objektmetod.

Nedan är ett exempel som skapar ett objekt (myObject) med två egenskaper (firstName och lastName) samt en metod (fullName):

exempel

var myObject = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Återger "Bill Gates"

Prova själv

fullName-metoden är en funktion. Funktionen tillhör objektet. myObject är funktionens ägare.

kallas this det är "ägande" detta JavaScript-kodobjekt. I detta exempel,this värdet är myObject.

Testa detta! Ändra denna fullName-metod för att returnera this värdet:

exempel

var myObject = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // Återger [object Object] (ägarens objekt)

Prova själv

att anropa funktionen som en objektmetod kommer att leda till this värdet kommer att bli själva objektet.

att anropa funktionen genom funktion konstruktorn

om det finns en new om det finns en nyckelordet, så det är ett anrop av konstruktorn.

Det ser ut som om du skapar en ny funktion, men eftersom JavaScript-funktioner är objekt, skapar du faktiskt ett nytt objekt:

exempel

// Detta är en funktion konstruktorn:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName = arg2;
}
// Skapar ett nytt objekt:
var x = new myFunction("Bill", "Gates");
x.firstName;                             // kommer att returnera "Bill"

Prova själv

anrop av konstruktorn kommer att skapa ett nytt objekt. Det nya objektet kommer att arbeta med egenskaper och metoder från sin konstruktorn.

inuti this nyckelordet har ingen värde.

this värdet kommer att bli ett nytt objekt som skapas vid anrop av funktionen.