Forståelse af nøgleordet 'this' i JavaScript

'dette' i JavaScript

I JavaScript er det mere kompliceret, fordi hvor dette refererer til, afhænger ikke kun af, hvordan funktionen er defineret, men også af, hvordan den kaldes.

Se her, hvordan dette fungerer afhængigt af påkaldelsessted og -form.

Global sammenhæng

Bruges i en global kontekst, der er bundet til det globale objekt, som f.eks. vindue i en webbrowser.

dette; // vindue

Inde i objektmetoden

Bruges inde i en objektmetode, der er bundet til det nærmeste omsluttende objekt. Objektet er den nye kontekst for dette nøgleord. Bemærk, at du ikke bør ændre funktion () til ES6-syntaks fun: () => this.context fordi det vil ændre konteksten.

const obj = {
  kontekst: "objekt",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // objekt

I dette eksempel med et indlejret objekt, dette refererer stadig til sin nærmeste kontekst.

const nestedObj = {
  kontekst: "parent",
  child: {
    context: "child",
    fun: function() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // barn

Kontekstløs funktion

Bruges i en funktion, der ikke har nogen kontekst (ikke har noget objekt som overordnet), der er bundet til den globale kontekst, selv om funktionen er defineret inde i objektet.

Bemærk, at vi bruger var kontekst i stedet for let/const-kontekst fordi lade og konst. ændre den vedlagte kontekst for variablen. var er altid tættest på den globale udførelseskontekst. lade og konst. erklærer kun variabler i et lokalt blokområde.

var context = "global";

const obj = {
  kontekst: "objekt",
  funA: function() {
    funktion funB() {
      const context = "funktion";
      returnerer this.context;
    }
    return funB(); // påkaldt uden kontekst
  }
};

obj.funA(); // global

Inde i konstruktørfunktionen

Bruges i en funktion, der er konstruktør for det nye objekt, der er bundet til den.

var context = "global";

funktion Obj() {
  this.context = "Obj-kontekst";
}

const obj = new Obj();
obj.context; // Obj-kontekst

Inde i funktion defineret på prototypekæde

Bruges i en funktion, der er defineret i prototypekæden, til at skabe et objekt, der er bundet til den.

const ProtoObj = {
  fun: function() {
    return this.name;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo

Indenfor opkald() og apply()-funktioner

opkald() og anvende() er JavaScript funktioner. Med dem kan et objekt bruge metoder, der tilhører et andet objekt. opkald() tager argumenter separat, hvor anvende() tager dem som et array.

dette er her bundet til en ny kontekst, der er ændret i opkald() og anvende() metoder.

const objA = {
  kontekst: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  kontekst: "objB"
};

objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

Inde i bind()-funktionen

bind() er også en JavaScript-metode. Den opretter en ny funktion, der har dette indstillet til den første parameter, der sendes til bind()**.**

const objA = {
  kontekst: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  kontekst: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]

Inde i begivenhedsbehandlere

Bruges i enhver eventhandler (f.eks, addeventListener, onclick, attachEvent), er den bundet til det DOM-element, som begivenheden var knyttet til.

document.querySelector(".foo").addEventListener("click", function() {
  this; // henviser til div-elementet `foo`.
});

ES6-pilfunktion

Når den bruges i pilfunktionen, er den altid bundet til sit leksikalske område. I pilfunktionen kan du ikke tildele dette på nogen måde.

const globalArrowFunction = () => this;

globalArrowFunction(); // Vindue

const obj = {
  kontekst: "objekt",
  funA: () => this,
  funB: function() {
    return () => {
      return this.context;
    };
  }
};

obj.funA(); // vindue
obj.funB()(); // objekt

Læs mere om det:

• De største udfordringer med brugerdefineret softwareudvikling
• Hvad er forskellen på et softwarehus og et it-bemandingsbureau?