Type objet VS prototype

by yannberges

HTML

<html>
  <head></head>
  <body>
    <div>
      <p>
        johnny.identity : <span id="jonny_identity"></span>
      </p>
      <p>
        mireille.identity : <span id="mireille_identity"></span>
      </p>
      <p>
        johnny.identityProto : <span id="jonny_identityproto"></span>
      </p>
      <p>
        mireille.identityProto : <span id="mireille_identityproto"></span>
      </p>
    </div>
  </body>
</html>

JavaScript

function extend(target, source) {
  for(var propertyObject in source) {
    if(source.hasOwnProperty(propertyObject)) {
      target[propertyObject] = source[propertyObject];
    }
  }
}

// ********* [PARTIE FRAMEWORK] *********
// "Component" est une représentation d'une classe délivrée par un framework 
// pour faire de l'héritage par prototype
var Component = function() {};

Component.prototype = {
  /**
   * Exemple de méthode hérité
   */
  format: function(value) {
    return 'Je me nomme ' + value + ' !';
  }
};

/** 
 * On attache notre principe d'héritage à notre composant de base via une 
 * méthode "extend" qui elle sera utilisée pour l'initialisation d'objets
 */
Component.extend = function(protoObject) {
  // On fait appel à la méthode "init" comme "constructor" du nouvel objet
  var ChildComponent = protoObject.init;

  // Le composant hérite des propriétés de base
  extend(ChildComponent.prototype, Component.prototype);

  // Le composant est initialisé avec les propriétés qui lui sont propres
  // ou pour modifier des propriétés de base
  extend(ChildComponent.prototype, protoObject);

  return ChildComponent;
};
// ********* [/PARTIE FRAMEWORK] *********

// Déclaration d'un composant Person hérité de Component
var Person = Component.extend({
    // Propriété de type objet
    identityProto: {
      name: 'No name'
    },

    /** 
     * Implémentation d'une fonction init requise par le "framework"
     */
    init: function(name) {
      this.identity = {
        name: 'No name'
      };
      
      this.setName(name);
    },

    /**
     * Exemple de méthode spécifique au composant 
     */
    setName: function(name) {
      this.identity.name = this.format(name);
      this.identityProto.name = this.format(name);
    }
  });

var johnny = new Person('Johnny'),
    mireille = new Person('Mireille');

document.getElementById('jonny_identity').innerHTML = johnny.identity.name;
document.getElementById('mireille_identity').innerHTML =...