‘This’ in javascript : deel 1 (een raadseltje)

18 okt

Javascript is een rare taal.

There, I’ve said it!

Dat komt omdat de hele taal in elkaar geflanst is in een dag of 10.  Desondanks is het een krachtige taal, waar je schitterende dingen mee kan doen. Dingen waarvan een taal als, ik zeg maar wat, Java(tm) alleen maar kan dromen (closures, memoization, object literals, en niet in het minst de aanwezigheid op het web – appletje anyone?)

Maar evengoed is het een vaak weinig consequente taal, en het gedrag van het keyword [this]  is één van de slachtoffers.

Wie denkt dat [this] voor hem/haar geen geheimen meer heeft, zou geen problemen mogen hebben met volgend raadseltje :

wat is de output van volgend script?


var obj = {
    myValue: 10,
    this_1: this,
    this_2: function() {
        return this;
    },
    this_3: (function() {
        return this;
    }())
};

myValue = 1000;

obj_this_2_ref = obj.this_2; // references the function obj.this2

this.myValue += 1;
obj.this_1.myValue += 1;
obj.this_2().myValue += 1;
obj_this_2_ref().myValue += 1;
obj.this_3.myValue += 1;

document.writeln(myValue + " ; " +  obj.myValue);

Het voor sommige misschien verrassende resultaat mag toch lichtjes wraakroepend worden genoemd..

Het goede nieuws is dat het gebruik van [this] dan misschien wel een zeer vreemde logica heeft, er is wel degelijk een logica. En meer goed nieuws : deze is, eens gekend, eigenlijk helemaal niet moeilijk.

Wordt vervolgd.

Volg

Ontvang elk nieuw bericht direct in je inbox.