Méthode d'ajout Javascript à un objet

Question

Supposons que j'ai un Foo objet

Comment puis-je étendre cet objet en ajoutant un bar() et garantissent également que les futures instances de Foo ont cette méthode ?

Answer 1

Vous devez l'ajouter au prototype de Foo :

function Foo(){}
Foo.prototype.bar = function(){}
var x = new Foo()
x.bar()

Answer 2

Tout dépend de la façon dont vous créez Foo et comment vous comptez utiliser .bar() .

Tout d'abord, utilisez-vous une fonction constructeur pour votre objet ?

var myFoo = new Foo();

Si c'est le cas, vous pouvez étendre le Foo de la fonction prototype avec .bar comme ça :

function Foo () { /*...*/ }
Foo.prototype.bar = function () { /*...*/ };

var myFoo = new Foo();
myFoo.bar();

De cette façon, chaque instance de Foo a maintenant accès à la SAME exemple de .bar .
A savoir : .bar auront un accès COMPLET à this mais il aura absolument aucun accès a variables dans la fonction constructeur :

function Foo () { var secret = 38; this.name = "Bob"; }
Foo.prototype.bar = function () { console.log(secret); };
Foo.prototype.otherFunc = function () { console.log(this.name); };

var myFoo = new Foo();
myFoo.otherFunc(); // "Bob";
myFoo.bar(); // error -- `secret` is undefined...
             // ...or a value of `secret` in a higher/global scope

D'une autre manière, vous pourriez définir une fonction qui renvoie n'importe quel objet (pas de this ), avec .bar créé comme une propriété de cet objet :

function giveMeObj () {
    var private = 42,
        privateBar = function () { console.log(private); },
        public_interface = {
            bar : privateBar
        };

    return public_interface;
}

var myObj = giveMeObj();
myObj.bar(); // 42

De cette manière, vous disposez d'une fonction qui crée de nouveaux objets.
Chacun de ces objets a un .bar créée pour eux.
Chaque .bar a accès, par le biais de ce que l'on appelle fermeture aux variables "privées" de la fonction qui a renvoyé leur objet particulier.
Chaque .bar a toujours accès à this également, comme this lorsque vous appelez la fonction comme myObj.bar(); fera toujours référence à myObj ( public_interface dans mon exemple Foo ).

L'inconvénient de ce format est que si vous devez créer des millions de ces objets, cela signifie aussi des millions de copies de .bar qui va consommer de la mémoire.

Vous pouvez également le faire à l'intérieur d'une fonction constructeur, en définissant les paramètres suivants this.bar = function () {}; à l'intérieur du constructeur - encore une fois, l'avantage serait l'accès par fermeture aux variables privées dans le constructeur et l'inconvénient serait l'augmentation des besoins en mémoire.

Donc la première question est :
Attendez-vous à ce que vos méthodes aient accès à la lecture/modification de données "privées", auxquelles on ne peut pas accéder par l'objet lui-même (par l'intermédiaire de la fonction this ou myObj.X ) ?

et la deuxième question est : Est-ce que vous fabriquez suffisamment de ces objets pour que la mémoire devienne une préoccupation majeure, si vous leur donnez à chacun leur fonction personnelle, au lieu de leur en donner une à partager ?

Par exemple, si vous donnez à chaque triangle et à chaque texture leur propre .draw dans un jeu 3D haut de gamme, cela pourrait être excessif, et cela affecterait probablement le framerate dans un système aussi délicat...

Cependant, si vous cherchez à créer 5 barres de défilement par page, et que vous voulez que chacune d'entre elles puisse définir sa position et savoir si elle est déplacée, sans que toutes les autres applications aient accès à la lecture et à la définition de ces mêmes éléments, il n'y a vraiment aucune raison d'avoir peur que 5 fonctions supplémentaires tuent votre application, en supposant qu'elle compte déjà 10 000 lignes (ou plus).

Answer 3

Il existe de nombreuses façons de créer des objets réutilisables comme celui-ci en JavaScript. Mozilla propose une bonne introduction ici :

• https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

Ce qui suit fonctionnera dans votre exemple :

function Foo(){
    this.bar = function (){
        alert("Hello World!");
    }
}

myFoo = new Foo();
myFoo.bar(); // Hello World​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 4

Vous pouvez faire de bar une fonction, ce qui en fait une méthode.

Foo.bar = function(passvariable){  };

En tant que propriété, il suffit de lui attribuer une chaîne de caractères, un type de données ou un booléen.

Foo.bar = "a place";