JavaScript : Qu’entend-on par .extend et .prototype utilisé pour ?

Question

Je suis relativement nouveau sur JavaScript et continuer à voir .extend et .prototype dans les bibliothèques tierces que j’utilise. J’ai pensé qu’il avait à faire avec la bibliothèque javascript Prototype, mais je commence à penser que ce n’est pas le cas. À quoi elles servent ?

Answer 1

Javascript est l'héritage est le prototype de la base, donc vous étendre les prototypes des objets tels que la Date, les Mathématiques, et même votre propre.

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

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

Dans l'extrait ci-dessus, de définir une méthode pour tous les objets Date ( existantes et nouvelles ).

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

Si vous pouvez faire quelque chose comme:

extend( Fighter, Human )

Et l' Fighter constructeur/objet hériteront le prototype de l' Human, si l'on définit des méthodes telles que live et die sur Human alors Fighter également hériter de ceux-ci.

Answer 2

.extend() est ajoutée par de nombreuses bibliothèques tierces pour le rendre facile pour créer des 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 appeler ça comme ça) d'un objet, par l'ajout de méthodes d'un objet prototype (vous voyez beaucoup dans les bibliothèques à ajouter à la Chaîne, la Date, les Mathématiques, ou la même Fonction) ces méthodes sont ajoutées à chaque nouvelle instance de l'objet.

Answer 3

L' extend méthode par exemple en jQuery ou PrototypeJS, des copies de toutes les propriétés de la source à la destination de l'objet.

Maintenant au sujet de l' prototype de la propriété, il est un membre de la fonction des objets, il fait partie de la langue de base.

Toute fonction peut être utilisée en tant que constructeur, pour créer de nouvelles instances de l'objet. Toutes les fonctions sont cette prototype de la propriété.

Lorsque vous utilisez l' new opérateur sur un objet de fonction, un nouvel objet sera créé, et il 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

Answer 4

Javascript héritage semble être comme un débat ouvert partout. Il peut être appelé "Le cas curieux de langage Javascript".

L'idée est qu'il existe une classe de base, puis d'étendre la classe de base pour obtenir un héritage-comme fonctionnalité (pas complètement, mais quand même).

L'idée est d'obtenir ce prototype signifie vraiment. Je n'ai pas jusqu'à ce que j'ai vu John Resig du code (proche de ce que l' jQuery.extend t) a écrit un morceau de code qui le fait, et il prétend que base2 et d'un prototype de bibliothèques ont été 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 sont en train de faire le travail. Tout d'abord, vous parcourez les propriétés et les ajouter à l'instance. Après cela, vous créez un constructeur pour plus tard, pour être ajoutée à l'objet.Maintenant, les principaux axes sont:

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

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

Vous premier point de l' Class.prototype souhaité prototype. Maintenant, l'ensemble de l'objet a changé, ce qui signifie que vous avez besoin de forcer la mise en page vers son propre.

Et l'exemple d'utilisation:

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

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

Lire plus à ce sujet ici au Javascript Héritage par John Resig après.