JavaScript: à quoi servent .extend et .prototype?

Je suis relativement nouveau dans JavaScript et je continue à voir .extend et .prototype dans les bibliothèques tierces que j'utilise. Je pensais que cela avait à voir avec la bibliothèque javascript Prototype, mais je commence à penser que ce n'est pas le cas. À quoi servent-ils?

L'héritage de Javascript est basé sur des prototypes, vous étendez donc les prototypes d'objets tels que Date, Math et même les vôtres personnalisés.

Date.prototype.lol = function() {
 alert('hi');
};

( new Date ).lol() // alert message

Dans l'extrait de code ci-dessus, je définis une méthode pour tous les objets Date (déjà existants et tous les nouveaux).

extend est généralement une fonction de haut niveau qui copie le prototype d'une nouvelle sous-classe que vous souhaitez étendre à partir de la classe de base.

Vous pouvez donc faire quelque chose comme:

extend( Fighter, Human )

Et le Fighterconstructeur / objet héritera du prototype de Human, donc si vous définissez des méthodes telles que liveet diesur HumanalorsFighter également hériter ceux -ci .

Clarification mise à jour:

"fonction de haut niveau" signifiant .extend n'est pas intégré mais souvent fourni par une bibliothèque telle que jQuery ou Prototype.

.extend()est ajouté par de nombreuses bibliothèques tierces pour faciliter la création d'objets à partir d'autres objets. Voir http://api.jquery.com/jQuery.extend/ ou http://www.prototypejs.org/api/object/extend pour quelques exemples.

.prototype fait référence au "modèle" (si vous voulez l'appeler ainsi) d'un objet, donc en ajoutant des méthodes au prototype d'un objet (vous le voyez souvent dans les bibliothèques pour ajouter à String, Date, Math ou même Function) ces méthodes sont ajoutés à chaque nouvelle instance de cet objet.

La extendméthode par exemple dans jQuery ou PrototypeJS , copie toutes les propriétés de la source vers l'objet de destination.

Maintenant à propos de la prototypepropriété, c'est un membre d'objets de fonction, cela fait partie du noyau du langage.

Toute fonction peut être utilisée comme constructeur , pour créer de nouvelles instances d'objet. Toutes les fonctions ont cette prototypepropriété.

Lorsque vous utilisez l' newopérateur avec sur un objet fonction, un nouvel objet sera créé et héritera de son constructeur prototype.

Par exemple:

function Foo () {
}
Foo.prototype.bar = true;

var foo = new Foo();

foo.bar; // true
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true

L'héritage Javascript semble être partout comme un débat ouvert. On peut l'appeler "Le cas curieux du langage Javascript".

L'idée est qu'il existe une classe de base et ensuite vous étendez la classe de base pour obtenir une fonctionnalité semblable à un héritage (pas complètement, mais quand même).

L'idée est d'obtenir ce que signifie vraiment le prototype. Je ne l'ai pas obtenu avant de voir le code de John Resig (proche de ce qui jQuery.extendfait) écrire un morceau de code qui le fait et il prétend que les bibliothèques base2 et prototypes étaient la source d'inspiration.

Voici le code.

    /* Simple JavaScript Inheritance
     * By John Resig http://ejohn.org/
     * MIT Licensed.
     */  
     // Inspired by base2 and Prototype
    (function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;

    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;

    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];

            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // Populate our constructed prototype object
    Class.prototype = prototype;

    // Enforce the constructor to be what we expect
    Class.prototype.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;

    return Class;
  };
})();

Il y a trois parties qui font le travail. Tout d'abord, vous parcourez les propriétés et les ajoutez à l'instance. Après cela, vous créez un constructeur qui sera ajouté ultérieurement à l'objet.Maintenant, les lignes clés sont:

// Populate our constructed prototype object
Class.prototype = prototype;

// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;

Vous pointez d'abord le Class.prototypevers le prototype souhaité. Maintenant, tout l'objet a changé, ce qui signifie que vous devez forcer la mise en page à la sienne.

Et l'exemple d'utilisation:

var Car = Class.Extend({
  setColor: function(clr){
    color = clr;
  }
});

var volvo = Car.Extend({
   getColor: function () {
      return color;
   }
});

Pour en savoir plus, cliquez ici sur Javascript Inheritance by John Resig 's post.

Certaines extendfonctions des bibliothèques tierces sont plus complexes que d'autres. Knockout.js par exemple en contient un minimalement simple qui ne possède pas certaines des vérifications effectuées par jQuery:

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

• .extends() créer une classe qui est un enfant d'une autre classe.
  dans les coulisses Child.prototype.__proto__définit sa valeur sur Parent.prototype
  ainsi les méthodes sont héritées.
  
• .prototype hériter des fonctionnalités de l'une à l'autre.
  
• .__proto__ est un getter / setter pour Prototype.