A bunch of examples of OO in JS

oo-stuff.js

2.1.1

[EX. 1]

var double = function(a) {
    return a * 2;
}
> double(21)
42
> typeof double
function
> var a = new double(2);
> typeof a
object

[EX. 2]
var triple = function(val) {
    this.val = val;

    this.resultat = function() {
        return this.val * 3;
    }
}
> var b = new triple(3)
> typeof b
object
> b.resultat()
9
> b.val
3

[EX. 3]
// les attributs de la classe triple vu ci-dessus sont privilégiés
// on peut y accéder via une instance et on verra plus tard qu'on
// peut en hériter
> b.val
3
> b.resultat()
9

[EX 3.5]

var quadruple = function(val) {
    this.val = val;
}

quadruple.prototype.resultat = function() {
    return this.val * 4;
}

> var q = new quadruple(4)
> q.resultat()
16


[EX. 4]
var calculs = function() {
    // méthode privée qui prend en argument un entier
    // et le retourne à la puissance 2
    var puissance2 = function(a) {
        return a * a;
    }

    // méthode publique qui prend en argument un entier
    // et le retourne à la puissance 4 en utlisant la méthode
    // privée puissance2
    this.puissance4 = function(a) {
        return puissance2(a) * puissance2(a);
    }
}
> var c = new calculs();
> c.puissance4(2)
16
> c.puissance2(5)
TypeError: Object [object Object] has no method 'puissance2'

[Ex 4.5]
var MaClasse = function() {
    MaClasse.i = 0;

    this.incremente = function() {
        MaClasse.i += 1
    }
    
    this.valeur = function() {
        return MaClasse.i;
    }
}

> var m = new MaClasse()
> var n = new MaClasse()
> m.valeur()
0
> n.valeur()
0
> m.incremente()
> m.incremente()
> m.incremente()
> m.valeur()
3
> n.valeur()
3
> n.incremente()
> n.valeur()
4
> m.valeur()
4

[Ex. 5]
var Personne = function(prenom, age) {
    this.prenom = prenom
    this.age = age
    
    this.hello = function() {
        return "bonjour, je m'appelle " + this.prenom
    }
}
> var elisha = new Personne('Elisha', 27);
> elisha.hello()
bonjour, je m'appelle Elisha

var Actrice = function(prenom, age) {
    var tmp = new Personne(prenom, age)
    // on étend la classe avec les méthodes et attributs de Personne
    for(var membre in tmp) {
        this[membre] = tmp[membre]
    }
    
    // on ajoute nos méthodes et attributs
    this.metier = function() {
        return "Je m'appelle " + this.prenom + " et je suis une actrice"
    }

    this.sexe = 'F'
}

> var scarlett = new Actrice('Scarlett', 24)
> scarlett.hello()
bonjour, je m'appelle Scarlett
> scarlett.metier()
Je m'appelle Scarlett et je suis une actrice

[Ex. 6]
// Classe Personne
var Personne = function(prenom) {
    // attribut public
    this.prenom = prenom;

    // méthode publique
    this.hello = function() {
        return "Bonjour, je suis " + prenom
    }
    
    // attribut privé
    var mot_de_passe_internet = "12345"
}

// Classe Citoyen qui hérite de la classe Personne
var Citoyen = function(prenom) {
    // on construit la classe mère
    var tmp = new Personne(prenom);
    
    // on "hérite" des méthodes et attributs
    for (var membre in tmp) {
        this[membre] = tmp[membre];
    }

    // on surcharge une méthode
    this.hello = function() {
        return "Bonjour, je suis un citoyen et je m'appelle " + prenom
    }
    
    this.mdp = function() {
        return mot_de_passe_secret;
    }
}
> var jean = new Citoyen("Jean")
> jean.hello()
Bonjour, je suis un citoyen et je m'appelle Jean

[Ex. 7]
> jean.mdp()
ReferenceError: mot_de_passe_secret is not defined

[Ex.8]
var objet = {
    clef:   "valeur",
    fonction: function() {
        return "implementation"
    },
    tableau:    ['v', 'a', 'l', 'e', 'u', 'r', 's'],
    objet2: {
        clef1: "valeur 1",
        bonjour: function() {
            return "hello"
        }
    }
}

> typeof objet
object
> objet.clef
valeur
> objet.fonction()
implementation
> typeof objet.objet2
object
> objet.objet2.bonjour()
hello

[Ex. 9]
> objet['clef']
valeur
> objet['objet2']['bonjour']()
hello

[Ex. 10]
var test = function(arg1) {
    return typeof arg1
}
// On peut appeller la fonction avec n'importe quel type d'argument
// chaîne de caractères
> test('test')
string
// entier
> test(123)
number
// objet
> test({clef: 'valeur'})
object
// même avec plus d'arguments que la définition ne demande
> test(1, 2)
number // ça ne teste que le premier
// ou avec moins
> test()
undefined

// On peut définir le comportement selon les arguments passés
var toJSON = function(arg) {
    if (!arg) { // pas de variable passée 
        return "Pas d'argument"
    }

    var type = typeof arg

    if (type == "number") {
        return arg
    }
    
    if (type == "string") {
        return '"' + arg + '"'
    }
    
    if (type == "object") {
        var res = "{"
        
        for (var clef in arg) {
            if (res.length > 1) {
                res += ", "
            }
            
            res += clef + ": " + toJSON(arg[clef])
        }
        
        return res + "}"
    }
}

> toJSON()
Pas d'argument
> toJSON(123)
123
> toJSON("Bonjour")
"Bonjour"
> toJSON({hello:  "Bonjour",
          nombre: 123})
{hello: "Bonjour", nombre: 123}


// On peut même gérer un nombre infini d'arguments via la variable arguments
var concat = function() {
    var res = ""
    
    for (var a in arguments) {
        res += arguments[a]
    }
    
    return res
}

> concat("Bonjour", " ", "tout le monde ", 123)
Bonjour tout le monde 123

[Ex. 11]
var stringToJSON = function(str) {
    eval("var res = " + str);

    return res;
}

> var tmp = stringToJSON("{clef: 'Valeur', chiffre: 2}")
> tmp.clef
Valeur
> tmp.chiffre
2

[Ex. 12]

var mon_namespace = new (function() {
    // une fonction dans mon namespace
    this.hello = function() {
        return "Bonjour";
    }
    
    // une classe qui appartient à mon namespace
    this.Personne = function(prenom) {
        this.prenom = prenom
        
        this.getPrenom = function() {
            return this.prenom
        }
    }
    
})()

> mon_namespace.hello()
Bonjour
> var d = new Personne('Deuce')
ReferenceError: Personne is not defined
> var w = new mon_namespace.Personne('Willou')
> w.getPrenom()
Willou

[Ex. 13]
// Ajout d'une classe en utilisant mon_namespace
// déclaré plus haut
mon_namespace.Cercle = function(rayon) {
    this.rayon = rayon
    
    this.diametre = function() {
        return 2 * Math.PI * rayon
    }
}

// Ce qui était déclaré dans le namespace est toujours là
> mon_namespace.hello()
Bonjour
// La classe Cercle est également dans le namespace
> var c = new mon_namespace.Cercle(3)
> c.diametre()

[Ex. 14]
var Personne = function(prenom) {
    this.prenom = prenom;
    
    this.hello = function() {
        return "Bonjour"
    }
}

> var ben = new Personne('Benoit')
> var joel = new Personne('Joel')
> ben.hello()
Bonjour
> joel.hello()
Bonjour

// redéfinition de la méthode hello
ben.hello = function() {
    return "Salut";
}
> ben.hello()
Salut
// mais ça ne s'appliquera pas sur les autres instances de Personne
> joel.hello()
Bonjour
// ni sur les nouvelles instances
> var g = new Personne('Gauthier')
> g.hello()
Bonjour

[Ex. 15]
var Personne = function(prenom) {
    this.prenom = prenom;
}

Personne.prototype.hello = function() {
    return 'Bonjour';
}

> var s = new Personne('Stef')
> s.hello()
Bonjour

// redéfinition de la méthode hello de la classe Personne
// on accède à la définition de la méthode via l'attribut prototype
> Personne.prototype.hello = function() {
    return "Salut"
}
// ça s'applique aux nouvelles instances
> var r = new Personne('Rob')
> r.hello()
Salut
// comme aux précédentes
> s.hello()
Salut

[Ex. 16]

// Exemple avec un attribut statique :

// la classe :
var Singleton = function () {
    this.valeur = 15
}

// l'attribut statique qui représente l'instance
Singleton.__instance = null

// la méthode statique pour récupérer l'instance
Singleton.instance = function() {
    if (Singleton.__instance === null) {
        Singleton.__instance = new Singleton()
    }
    
    return Singleton.__instance;
}

var s = Singleton.instance()
s.valeur
s.valeur = 17

var t = Singleton.instance()
t.valeur

[Ex. 17]
var Singleton = {
    valeur: 15
}

[Ex. 18]
var MaClasse = function(val) {
    var attr_prive_1 = val
    var attr_prive_2 = 0
    var attr_prive_3 = 0
    
    var methode_privee_1 = function() {
        return attr_prive_1 * 2
    }
    
    var methode_privee_2 = function() {
        attr_prive_2 = methode_privee_1()
    }
    
    var methode_privee_3 = function() {
        methode_privee_2()
        attr_prive_3 = attr_prive_2
    }
    
    var get_attr_prive_3 = function() {
        return attr_prive_3;
    }
    
    // On ne retourne que l'interface sous la forme d'un objet
    return {
        // Les membres methode_privee_3 et attr_prive_3
        // seront accessibles publiquement avec les
        // identifiants suivants
        calcul: methode_privee_3,
        valeur: get_attr_prive_3
    }
}

[Ex. 20]
// on crée le namespace
YAHOO.namespace('mon_namespace')

// le namespace est créé dans le namespace YAHOO pour
// éviter les effets de bord et on peut y créer des classes
// de façon habituelle
YAHOO.namespace.maclasse = function(val) {
    this.attr1 = val
    
    this.meth1 = function() {
        return this.attr1
    }
}

// On peut également créer des sous namespace en séparant leurs noms
// par un point
YAHOO.namespace('mon_namespace.mon_sous_namespace.mon_sous_sous_namespace')

[Ex. 21]
YAHOO.namespace("test");
 
YAHOO.test.Class1 = function(info) {
    alert("Class1: " + info);
};
 
YAHOO.test.Class1.prototype.testMethod = function(info) {
    alert("Class1: " + info);
};
 
YAHOO.test.Class2 = function(info) {
    // appelle le constructeur parent
    // YUI ajoute l'attribut "superclass" à la classe qui hérite
    // qui permet d'accéder à la classe parente
    YAHOO.test.Class2.superclass.constructor.call(this, info);
    alert("Class2: " + info);
};
 
// Class2 hérite de Class1.
YAHOO.lang.extend(YAHOO.test.Class2, YAHOO.test.Class1);

[Ex. 22]
// Source de l'exemple :
//   http://mootools.net/docs/core/Class/Class

var Animal = new Class({
    // intialize est la méthode constructeur
    // avec mootools, on a l'impression qu'elle est
    // n'est pas directement liée à la définition 
    // de la classe
    initialize: function(age){
        this.age = age;
    }
});

var Cat = new Class({
    // Pour étendre une classe on utilise l'attribut extends
    // ou alors on aurait également pu écrire var Cat = Animal.extend({ initialize... }) 
    // voir : http://warpspire.com/tipsresources/interface-scripting/mootools-javascript-classes/
    Extends: Animal,
    initialize: function(name, age){
        this.parent(age); //will call initalize of Animal
        this.name = name;
    }
});

var myCat = new Cat('Micia', 20);

[Ex. 23]

// Source de l'exemple :
//   http://prototypejs.org/learn/class-inheritance

// Encore une fois, on utilise une classe appellée Class
var Person = Class.create({
  // le constructeur
  initialize: function(name) {
    this.name = name;
  },
  // définition d'une méthode
  say: function(message) {
    return this.name + ': ' + message;
  }
});

// Héritage
//  Nouvelle classe       // classe mère
var Pirate = Class.create(Person, {
  // (re)définition des membres
  say: function($super, message) {
    return $super(message) + ', yarr!';
  }
});

> var john = new Pirate('Long John');
> john.say('ahoy matey');
"Long John: ahoy matey, yarr!"

[Ex. 24]
// Exemple issu de http://docs.dojocampus.org/dojo/declare

// création de la classe localThinger
var localThinger = dojo.declare(null, {
  count: 100,
  // le constructeur s'appelle constructor
  constructor: function(args){
    dojo.mixin(this, args);
  }
});

// héritage
dojo.declare("my.OtherThinger", [my.Thinger], {
  divisor: 5,
  constructor: function(args){
    this.total = this.count / this.divisor;
  }
});

// Remove an element from an object
var kik = {"a": "lalala", "b": {dom: window}, "c": 42};
> undefined
kik
> Object
    a: "lalala"
    b: Object
    c: 42
    __proto__: Object
delete kik['a']
> true
kik
> Object
    b: Object
    c: 42
    __proto__: Object