Programmation Orientée Objet
Javascript, objet et prototype

Retour sur les objets javascript

container d'informations
un objet contient des propriétés (clef, valeur)
les clefs sont des chaînes de caractères
les valeurs sont une expression javascript quelconque
création d'un objet et utilisation des propriétés:

          // notation littérale d'un objet javascript
          var myObj = {};
          // idem en positionnant une propriété
          var otherObj = {property: 4};
          // plusieurs propriétés : ',' comme séparateur
          var box = { height: 4, width: 12, length: 14, "# of faces": 6};

accéder aux propriétés d'un objet : obj.property ou obj['property']
obj.property : le nom de la proriété ne doit pas contenir d'espaces
obj['property]` : permet d'utiliser une variable contenant le nom de la propriété

          // en lecture
          box.width; // -> 12
          var prop = 'length';
          box[prop]; // -> 14
          // en écriture
          box.color = "white";
          box['# of faces'] = 6;

effacer une propriété

          box.color; // -> "white"
          delete box.color; // -> true
          delete box.pinkbunny; // -> true !!

Fonction dans un objet javascript

une propriété d'un objet javascript peut être une fonction

          box.volume = function(height, width, length){
            return height * width * length;
          };
          // appel
          box.volume(2, 4, 6); // -> 48

une fonction appelée sur un objet peut référencer l'objet dans son corps avec this.

          box.volume = function(){
            return this.height * this.width * this.length;
          };
          // appel
          box.volume(); // -> 672

this est lié lors de l'appel de la fonction à l'objet sur lequel la fonction est appelée !!!

          var volume = box.volume;
          // appel de la fonction volume sur le scope global
          volume(); // -> NaN !!!!!
          var height=4, length=4, width=4;
          volume(); // -> 64
          // forcer le contexte d'évaluation : call/apply
          volume.call(box); //-> 672

f.call(context, myArg)
f.apply(context, [myArgs])

Objet global

node.js : global
navigateur : window

Chaque processus javascript dispose d'un objet global qui lui permet de stocker la référence à toutes les définitions.

Quand this est utilisé dans le corps d'une fonction, sa valeur est déterminée lors de l'appel:

object.func() : this référence object
func() : this référence l'objet global

Programmation Orientée Objet en Javascript

Javascript ne dispose pas de la notion de classe d'objets.

Mais une simple fonction peut servir de constructeur pour obtenir un objet initialisé :

          function Pet(name){
            this.name = name;
          }
          
          var yellowCat = new Pet("Garfield"); // {name: Garfield}
          yellowCat instanceof Pet;   // true
          yellowCat instanceof Array; // false
          
          // default : constructor return this (the object)
          // return in a constructor => danger !
          
          function Cat(name){
            return new Pet(name);
          }
          
          var meow = new Cat("Felix");
          meow instanceof Cat // false !
          meow instanceof Pet // true

Héritage

          function Pet(name){
            this.name = name;
            this.say = function(){
              return "meooow";
            }
          }
          var meow = new Pet("Felix"); //{ name: 'Felix', say: [Function] }
          meow.say(); // "meooow"

tous les objets créés à partir de la fonction constructeur Pet ont la fonction say
la fonction est recopiée dans chaque objet : ce n'est donc pas de l'héritage

Factoriser des méthodes pour un ensemble d'objets

Java : une classe définit un ensemble de méthodes. Un objet (instance de la classe) accède aux méthodes
javascript : un objet a une propriété donnant son parent: __proto__ initialisé en recopiant l'objet prototype de son constructeur :

          function Pet(name){
            this.name = name;
          }
          
          Pet.prototype = {
            say: function(){
              return "meooow";
            }
          }
          
          var meow = new Pet("Felix"); // {name: 'Felix'}
          meow.say(); // "meooow"
          meow.__proto__ // {say: [Function]}

Prototype

un objet à un ensemble de propriétés (attributs ou fonctions)
un objet à une propriété spéciale, son prototype parent (__proto__), dont il hérite toutes les propriétés
un objet peut surcharger les propriétés de son parent
un constructeur est une fonction utilisée pour créer des objets, et a un objet prototype associé
quand un objet est créé, son parent __proto__ est initialisé avec l'objet prototype de son constructeur.

Héritage en javascript

          function Mammal(){
          }
          Mammal.prototype.breathe = function(){
            // inspire, expire, repeat until arrrggggghhhh
          }
          function Cat(){
          }
          Cat.prototype = new Mammal()
          // now cats can breathe too
          
          var felix = new Cat();
          felix.breathe();
          felix.__proto__ === Cat.prototype; // true
          felix instanceof Cat //true
          felix instanceof Mammal //true
          felix.__proto__.__proto__ === Mammal.prototype // true
          felix instanceof Object // true because
          Mammal.prototype instanceof Object // true

Chaîne prototypale

pour trouver une propriété (attribut/fonction) appelée sur un objet
1. propriété de l'objet
2. propriété du parent __proto__
3. propriété du parent du parent
4. on remonte jusqu'à Object.prototype

felix -> Cat.prototype -> Mammal.prototype -> Object.prototype

o instanceof Klass : true si Klass est dans la chaîne prototypale de o

Langage dynamique

          function Mammal(){
          }
          Mammal.prototype.breathe = function(){
            // inspire, expire, repeat until arrrggggghhhh
          }
          function Cat(){
          }
          Cat.prototype = new Mammal()
          // now cats can breathe too
          
          var felix = new Cat();
          felix.breathe();
          
          felix.walk()
          // TypeError: Object #<Mammal> has no method 'walk'
          
          // dynamically modifies all instances of Mammal
          Mammal.prototype.walk = function(){}
          felix.walk()

This && Fermeture fonctionnelle (closure)

          window.name = "Bob";
          function Person() {
              this.name = "Charles";
              this.books = ["OuiOui", "Fantomette", "Les 3 Mousquetaires"];
              this.hasRead = function(){
                  return this.books.map(function(n){
                      return this.name + " has read " + n;
                  });
              };
          }
          
          console.log(new Person().hasRead());

Solution : closure

          window.name = "Bob";
          function Person() {
              var self = this;
              this.name = "Charles";
              this.books = ["OuiOui", "Fantomette", "Les 3 Mousquetaires"];
              this.hasRead = function(){
                  return this.books.map(function(n){
                      return self.name + " has read " + n;
                  });
              };
          }
          
          console.log(new Person().hasRead());

Programmation Orientée Objet Javascript, objet et prototype