[JS] 'this' binnen functie in method

[ZpAz]

code:

function mijnKlasse() {
    this.waarde = 10;
    
    this._functie = function() {
        alert(this.waarde); //10
        
        var img = new Image();
        img.onload = function() {
            alert(this.waarde); //undefined .. hoe krijg ik hem wel
        }
    }
    
}

Beetje lastig om deze vraag uit te leggen, ik vraag me af, hoe krijg ik de waarde van mijnKlasse nu in de 'onload' van het img object?

Ik heb al verschillende dingen geprobeert, maar mijn JS oop kennis is niet geweldig, ook heb ik meerdere tutorials bekeken, maar die geven ook niet veel informatie.

[CoolGamer]

Je kan volgens mij gewoon i.p.v. this gebruik maken van img. Img zit namelijk daar gewoon binnen je scope.

[ZpAz]

Volgens mij volg ik je niet helemaal.

Vanuit de 'onload' van img wil ik graag de waarde 'waarde' (this.waarde) uit de klasse mijnKlasse krijgen.

[CoolGamer]

Dat kan je doen:

JavaScript:

function mijnKlasse() {
    var that = this;
    this.waarde = 10;
    
    this._functie = function() {
        alert(this.waarde); //10
        
        var img = new Image();
        img.onload = function() {
            alert(that.waarde);
        }
    }
    
}

[ Voor 6% gewijzigd door CoolGamer op 28-10-2010 22:26 ]

[ZpAz]

Dat werkt inderdaad! bedankt, maar het voelt nogal 'ranzig' aan.. wil ik nu gewoon iets compleets verkeerds of?

[X-Lars]

Zonder de hele context te kennen lijkt het mij wel goed wat je doet/wilt. Als je dit ranzig vindt, raad ik je af verder te programmeren in Javascript Persoonlijk vind ik alleen de "that" conventie lelijk, ik gebruik "oThis" danwel een naam die het object daadwerkelijk beschrijft (bijv. oMijnKlasse). Maar dat maakt functioneel niets uit natuurlijk.

Zie evt. hier voor meer informatie: http://javascript.crockford.com/private.html

[CoolGamer]

Je zou ook gebruik kunnen maken van de bind functie van Prototype. Dan heb geen aparte variabele die "this" bijhoudt nodig.

Toekomstige versies van javascript hebben die functie overigens ingebouwd.

[dB90]

Nee dat is niet ranzig, wat TheCoolGuy doet is prima namelijk 'this' gelijk in een locale variabele stoppen (that). 'this' is op het moment dat jij hem alert een referentie naar img als ik het goed heb. Plz correct me if I'm wrong

Je moet je even inlezen in scoping.

[ZpAz]

X-Lars schreef op donderdag 28 oktober 2010 @ 22:38:
Zonder de hele context te kennen lijkt het mij wel goed wat je doet/wilt. Als je dit ranzig vindt, raad ik je af verder te programmeren in Javascript Persoonlijk vind ik alleen de "that" conventie lelijk, ik gebruik "oThis" danwel een naam die het object daadwerkelijk beschrijft (bijv. oMijnKlasse). Maar dat maakt functioneel niets uit natuurlijk.

Zie evt. hier voor meer informatie: http://javascript.crockford.com/private.html

Ik heb hem ondertussen parent genoemd, en ik zal de gestuurde linkjes binnenkort eens doorlezen. Nu eerst wat werkends krijgen.

[garagaholic]

Het kan ook wel zonder this.

JavaScript:

function mijnKlasse() {
    var that = {};
    var waarde = 10;
    
    var functie = function() {
        alert(waarde); //10
        
        var img = new Image();
        img.onload = function() {
            alert(waarde);
        };
    }
    that.functie = functie;
    return that;
};

Vervolgens gaan we t gebruiken:

var klasseInstantie = mijnKlasse();

en met klasseInstantie.functie(); krijgen we dan de waarde 10 terug (met die img.onload gebeurt niets).

Ben overigens wel erg benieuwd naar wat je precies wilt, want daar snap ik op 't moment nogal weinig van

[CoolGamer]

garagaholic schreef op donderdag 28 oktober 2010 @ 23:03:
Het kan ook wel zonder this.

[...]

Vervolgens gaan we t gebruiken:

var klasseInstantie = mijnKlasse();

en met klasseInstantie.functie(); krijgen we dan de waarde 10 terug (met die img.onload gebeurt niets).

Ben overigens wel erg benieuwd naar wat je precies wilt, want daar snap ik op 't moment nogal weinig van

Hij wou een verwijzing hebben naar de instantie van "mijnKlasse".

Nadeel van jouw code is dat je waarde niet meer van buitenaf kan beschrijven.

[ZpAz]

Ik ben bezig om op Canvas dingen te tekenen, nu wil ik plaatjes tekenen welke ik dmv JS toevoeg, deze kunnen enkel vanuit het onload event getekend worden op een canvas. Zie: http://cl.ly/31R6

En voor de code: http://cl.ly/31to

Nu ben ik nog niet zo bekend met Canvas (en wiskunde) dus dit kan vast beter. En dat ga ik ook proberen, maar de klant wilde morgen een demo. Vandaar.

Dont mind rotation en rotationY, dat kan beter via parameters e.d, maar het moest wat snel snel snel. In het eindproduct wordt dit beter gedaan, dit was meer een snelle oefening kijken hoe het werkt.

[ Voor 20% gewijzigd door ZpAz op 28-10-2010 23:28 ]

[Bosmonster]

Scope is hier niet eens echt het probleem, het probleem is dat je "this" variabele gewoon overschreven wordt binnen de nieuwe scope.

Deze variabele dus even veilig stellen, zij het met "that", "oThis" of "self", of hoe je het ook wilt noemen, is dus gewoon wat je wilt.

Er zijn wel betere methodes als je code complexer wordt, maar in dit voorbeeld zou ik niet te moeilijk doen.

[ Voor 21% gewijzigd door Bosmonster op 28-10-2010 23:33 ]

[ZpAz]

Ik ben toch wel benieuwd naar de 'betere' methodes En waarom uiteraard.

[ Voor 18% gewijzigd door ZpAz op 28-10-2010 23:36 ]