11
votes

Quand utiliser le mot "prototype" dans Ajouter de nouvelles propriétés à un objet en JavaScript?

Je ne comprends pas en JavaScript pour utiliser le mot "prototype" vs. Utilisation d'une notation "point" simple sans le mot "prototype". Est-ce que quelqu'un peut regarder ces blocs de code et m'aider à comprendre quand vous voudriez utiliser un sur l'autre?

avec "prototype": xxx

sans "prototype": xxx


2 commentaires

Ajout de membres au prototype La propriété de la fonction constructrice est logique si le membre est un procédé - au lieu de définir les méthodes courantes sur chaque instance, vous le mettez simplement dans le prototype et toutes les instances héritent de les hériter.


Si je peux vous suggérer, je marquerais probablement la réponse de @mark de Reed comme correcte, car il l'explique mieux que quiconque. Il est probablement possible de toujours changer la bonne réponse en quelque sorte. Mais c'est juste une suggestion. Merci.


6 Réponses :


0
votes

avec prototype, vous pouvez étendre de manière «nettoyeuse», car vous séparez la logique à l'intérieur de votre fonction de constructeur des propriétés et des méthodes qui définissent votre objet. XXX PRE>

Cependant, le Ci-dessus sans prototype pourrait ressembler à ceci: p>

var Mammal = function() {
  this.walk = function() { ... };
};

var Dog = function() {
  Mammal.apply(this);
  this.bark = function() { ... };
};


4 commentaires

Votre exemple ajoutera l'écorce méthode à mammifère.pototype , donc toutes les instances de mammifères pourront aboyer, au lieu de toutes les instances de < Code> Chien (Je suppose que vous n'avez que des chiens que des chiens pour pouvoir aboyer).


Je suis aussi un peu confus sur ce qu'est un constructeur. Est-ce le constructeur, var mammifère = fonction () {...}; ? Si oui, pourquoi n'est-ce pas simplement appelé un "objet"?


@TIMPETERSON Un constructeur est juste une fonction JavaScript régulière, la seule différence est la manière dont elle est invoquée, qui est avec le «nouveau» mot-clé.


Qui soulève la question suivante, quand utiliser le mot, "Nouveau" vs non lorsque vous faites une fonction?



2
votes

ES5's's's's's's's's ''s> Object.create supprime presque le besoin de trachant avec .pototype plus.

Donc, pour ramasser l'exemple de Gerry, vous pouvez aller comme < / p> xxx


6 commentaires

Salut Jandy, quelle est la logique derrière cette nouvelle syntaxe?


@TIMPETERSON: En fait, vous pouvez hériter d'objets sans fonctions constructrices, comme indiqué ci-dessus. Vous pouvez toujours utiliser des fonctions de constructeur en combinaison avec objet.create bien sûr pour avoir un héritage un peu plus avancé et sophistiqué. Dans generell, objet.create créera un nouvel objet et des points que .pototype à l'objet que vous transmettez en tant que premier argument, deuxième argument est un objet où vous pouvez créer d'autres. "propre" propriétés. Voir développeur.mozilla.org/fr/javaScript/reference/global_Objects / ...


var chien = s'étend ({}, mammifère, {abc: fonction () {}})


@Raynos: En fait, j'aimerais voir une autre réponse faisant référence à des concepts Pure OC.


@jandy Ce n'est pas vraiment OC, ce n'est que des mixages.


Les baleines n'étaient pas d'accord avec cet exemple.



1
votes

Le prototype prototype code> est un peu délicat à comprendre; Cependant Cet article sur OOP JavaScript Peut aider à perdre une certaine lumière.

en un mot, le prototype code> objet code> fournit un plan d'un objet "destinataire" - tout ce que vous avez à faire est de pointer le prototype du destinataire code> Propriété de votre objet Blueprint. Notez que vous pouvez avoir autant de destinataires d'un objet de plan de prototype que vous le souhaitez (vous pouvez donc indiquer à la fois un objet prototype de véhicule commun). P>

Vous êtes libre de définir les propriétés et les fonctions dans un OBJET DE PROTOTYPE QUI N'EST LES OBJETS DE DÉTENDIATEUR SERA PORTERONT À UTILISER, EG: P>

function createTrain(whilstleSound) {
    // Define the Train's constructor function
    function Train(name) {
        this.whilstleSound = whilstleSound;
    }

    // Point the train's prototype at the vechiclePrototype object
    Train.prototype = vechiclePrototype;

    // Return a new Train instance 
    return new Train(name);
}

var ic125 = new Train("pooop pooop");
ic125.move();


0 commentaires

8
votes

Les objets JavaScript ont une propriété qui est un pointeur à un autre objet. Ce pointeur est le prototype de l'objet. Instances d'objet Par défaut Partager le même prototype:

function Employee(name){
  this.name = name;
}

Employee.prototype.company = "IBM";

Employee.prototype.who = function(){
  console.log("My name is", this.name, "I work for", this.company);
}

var bob = new Employee('Bob');
var jim = new Employee('Jim');

// bob and jim are seperate objects, but each is linked to the same 'prototype' object.

jim.who(); // jim doesn't have a property called 'who', so it falls back to it's 'prototype', where who exists
// My name is Jim I work for IBM

bob.who();
// My name is Bob I work for IBM

// Bob leaves IBM for Microsoft
bob.company = "Microsoft"; // bob now has a property called 'company'. The value of which is 'Microsoft', which overrides bob's prototype property of the same name.

bob.who();
// My name is Bob I work for Microsoft

Employee.prototype.company = 'Facebook';

jim.who(); 
// My name is Jim I work for Facebook

bob.who(); // Bob is not affected by the change.
// My name is Bob I work for Microsoft

delete bob.company;

bob.who(); // bob no longer has it's own property 'company', so like jim, it drops down to the prototype object.
// My name is Bob I work for Facebook


1 commentaires

Alors, est-ce analogue à une méthode statique ou une variable?



1
votes

Ignorer Nouveau code>, Ignorer .pototype code> Ce sont juste des notions déroutantes. Si vous voulez vraiment une utilisation prototypique d'utilisation de l'héritage objet.create code> mais la plupart de l'héritage de temps est complètement excédentaire. (La héritage prototypique ne doit être utilisée que comme technique d'optimisation).

Lorsque vous créez des classes de construction, créez des objets et prolongez-les. P>

function extend(target) {
    [].slice.call(arguments, 1).forEach(function(source) {
        Object.getOwnPropertyNames(source).forEach(function (name) {
            target[name] = source[name]
        })
    })
    return target
}


2 commentaires

Merci Raynos, donc j'ai besoin d'utiliser _. Étendre ou $. Emptendre en plus de Just étendre ou en remplacement du natif > étendre la fonction ?


@TIMPETERSON Il n'y a pas de fonction Native EXTERRE , vous devez utiliser une bibliothèque qui mettent en œuvre. J'ai inliné la mise en œuvre de PD's's étendue.



8
votes

Les problèmes autour de JS et d'héritage peuvent être complexes, mais la réponse à votre question est relativement simple. Considérez ce code:

 function Klass() { }
 var obj1 = new Klass();
 var obj2 = new Klass();


1 commentaires

Salut Mark, merci, je pense que vous avez la réponse la plus directement répond à ma question. Il y a tellement de bonnes réponses, je suis déchiré sur lequel à accepter. Si cela ne vous dérange pas, laissez-moi prendre quelques heures à réfléchir à cela ...