L'utilisation de "prototype" par rapport aux " cela en JavaScript?

Les exemples ont des résultats très différents.

Avant de regarder les différences, les points suivants doivent être notés:

• D'un constructeur prototype offre un moyen de partager des méthodes et des valeurs entre les instances via l'instance privée [[Prototype]] propriété.
• D'une fonction ce est défini par la façon dont la fonction est appelée, ou par l'utilisation de lier (non abordé ici). Lorsqu'une fonction est appelée sur un objet (par exemple,myObj.method()) puis ce à l'intérieur de la méthode références de l'objet. Où ce n'est pas définie par l'appel ou par l'utilisation de lier, la valeur par défaut de l'objet global (de la fenêtre dans un navigateur) ou en mode strict, reste indéfini.
• JavaScript est un langage orienté objet, c'est à dire que la plupart des valeurs sont des objets, y compris des fonctions. (Chaînes de caractères, nombres, et les booléens sont pas des objets.)

Voici donc les extraits de code en question:

var A = function () {
    this.x = function () {
        //do something
    };
};

Dans ce cas, la variable A est affectée une valeur qui est une référence à une fonction. Lorsque cette fonction est appelée à l'aide de A(), la fonction de ce n'est pas défini par l'appel, afin que la valeur par défaut de l'objet global et l'expression this.x est efficace window.x. Le résultat est qu'une référence à l'expression de fonction sur le côté droit est affecté à window.x.

Dans le cas de:

var A = function () { };
A.prototype.x = function () {
    //do something
};

quelque chose de très différent se produit. Dans la première ligne, la variable A est attribué une référence à une fonction. En JavaScript, toutes les fonctions, les objets ont une prototype propriété par défaut, il n'y a pas de code pour créer un A. prototype objet.

Dans la deuxième ligne, A. prototype.x est attribué une référence à une fonction. Cela va créer un x propriété si elle n'existe pas, ou assigner une nouvelle valeur si elle n'. Donc, la différence avec le premier exemple dans lequel l'objet x propriété est impliqué dans l'expression.

Est un autre exemple ci-dessous. Il est similaire à la première (et peut-être ce que tu voulais dire à propos de):

var A = new function () {
    this.x = function () {
        //do something
    };
};

Dans cet exemple, le new opérateur a été ajouté avant l'expression de fonction, de sorte que la fonction est appelée en tant que constructeur. Lorsqu'elle est appelée avec new, la fonction de ce est configuré pour faire référence à un Objet dont le [[Prototype]] propriété a la valeur de référence par le constructeur public prototype. Ainsi, dans l'instruction d'affectation, le x propriété sera créé sur ce nouvel objet. Lorsqu'il est appelé en tant que constructeur, une fonction retourne sa ce objet par défaut, donc il n'est pas nécessaire de séparer les return this; déclaration.

Pour vérifier que Un a un x propriété:

console.log(A.x) //function () {
                 //  //do something
                 //};

Cela est assez rare d'utiliser des nouveau depuis le seul moyen de référence est le constructeur via A. constructeur. Il serait beaucoup plus fréquent de faire:

var A = function () {
    this.x = function () {
        //do something
    };
};
var a = new A();

Une autre façon de parvenir à un résultat similaire est d'utiliser un immédiatement appelé la fonction de l'expression:

var A = (function () {
    this.x = function () {
        //do something
    };
}());

Dans ce cas, A affecté la valeur de retour de l'appel de fonction sur le côté droit. Ici encore, depuis ce n'est pas définie dans l'appel, il fait référence à l'objet global et this.x est efficace window.x. Puisque la fonction ne retourne rien, A aura une valeur de undefined.

Ces différences entre les deux approches se manifeste aussi, si vous êtes à la sérialisation et de la sérialisation de vos objets Javascript/à partir de JSON. Les méthodes définies sur un prototype de l'objet ne sont pas numérotés lors de la sérialisation de l'objet, ce qui peut être pratique lorsque, par exemple, vous souhaitez sérialiser les données à des parties d'un objet, mais pas de méthodes:

var A = function () { 
    this.objectsOwnProperties = "are serialized";
};
A.prototype.prototypeProperties = "are NOT serialized";
var instance = new A();
console.log(instance.prototypeProperties); //"are NOT serialized"
console.log(JSON.stringify(instance)); 
//{"objectsOwnProperties":"are serialized"} 

Questions liées:

• Qu'est-ce à dire que le JavaScript est un des prototypes de la langue?
• Quelle est la portée d'une fonction en JavaScript?
• Comment le mot clé "this" de travail?

Note: Il ne peut pas y avoir d'importantes économies de mémoire entre les deux approches, cependant en utilisant le prototype de partager des méthodes et des propriétés susceptibles d'utiliser moins de mémoire que chaque instance d'avoir sa propre copie.

JavaScript n'est pas un langage de bas niveau. Il peut ne pas être très précieux pour penser le prototypage ou d'autres modes de transmission comme un moyen de modifier explicitement la façon dont la mémoire est allouée.

OriginalL'auteur

Prendre que ces 2 exemples:

var A = function() { this.hey = function() { alert('from A') } };

vs

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

La plupart des gens ici (surtout les meilleurs réponses) a tenté d'expliquer comment ils sont différents, sans expliquer POURQUOI. Je pense que c'est faux et si vous comprenez les fondements d'abord, la différence devient évidente. Nous allons essayer d'expliquer les principes fondamentaux de la première...

a) Une fonction est un objet en JavaScript. CHAQUE objet en JavaScript obtient une propriété interne (ce qui signifie que vous ne pouvez pas y accéder comme les autres propriétés, sauf peut-être dans les navigateurs comme google Chrome), souvent désigné comme __proto__ (vous pouvez en fait le type de anyObject.__proto__ dans google Chrome pour voir ce qu'il référence. C'est juste que, une propriété, rien de plus. Une propriété en JavaScript = une variable à l'intérieur d'un objet, rien de plus. Ce n'variables? Ils désignent des choses.

Alors qu'est-ce __proto__ bien des points? Eh bien, en général un autre objet (nous expliquerons plus loin pourquoi). Le seul moyen de forcer le JavaScript pour le __proto__ propriété NON point à un autre objet à l'aide de var newObj = Object.create(null). Même si vous faites cela, l' __proto__ propriété existe TOUJOURS en tant que propriété de l'objet, il n'a pas de point à un autre objet, il souligne null.

C'est ici que la plupart des gens se confondre:

Lorsque vous créez une nouvelle fonction en JavaScript (qui est un objet, vous vous souvenez?), le moment où elle est définie, JavaScript crée automatiquement une nouvelle propriété sur cette fonction appelée prototype. Essayez-le:

var A = [];
A.prototype //undefined
A = function() {}
A.prototype //{} //got created when function() {} was defined

A.prototype est TOTALEMENT DIFFÉRENTE de la __proto__ de la propriété. Dans notre exemple, " A "a maintenant DEUX propriétés appelé "prototype" et __proto__ . C'est une grande confusion pour les gens. prototype et __proto__ propriétés sont en aucune façon liés, ils sont des choses distinctes de pointage pour séparer les valeurs.

Vous pouvez vous demander: Pourquoi est-ce que JavaScript a __proto__ biens créés sur chaque objet unique? Eh bien, un seul mot: délégation. Lorsque vous appelez une propriété sur un objet et que l'objet ne l'a pas, alors le JavaScript semble pour l'objet référencé par __proto__ pour voir si il a peut-être. Si elle ne l'a pas, alors il regarde l'objet __proto__ de la propriété et ainsi de suite...jusqu'à ce que les extrémités de la chaîne. Ainsi, le nom prototype de la chaîne d'. Bien sûr, si __proto__ ne pointe pas vers un objet et à la place des points de null, eh bien pas de chance, JavaScript se rend compte que et sera de retour que vous undefined de la propriété.

Vous pouvez aussi vous demander, pourquoi ne JavaScript crée une propriété appelée prototype pour une fonction lorsque vous définissez la fonction? Parce qu'il essaie de vous tromper, oui vous tromper qu'il fonctionne comme la classe de base des langues.

Continuons avec notre exemple et créer un "objet" de A:

var a1 = new A();

Il y a quelque chose qui se passe en arrière-plan lorsque cette chose qui s'est passé. a1 est une variable qui a été attribué un nouvel objet vide.

Le fait que vous avez utilisé l'opérateur new avant l'invocation de la fonction A() fait quelque chose de SUPPLÉMENTAIRE à l'arrière-plan. Le new mot-clé créé un nouvel objet qui fait maintenant référence à la a1 et que l'objet est vide. Voici ce qui se produit en outre:

Nous a dit qu'à chaque définition de fonction il y a une nouvelle propriété créée appelé prototype (à laquelle vous pouvez accéder, à la différence de la __proto__ propriété) créé? Eh bien, que le bien est utilisé maintenant.

Donc nous sommes maintenant au point où nous sommes fraîchement cuits au four à vide a1 objet. Nous avons dit que tous les objets en JavaScript interne __proto__ propriété qui pointe vers quelque chose (a1 l'a aussi), si elle est null ou un autre objet. Ce que le new opérateur n'est qu'il jeux de __proto__ bien à point pour la fonction prototype de la propriété. Lire encore une fois. C'est essentiellement ceci:

a1.__proto__ = A.prototype;

Nous dit que A.prototype est rien de plus qu'un objet vide (à moins de le changer pour quelque chose d'autre avant de définir a1). Alors maintenant, fondamentalement a1.__proto__ points à la même chose A.prototype points, ce qui n'est que vide de l'objet. Ils pointent vers le même objet qui a été créé lors de cette ligne qui s'est passé:

A = function() {} //JS: cool. let's also create A.prototype pointing to empty {}

Maintenant, il y a une autre chose qui se passe quand var a1 = new A() instruction est traitée. Fondamentalement A() est exécutée et si A est à quelque chose comme ceci:

var A = function() { this.hey = function() { alert('from A') } };

Ce genre de choses à l'intérieur de function() { } s'apprête à exécuter. Lorsque vous atteignez le this.hey.. ligne, this est changé à a1 et vous obtenez ceci:

a1.hey = function() { alert('from A') }

Je n'aborde pas pourquoi this changements à a1 mais c'est une excellente réponse pour en savoir plus.

Donc, pour résumer, lorsque vous ne var a1 = new A() il y a 3 choses qui se passe en arrière-plan:

1. Un tout nouvel objet vide est créée et affectée à a1. a1 = {}

2. a1.__proto__ propriété est attribuée à point à la même chose que A.prototype points (un autre objet vide {} )

3. La fonction A() est en cours d'exécution avec this de la nouvelle, objet vide créé à l'étape 1 (lire la réponse que j'ai référencé ci-dessus pourquoi this changements à a1)

Maintenant, nous allons essayer de créer un autre objet:

var a2 = new A();

Étapes 1,2,3 vais le répéter. Avez-vous remarqué quelque chose? Le mot-clé est répéter. Étape 1: a2 sera un nouvel objet vide, étape 2: son __proto__ propriété de point à la même chose A.prototype points et plus important encore, l'étape 3: la fonction A() est de NOUVEAU exécutée, ce qui signifie que a2 obtiendrez hey propriété contenant une fonction. a1 et a2 ont deux propriétés nommé hey qui point pour SÉPARER les 2 fonctions! Nous avons maintenant dupliquer les fonctions dans les mêmes deux objets différents qui font la même chose, oups...Vous pouvez imaginer la mémoire des implications de ce si nous avons 1000 objets créés avec new A, après toutes les fonctions déclarations de prendre plus de mémoire que quelque chose comme le numéro 2. Alors, comment éviter cela?

Rappeler les raisons de la __proto__ propriété existe sur chaque objet? De sorte que si vous récupérez les yoMan bien sur a1 (qui n'existe pas), son __proto__ propriété seront consultés, si c'est un objet (et dans la plupart des cas, il est), il va vérifier s'il contient des yoMan, et si elle ne le fait pas, il devra le consulter cet objet __proto__ etc. Si c'est le cas, il faudra que la valeur de la propriété et de l'afficher pour vous.

Donc, quelqu'un a décidé d'utiliser ce fait + le fait que lorsque vous créez a1, son __proto__ bien des points à la même (vide) objet A.prototype points et de faire cela:

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

Cool! Maintenant, lorsque vous créez a1, il va, encore une fois tous les 3 étapes ci-dessus, et dans l'étape 3, cela ne sert à rien, puisque function A() n'a rien à exécuter. Et si nous le faisons:

a1.hey

Il va voir que a1 ne contient pas de hey et il va vérifier ses __proto__ propriété de l'objet pour voir si elle l'a, ce qui est le cas.

Avec cette approche, nous éliminer de la partie à partir de l'étape 3, où les fonctions sont dupliquées sur chaque nouvelle création de l'objet. Au lieu de a1 et a2 ayant un hey propriété, AUCUN d'entre eux n'a une. Ce qui, je suppose, vous avez trouvé vous-même maintenant. C'est la bonne chose...si vous comprenez __proto__ et Function.prototype, ces questions seront assez évident.

NOTE: Certaines personnes ont tendance à ne pas appeler l'interne de la propriété Prototype comme __proto__, j'ai utilisé ce nom par l'intermédiaire de la poste afin de la distinguer clairement de la Functional.prototype bien comme deux choses différentes.

OriginalL'auteur daremkd

Le premier exemple des modifications de l'interface pour cet objet. Le deuxième exemple, les changements de l'interface pour tous les objets de cette classe.

OriginalL'auteur Glenn

Chaque objet est lié à un objet prototype. Lorsque vous essayez d'accéder à une propriété qui n'existe pas, JavaScript, regardez dans le prototype de l'objet l'objet de cette propriété et de la renvoyer si elle existe.

La prototype propriété d'une fonction constructeur se réfère à l'objet prototype de toutes les instances créées à cette fonction lors de l'utilisation de new.

---

Dans votre premier exemple, vous ajoutez une propriété x pour chaque instance créée avec le A fonction.

var A = function () {
    this.x = function () {
        //do something
    };
};

var a = new A();    //constructor function gets executed
                    //newly created object gets an 'x' property
                    //which is a function
a.x();              //and can be called like this

Dans le deuxième exemple, vous ajoutez une propriété de l'objet prototype que toutes les instances créées avec A point.

var A = function () { };
A.prototype.x = function () {
    //do something
};

var a = new A();    //constructor function gets executed
                    //which does nothing in this example

a.x();              //you are trying to access the 'x' property of an instance of 'A'
                    //which does not exist
                    //so JavaScript looks for that property in the prototype object
                    //that was defined using the 'prototype' property of the constructor

---

En conclusion, dans le premier exemple une copie de la fonction est attribuée à chaque instance. Dans le deuxième exemple une seule copie de la fonction est partagée par toutes les instances.

OriginalL'auteur destoryer

Le Prototype est le modèle de la classe, qui s'applique à toutes les instances de celui-ci. Alors que c'est le cas particulier de l'objet.

OriginalL'auteur harropriiz

Je sais que cela a été répondu à la mort, mais j'aimerais vous montrer un exemple de différences de vitesse.

Ici, nous sommes la création de 2 000 000 de nouveaux objets avec un print méthode dans google Chrome. Nous sommes de stockage de chaque objet dans un tableau. Mettre print sur le prototype prend environ 1/2 long.

OriginalL'auteur Arnav Aggarwal

Tel que discuté dans d'autres réponses, c'est vraiment un facteur de performance, car la fonction dans le prototype est partagé avec toutes les instanciations - plutôt que la fonction crée pour chaque instanciation.

J'ai mis en place un jsperf de le montrer. Il y a une énorme différence dans le temps qu'il faut pour instancier la classe, même si elle est réellement pertinente que si vous effectuez un grand nombre de cas.

http://jsperf.com/functions-in-constructor-vs-prototype

OriginalL'auteur Devgr