[JavaScript] functie binnen andere functie prototyping

[ZeroXT]

Beste tweakers

Ik wil graag een functie oproepen die een functie uit een andere functie oproept. Is lekker te begrijpen dit dus even hier een stukje code:

JavaScript:

function A()
{
    this.variabel = 'test';
    
    this.functie = function()
    {
        return this.variabel;
    }
}

A.prototype.B = function()
{
    this.functie2 = function()
    {
        return this.functie();
    }
}

var a = new A();

Nu wil ik graag functie2 oproepen maar krijg het niet voor elkaar.
De volgende manieren heb ik geprobeerd:

alert(B.functie2());

Uncaught ReferenceError: B is not defined

alert(a.functie2());

Uncaught TypeError: Object #<an A> has no method 'functie2'

alert(A.functie2());

Uncaught TypeError: Object function A()
{
this.variabel = 'test';

this.functie = function()
{
return this.variabel;
}
} has no method 'functie2'

alert(A.B.functie2());

Uncaught TypeError: Cannot call method 'functie2' of undefined

Dus ik raak een beetje door mijn opties heen. Hoe roep ik nu functie 2 aan?

[crisp]

Ik begrijp niet helemaal wat je nu precies probeert te bewerkstelligen, maar ik gok dat je iets van overerving wilt doen? Dan zou je zoiets kunnen proberen:

JavaScript:

function A()
{
    this.variabel = 'test';
    
    this.functie = function()
    {
        return this.variabel;
    }
}

function B()
{
    this.functie2 = function()
    {
        return this.functie();
    }
}

A.prototype = new B();

a = new A();
alert(a.functie2());

[ZeroXT]

Bedankt crisp, het probleem is opgelost. Ik doelde inderdaad op overerving.

[Tjoekbezoer]

Afgaande op deze en je andere vraag is het volgens mij een goed idee om je kennis van prototype chains en execution context wat op te frissen. Het helpt een boel om goed te weten hoe JavaScript op dat vlak nu eigenlijk werkt.

Bekijk de slides van John Resig over Function prototypes eens. Kort en erg duidelijk. http://ejohn.org/apps/learn/#64

[.oisyn]

ZeroXT schreef op vrijdag 19 november 2010 @ 10:50:
Beste tweakers

Ik wil graag een functie oproepen die een functie uit een andere functie oproept. Is lekker te begrijpen dit dus even hier een stukje code:

JavaScript:

function A()
{
    this.variabel = 'test';
    
    this.functie = function()
    {
        return this.variabel;
    }
}

A.prototype.B = function()
{
    this.functie2 = function()
    {
        return this.functie();
    }
}

var a = new A();

Het antwoord heb je al, maar wellicht is het nuttig om even goed te kijken wat je hier nu gedaan hebt. Je hebt een constructor functie A, die in een nieuw A object een nieuwe functie "functie" maakt.

Vervolgens definieer je op het prototype van A een functie genaamd B. De aanroep van B() definieert vervolgens een functie "functie2". Omdat je het prototype van A verandert krijgt elke instantie van A de functie B mee.

Oftewel:

JavaScript:

var a = new A();  // a heeft nu "functie" en "B";
a.functie();
a.B(); // na deze aanroep heeft a ook een "functie2".
a.functie2();

Wat je feitelijk wilde was dat die B eigenlijk je functie2 was. Oftewel:

JavaScript:

A.prototype.functie2 = function()
{
    this.functie();
}

var a = new A();
a.functie2();

Het verschil tussen deze code en die van crisp is dat er hier geen overerving plaats vindt. Bij crisp's code echter zal 'a instanceof B' true geven

[ Voor 12% gewijzigd door .oisyn op 19-11-2010 14:25 ]

[ZeroXT]

@Tjoekbezoek:
Bedankt voor de link. Ik zal het zeker bekijken!

@.oisym:
Ook jij bedankt voor de heldere uitleg. Ik ging zelf al kijken wat er nu precies is gebeurd en met je uitleg erbij snap ik het een stuk beter. Ik ben al enig tijd meer informatie aan het verzamelen over prototyping.


Nu rest mij nog wel een vraag waarvan ik de oplossing niet kan vinden.

JavaScript:

function A()
{
    this.element = document.getElementById('element');
}

function B()
{
    var self = this;
    
    this.construct = function()
    {
        this.element.addEventListener('click', function() { self.update(); }, false);
    }
    
    this.update = function()
    {
        alert(this.element);
    }
}

A.prototype = new B();

var a = new A();
    a.construct();

Ik verlies dus volgens mij opnieuw mijn scope want op moment dat ik klik op het element dan krijg komt er in de alert 'undefined' te staan.

Aan de hand van [url="http://www.packtpub.com/article/using-prototype-property-in-javascript"]dit document[/urll] ben ik achter het de functie __proto__ gekomen maar ik weet niet of dit wel de oplossing zou kunnen zijn.

[X-Lars]

Waarschijnlijk voer je die Javascript uit voordat het element in de DOM beschikbaar is (voor het "load" of "DOMContentLoaded" event). Dus het lijkt niet een probleem w.b. de scope. Ook al klik je later op een button, die constructor van A is al uitgevoerd op het moment dat je hem instantieert..