[JS] OOP

[xoniq]

EDIT: Probleem is opgelost. Opeens werkt het gewoon...

Goedenavond,

Ik ben bezig met een projectje om mezelf OOP JavaScript aan te leren.
In PHP beheers ik dit uitstekend, alleen in JS heb ik hier erg weinig ervaring mee, en dat gaat daar heel anders.
Er klopt iets niet aan deze code, maar ik weet niet precies wat...

main.load.js

JavaScript:

function test(){

    this.load = function(){
        
        alert( 'test.load' );
        
    }
    
}

// Define global object.
// This object will be extended by other JS-files.
var test = new test();

test.icons.js

JavaScript:

function icons(){
    
    this.load = function(){
        
        alert( 'test.icons.load' );
        
    }
    
    this.display = function(){
        
        alert( 'test.icons.display' );
        
    }
    
}

// Extend the 'test'-object.
test.icons = new icons();

test.notify.js

JavaScript:

function notify(){
    
    this.show = function(){
        
        alert( 'test.notify.show' );
        
    }
    
    this.hide = function(){
        
        alert( 'test.notify.hide' );
        
    }
    
}

// Extend the 'test'-object.
test.notify = new notify();

In de head van mijn HTML pagina staat:

HTML:

<script src="js/test.load.js"></script>
<script src="js/test.icons.js"></script>
<script src="js/test.notify.js"></script>

En als laatste, wat werkt er niet:

Als ik via FireFox, met FireBug bijvoorbeeld:

test.load()

invoer, dan krijg ik netjes een alert.
Als ik daarna dan test.icons.load() doe, dan krijg ik een fout in firebug.
En het rare is, als ik eerst test.icons.load() doe, en daarna test.load(), dan krijg ik die fout ook.
Ik kan dus niet 2x de test object aanroepen...

EDIT: Probleem is opgelost. Opeens werkt het gewoon...

[ Voor 4% gewijzigd door xoniq op 22-01-2010 20:21 ]

[djluc]

ctrl+f5 gedaan o.i.d?

[Juup]

Dit is overigens niet de manier om OOP in js te doen. Zo wel:

JavaScript:

function test(){ 
} 
test.prototype.load = function(){ 
        alert( 'test.load' ); 
} 

[xoniq]

Juup schreef op vrijdag 22 januari 2010 @ 21:22:
Dit is overigens niet de manier om OOP in js te doen. Zo wel:

JavaScript:

function test(){ 
} 
test.prototype.load = function(){ 
        alert( 'test.load' ); 
} 

Vanwaar die .prototype?
Want ik gebruik verder helemaal geen framework. Dit is from scratch...
Heb je misschien nadere toelichting?

[CH4OS]

jvsjmedia.nl schreef op vrijdag 22 januari 2010 @ 21:34:
Vanwaar die .prototype?
Want ik gebruik verder helemaal geen framework. Dit is from scratch...
Heb je misschien nadere toelichting?

Ben ik ook wel benieuwd naar, want op de inspringing na, zie ik helemaal geen verschil.

[Juup]

prototype is niet alleen een library voor js maar ook een native keyword.

Je gebruikt prototype voor instance methods.

Edit: goede intro: https://developer.mozilla...bject-Oriented_JavaScript

[ Voor 29% gewijzigd door Juup op 22-01-2010 21:47 ]

[pieturp]

Je hoeft helemaal geen "prototype" te gebruiken hoor. Met "new" maak je een nieuwe instance van een object. Op dat moment heb je dus een klasse en een instance. Dat noem ik al gewoon OOP.
Overigens is 't wel zo netjes om objecten, in tegenstelling tot functies met een hoofdletter te beginnen.

[Juup]

pieturp schreef op zaterdag 23 januari 2010 @ 17:40:
Je hoeft helemaal geen "prototype" te gebruiken hoor. Met "new" maak je een nieuwe instance van een object. Op dat moment heb je dus een klasse en een instance. Dat noem ik al gewoon OOP.
Overigens is 't wel zo netjes om objecten, in tegenstelling tot functies met een hoofdletter te beginnen.

De vraag is hoe je (instance) methods definieert.

[pieturp]

JavaScript:

// klasse definiëren:
function Person(){

    // method:
    this.setName = function(name){
        this.name = name;
    }

    // nog een method:
    this.getName = function(){
        return this.name;
    }
}

//... en een instance maken:
var uncle = new Person();
uncle.setName('Joe');

alert(uncle.getName());

Of begrijp ik je vraag niet?

[tonyisgaaf]

Of voor de mensen die niet zo van "new" houden:

JavaScript:

function Person() {
    var name = "";
    
    return {
        setName: function(newName) {
            name = newName;
        },
        getName: function() {
            return name;
        }
    }
}

var uncle = Person();
uncle.setName('Joe');

alert(uncle.getName());

edit: 't Was ff zoeken (de developer.yahoo.com site is redelijk onoverzichtelijk geworden), maar van Crockford heb ik een hoop geleerd:
http://developer.yahoo.ne...ockford_advanced_jav.html

[ Voor 24% gewijzigd door tonyisgaaf op 25-01-2010 18:12 ]

[pieturp]

Of voor de mensen die niet zo van "new" houden:

Of van "this"

Maar inderdaad: Crockford is zeker 't lezen waard. Vooral zijn JavaScript: The Good Parts

[R4gnax]

Of loop eens door de tutorials / learning site van John Resig (maker van jQuery) heen. Is ook wel aardig:
http://ejohn.org/apps/learn/

Dan kom je er in tutorial 10 achter dat het gebruik van het prototype keyword heel wat anders in houdt dan het definiëren een 'klasse' met this en new.

Neem deze nou eens:

JavaScript:

function Test(){
  this.run = function(){ return true; }
}

Test.prototype.run = function(){ return false; }

var myTest = new Test();
alert(myTest.run());

Wat komt daar uit en waarom? Als je dat uit kunt leggen, snap je het verschil.