[Javascript] Prototype probleem

Lees mijn post in dit topic eens door:

[js] objecten en scope

Ik kan je verder ook aanraden eens op te zoeken wat het verschil tussen lokale en globale variabelen is in js (en wat voor effect het keyword 'var' daar op heeft).

[ Voor 48% gewijzigd door Michali op 16-10-2006 14:36 ]

maandag 16 oktober 2006 20:08

Acties:

maandag 16 oktober 2006 20:17

Topicstarter

ik wordt niet helemaal begrepen denk ik ..
evengoed interessant topic, heeft nu een plaatsje in mijn favorieten

heb het topic bestudeert maar bied toch geen oplossing voor het probleem.

het probleem is eigenlijk dat ik wel mooi alles in classes heb maar als ik die via een losse link
wil aanroepen niet meer verder kan met het keyword this omdat ik die simpelweg op dat moment
kwijt ben. en dan bedoel ik dus de constructor van mijn object (als ik dat zo goed zeg)

ik wil dus eigenlijk bereiken om via een losse functie weer verder te gaan met een class die weer
met het goede object verder gaat

Acties:

Clay

cookie erbij?

Toch staat daar het antwoord bij, doe ipv wat je hebt bv:

JavaScript:

var self = this;
myElement.oncontextmenu = function() { 
   self.editTableElement(); 
}

en dan draait de editTableElement in de scope van de tableElement instantie.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 16 oktober 2006 20:58

Acties:

maandag 16 oktober 2006 21:47

Topicstarter

hm misschien even ander voorbeeldje

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--


    function createElement() {
        
        var self = this;

        element = document.createElement("TABLE");
        document.body.appendChild(element);

        element.border = '1';

        row = element.insertRow();
        cell = row.insertCell();
        cell.innerHTML = '&nbsp;';

        

    }

    createElement.prototype.howMany = function() {
        alert(this.rows.length);
    }
    
    window.onload = function() {
        xref = new createElement;
    }




//-->
</SCRIPT>
</HEAD>

<BODY>

<a href="#" onclick="xref.howMany();">count rows</a>
</BODY>
</HTML>

als ik nu klik en van xref de functie howmany op vraag is hij het gewoon kwijt .. ?

Acties:

maandag 16 oktober 2006 21:49

Topicstarter

omg .. excuses .. hoe kon ik dat over het hoofd zien

had een var niet toegekend aan het object dus dan kent hij hem ook niet
het had moeten zijn:

JavaScript:

1	this.element = document.createElement("TABLE");

Acties:

Hij is helemaal niets kwijt. Je code klopt gewoon niet. Doe maar eens een alert(1); in howMany. Welkom in JS debuggen in Internet Explorer land.

maandag 16 oktober 2006 21:59

Acties:

maandag 16 oktober 2006 22:15

Topicstarter

dat klopt ook wel michali maar als ik dan bijv this.element.rows.length doe, dan weet hij niet
waar hij het moet zoeken

js werk doe ik trouwens in firefox

[ Voor 14% gewijzigd door klapvee op 16-10-2006 22:00 ]

Acties:

dinsdag 17 oktober 2006 07:57

Topicstarter

ok toch nog een fout ..

JavaScript:

    function createElement(typeElement) {
        
        this.formElement = document.createElement(typeElement);      
        document.getElementById('editField').appendChild(this.formElement);

        this.formElement.border = '1';
        
        

        row = this.formElement.insertRow(0);
        cell = row.insertCell(0);
        cell.innerHTML = '&nbsp;';

        this.formElement.oncontextmenu = function() {
        
            document.getElementById('tableMenu').style.display = 'inline';
            
            return false;
        }

        

    }

    createElement.prototype.testrij = function() {
        createMethod(this.createRow);
    }

    createElement.prototype.createRow = function() {
        alert(this.formElement);
    }


    function createMethod(funcRef) {
        funcRef();
    }
        
    createElement.prototype.howMany = function() {
        alert(this.formElement.rows.length);
    }
    


    function showMenu(obj) {

        currentUpdateElement = obj;
        

        return false;
    }


    
    function createNewTable() {
        
        var xref = new createElement("TABLE");
        xref.testrij();

    }

ik heb goed gekeken hoe ik toch die functies in die scope kan houden en misschien dat ik
toch nog iets fout doe. als ik nu createNewTable() aanroep komt hij met undefined terug uiteindelijk
terwijl ik hem toch in de klasse heb neergezet ?

Acties:

Lees mijn post in dat andere topic nou nog eens goed.

JavaScript:

1
2
3

createElement.prototype.testrij = function() {
    createMethod(this.createRow);
}

Dan weet waarom je deze functie zo moet schrijven:

JavaScript:

createElement.prototype.testrij = function() {
    var self = this;
    createMethod(
        function()
        {
            self.createRow();
        }
    );
}

dinsdag 17 oktober 2006 08:40

Acties:

dinsdag 17 oktober 2006 09:13

Topicstarter

Het is iets anders maar komt bijna op hetzelfde neer michali, ik heb zeer zeker wel wat gehad aan je
post, zeer leerzaam!

maar zo is het uiteindelijk dus gelukt: http://www.sourceshock.com/class.html

je kan nu tabellen genereren en die met een onclick activeren zodat je daar weer met oncontextmenu
rijen kan aanmaken en cellen kan splitsen

[ Voor 25% gewijzigd door klapvee op 17-10-2006 08:42 ]

Acties:

Fijn dat het werkt. Dan heb ik toch nog een vraag. Heb je een goede reden waarom createMethod en createCells buiten de class moeten vallen (losse functies zijn dus)? Is dit geen betere oplossing?

JavaScript:

function createElement(typeElement) {

    this.formElement = document.createElement(typeElement);      
    document.getElementById('editField').appendChild(this.formElement);

    this.formElement.border = '1';


    var self = this;

    this.formElement.oncontextmenu = function() {


        document.getElementById('tableMenu').style.display = 'inline';
        return false;
    }

    this.formElement.onclick = function() {
        window.currentUpdater = self;
    }



}

//sets the current object in the scope of the class
createElement.prototype.setMethod = function() {
    setCurrentUpdater(this);
}

createElement.prototype.testrij = function() {
    this.createMethod();
}

createElement.prototype.createMethod = function() {
    row = this.formElement.insertRow(0);
    cell = row.insertCell(0);
    cell.innerHTML = '&nbsp;';
}

createElement.prototype.splitCells = function() {
    this.createCells();
}

createElement.prototype.createCells = function() {
    len = this.formElement.rows.length;
    for (i=0;i< len;i++ ){
        cell = this.formElement.rows[i].insertCell(1);
        cell.innerHTML = '&nbsp;';
        cell.oncontextmenu = function() {
            showFormfields();
        }
    }
}

createElement.prototype.createRow = function() {
    alert(this.formElement);
}

createElement.prototype.howMany = function() {
    alert(this.formElement.rows.length);
}

Een naam voor een class kun je trouwens het beste kiezen door in te denken wat het voor moet stellen, niet wat het moet gaan doen. createElement is een handeling en geen echt object. ElementBuilder zou dus een betere naam zijn. Geeft aan wat het voor moet stellen, en daarmee gelijk ook wat het doet.

dinsdag 17 oktober 2006 20:27

Acties: