Quand ajouter des membres à un prototype ?

Question

Dans le code ci-dessous,

function Stack() {
    this.stac = new Array();
    this.pop = function () {
        return this.stac.pop();
    }
    this.push = function (item) {
        this.stac.push(item);
    }
}

Comment décider si push y pop sont des membres d'instance de Stack (illustré ci-dessus) ou des membres de la classe Stack.prototype ?

Answer 1

Si vous l'écrivez à l'intérieur d'une classe, chaque instance de cette classe aura sa propre pousser y pop Il faut donc redéfinir ces méthodes pour chaque instance. Si vous définissez ces méthodes pour le prototype, toutes les instances partageront ces méthodes. Vous pouvez donc facilement modifier ces méthodes en cours d'exécution pour chaque instance si vous le souhaitez. Sinon, vous devez réécrire ces méthodes pour chaque instance précédemment créée. Définir des méthodes via prototype est considéré une bonne pratique . C'est plus rapide, meilleur et cela facilite l'héritage !

Vérifiez Addy Osmany - Apprendre les modèles de conception JavaScript .

Si vous voulez vérifier si une propriété provient d'un prototype ou d'une instance, vous pouvez utiliser cette fonction : instanceName.hasOwnProperty(propertyName)

Dans votre exemple :

function Stack() {
    this.stac = new Array();
    this.pop = function () {
        return this.stac.pop();
    }
    this.push = function (item) {
        this.stac.push(item);
    }
}

Stack.prototype.notAnOwnProperty = 12;

var stack = new Stack();

console.log(stack.hasOwnProperty('pop'));
console.log(stack.hasOwnProperty('notAnOwnProperty'));

Vous aurez :

true
false

JSFiddle

Answer 2

Les propriétés et les méthodes qui sont définies dans la fonction du constructeur sont les propriétés de cet objet. Elles ne sont pas partagées entre les instances.

La règle simple est la suivante

Tout ce qui est ajouté sur this l'instance à l'intérieur de la fonction constructeur est privée à cette instance

Vous pouvez utiliser Object.is() pour comparer si différentes instances pointent vers la même méthode.

Votre code :

function Stack() {
    this.stac = new Array();
    this.pop = function () {
        return this.stac.pop();
    }
    this.push = function (item) {
        console.log('In push');
        this.stac.push(item);
    }
}

var stack = new Stack(),
    stack2 = new Stack();
console.log(Object.is(stack.push, stack2.push)); // false

---

Voie recommandée :

Il est recommandé d'ajouter les propriétés et méthodes communes partagées sur le prototype. Ces propriétés et méthodes sont partagées entre les instances de l'objet.

function Stack2() {
    this.stack = new Array();
}
Stack2.prototype.pop = function () {
    return this.stack.pop();
};
Stack2.prototype.push = function (item) {
    console.log('In push');
    this.stack.push(item);
}
var stack = new Stack2(),
    stack2 = new Stack2();

console.log(Object.is(stack.push, stack2.push)); // true

Answer 3

Pour compléter la réponse de @Lends, vous souhaitez également ajouter des propriétés et des méthodes au prototype lorsque vous voulez hériter de cet objet dans un autre objet et les utiliser dans l'objet enfant.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Inheritance

Answer 4

L'héritage permet la réutilisation et, si nécessaire, donne la liberté de remplacer une fonctionnalité en cachant une méthode déjà écrite. Dans l'exemple ci-dessus, si vous voulez Inherit(Make Parrent Object) Stack plus loin et veulent donner par défaut push y pop à ses objets hérités, dans ce cas vous devez mettre la fonctionnalité push y pop fonction dans Stack.prototype . cela donnera à l'objet hérité (objet enfant) la liberté d'utiliser la valeur par défaut. pop y push ou surcharger ces méthodes (en déclarant une nouvelle méthode avec le même nom).

Pour de plus amples informations sur le modèle de Portotype, veuillez suivre les indications suivantes Modèle de prototype

Expliqué avec exemple sur pluralsight Utilisation du modèle de prototype JavaScript