javascript: de this toewijzen met apply en call

Inleiding tot 'this' in javascript

In JavaScript is het soms essentieel om te bepalen wat 'this' in een functie of methode betekent, vooral bij object-georiënteerd programmeren. De methoden apply en call van het Function object bieden manieren om 'this' expliciet te definiëren. Deze methoden geven je controle over de context waarin een functie wordt uitgevoerd, wat cruciaal kan zijn voor het correct aanroepen van methoden op verschillende objecten.

De 'this' context

De waarde van 'this' hangt af van hoe een functie wordt aangeroepen. In de meeste gevallen verwijst 'this' naar het object dat de functie aanroept. Echter, bij het aanroepen van een functie als een losse functie (dus niet als methode van een object), is 'this' standaard de global object (window in browsers, global in Node.js). apply en call bieden een oplossing om dit gedrag te overschrijven en 'this' naar een ander object te laten verwijzen.

De 'apply' methode

De apply methode roept een functie aan met een gegeven this-waarde en een array van argumenten. De syntaxis is: functie.apply(thisWaarde, [argumenten]). Het tweede argument is een array die de argumenten bevat die aan de functie moeten worden doorgegeven. Dit is handig wanneer je de argumenten niet individueel wilt opsommen.

De 'call' methode

De call methode roept een functie aan met een gegeven this-waarde en een reeks individuele argumenten. De syntaxis is: functie.call(thisWaarde, argument1, argument2, .). In tegenstelling tot apply, moet je de argumenten van de functie afzonderlijk opsommen. Ook hier bepaal je de context waarin de functie wordt uitgevoerd.

Voorbeeld: car en person objecten

Laten we een voorbeeld bekijken met car en person objecten. Beide objecten hebben een getName methode die hun naam weergeeft. We gebruiken test1 en test2 methoden op het person object om de getName methode van het car object aan te roepen, waarbij we expliciet de this-waarde instellen op het person object. Dit illustreert hoe apply en call de context kunnen veranderen.

Met de volgende code:

function car() {this.name="car";}car.prototype.getName = function() {alert('car.getName(): '+this.name);}function person() {this.name="person";}person.prototype.getName = function() {alert('person.getName(): '+this.name);}person.prototype.test1 = function(car) {car.getName.apply(this);}person.prototype.test2 = function(car) {car.getName.call(this);}var car = new car();var person = new person();car.getName();person.getName();person.test1(car);person.test2(car);

Zien we dat de getName methode van de car, aangeroepen vanuit de context van de person, de naam 'person' retourneert. Dit toont de kracht van het manipuleren van de this-waarde.

Verschil tussen 'apply' en 'call'

Het belangrijkste verschil tussen apply en call is de manier waarop argumenten worden doorgegeven. apply gebruikt een array van argumenten, terwijl call individuele argumenten verwacht. De functionaliteit is echter hetzelfde: beide methoden stellen je in staat om de this-waarde te bepalen wanneer je een functie aanroept. De keuze hangt af van hoe je de argumenten wilt organiseren.