logo

Hvad er 'dette' søgeord i JavaScript (objektorienteret programmering)

'dette ' søgeord i JavaScript er et forvirrende begreb for nogle - betydningen af ​​'dette 'ændringer baseret på kontekst. Denne artikel forklarer, hvad "dette ’ er.

Hvad er objektorienteret programmering

Objektorienteret programmering er en måde at strukturere din kode på, så data er organiseret i objekter . JavaScript understøtter objektorienteret programmering og giver forskellige værktøjer til at hjælpe med at implementere det.

Kort sagt, i stedet for at have en masse separate abstrakte variabler, der beskriver et element, kombinerer du dem til et enkelt objekt, som repræsenterer det element. Du kan også tilføje funktioner til objektet for at få det til at gøre ting, såsom at opdatere værdier gemt i objektet eller interagere med andre objekter.

For eksempel , hvis du bygger en app, der registrerer alle de biler, du nogensinde har ejet, i stedet for at have separate variabler, der indeholder alle mærker, modeller, farver osv., for hver bil, har du et bil-objekt em> som opbevarer dataene for en enkelt bil. Dette gør det nemt at håndtere store mængder data og gør din applikation nemmere at strukturere. Hvis du vil have alle oplysningerne om en bestemt bil, kan du få fat i den genstand og vide, at den indeholder alt, hvad du behøver at vide om den specifikke vare.

Omfang og sammenhænge

Selvom de ofte bruges i flæng, omfang og kontekster er lidt anderledes.

Et omfang definerer variabel adgang – om en variabel er tilgængelig for koden i den aktuelle del af applikationen. For eksempel er en variabel erklæret inde i en funktion ikke tilgængelig uden for den, da de er forskellige omfang .

En kontekst, er imidlertid det overordnede objekt for den kode, der køres. Da et objekt kan indeholde flere metoder (som er funktioner), vil hver metode have et forskelligt omfang (selve funktionerne) med samme kontekst (det overordnede objekt).

Se mere om variabler og omfang her.

Så hvad er det her ?

dette er et nøgleord i JavaScript. Den bruges, som du ville bruge enhver variabel.

dette henviser til dette objekt, du arbejder i lige nu, hvor dette er skrevet i koden . Det vil sige, det refererer til den aktuelle kontekst .

Hvis du arbejder i en funktion , dette refererer til funktionens overordnede objekt. Hvis du arbejder i et objekt , dette henviser til objektet.

JavaScript behandler mange ting som objekter , så her er en oversigt over hvad dette henviser til i hvert scenarie.

dette Uden for metoder, funktioner, objekter

Hvis dette bruges alene, uden for enhver overordnet klasse, objekt, funktion, det refererer til det globale objekt.

var testVar = 9;
console.log(this.testVar); // Prints 9

Ovenfor en global variabel testVar er defineret. For at bevise, at dette henviser til det globale objekt, kan du prøve at få adgang til this.testVar – som returnerer 9.

dette i en metode (Objektmetodebinding)

Objekter i JavaScript er af forskellige klasser. Klasser kan have metoder – funktioner, der kan udføres på hvert objekt i den givne klasse for at gøre ting med det.

Når du skriver kode til en metode, dette vil altid henvise til objekt.

For eksempel:

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
}

var fordCar = new Car('Ford', 'Model T');

Ovenfor en bil klasse er defineret. Objekter kan derefter oprettes med denne klasse. konstruktøren metode (en funktion) bruges til at indstille værdierne for Bilen klasse, når den oprettes, sæt attributter for variablen this .

I dette tilfælde et objekt ved navn fordCar er oprettet. Når konstruktøren køres, dette henviser til fordCar objekt og indstiller mærke/model værdier for det, der blev sendt som parametre.

Eksplicit funktionsbinding

Det er muligt at ændre hvad dette henviser til inde i en objektmetode ved at bruge call() og anvend() metoderne til det pågældende objekt. kald() og anvend() er indbyggede JavaScript-metoder, der er tilgængelige for alle genstande af enhver klasse. Begge metoder fungerer på samme måde og adskiller sig i, hvordan yderligere argumenter videregives til dem, efter konteksten er blevet angivet.

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }

    // makeModel method will return the make of model of the current object
    makeModel(){
        return this.make + ' ' + this.model;
    }
}

var fordCar = new Car('Ford', 'Model T');
var toyotaCar = new Car('Toyota', 'Hilux');

fordCar.makeModel.call(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the call method changed the context
fordCar.makeModel.apply(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the apply method changed the context

dette i en funktion

Som forklaret ovenfor, funktioner har omfang men giv ikke en kontekst . Så inde i en selvstændig funktion uden overordnet objekt eller klasse, dette vil referere til den globale kontekst.

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // Prints 9
}

testFunction(); // Run the function defined above

Funktioner og streng tilstand

Strikt tilstand er en valgfri indstilling, der kan aktiveres i JavaScript, som begrænser dig fra at gøre nogle ting, som du normalt kan gøre. Disse ting har en tendens til enten at være ting, der vil blive fjernet fra fremtidige revisioner af JavaScript, eller ting, der betragtes som "sjusket" - kode, der er gyldig, men skrevet på en måde, der sandsynligvis vil forårsage fejl eller være svær at fortolke.

Så i streng tilstand, dette gør IKKE henvise til det globale objekt, når det bruges i en selvstændig funktion. Den henviser ikke til noget og vender tilbage udefineret .

'use strict';

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // undefined
}

testFunction(); // Run the function defined above

dette i HTML Event Handlers

Når dette kaldes inde fra en hændelseshandler i et HTML-element, refererer det til selve HTML-elementet.

<button onclick="console.log(this);">
    Print information on this HTML element
</button>

Ovenstående HTML-kode udskriver oplysninger på