Javascript Simple de l'héritage à l'aide de $.étendre et motif de module

Je pense qu'il se résume à la question de la performance. Vous avez mentionné qu'il y a un petit dégradation des performances, mais cela dépend vraiment de l'ampleur de la demande(2 moutons vs 1000 moutons). Prototypes héritage ne doit pas être ignoré et nous pouvons créer un motif de module à l'aide d'un mélange de fonctionnel et prototypes héritage.

Comme mentionné dans le post JS - Pourquoi utiliser le Prototype?,
une des beautés de prototype est que vous avez seulement besoin de initialiser les prototypes membres qu'une seule fois,
attendu que les membres dans le constructeur sont créés pour chaque instance.
En fait, vous pouvez accéder prototype directement sans créer un nouvel objet.

Array.prototype.reverse.call([1,2,3,4]);
//=> [4,3,2,1]

function add() {
    //convert arguments into array
    var arr = Array.prototype.slice.call(arguments),
        sum = 0;
    for(var i = 0; i < arr.length; i++) {
        sum += arr[i];
    }

    return sum;
}

add(1,2,3,4,5);
//=> 15

Dans vos fonctions, il y a une charge supplémentaire de créer un tout nouveau
Des animaux et des moutons à chaque fois qu'un constructeur est appelé. Certains membres comme des Animaux.nom sont créés avec chaque instance, mais nous savons
cet Animal.le nom est statique, de sorte qu'il serait mieux pour instancier qu'une seule fois. Depuis votre code implique que l'Animal.nom
doit être la même pour tous les animaux, il est facile de mettre à jour l'Animal.nom pour tous instance simplement en mettant à jour l'Animal.le prototype.nom si nous avons déménagé
il est le prototype.

Considérer cette

var animals = [];
for(var i = 0; i < 1000; i++) {
    animals.push(new Animal());
}

Fonctionnelle héritage/Motif de Module

function Animal() {

    return {
      name : 'Generic',
      updateName : function(name) {
          this.name = name;
      }
   }

}


//update all animal names which should be the same
for(var i = 0;i < animals.length; i++) {
    animals[i].updateName('NewName'); //1000 invocations !
}

vs Prototype

Animal.prototype = {
name: 'Generic',
updateName : function(name) {
   this.name = name
};
//update all animal names which should be the same
Animal.prototype.updateName('NewName'); //executed only once :)

Comme indiqué ci-dessus avec votre motif de module de nous perdre en efficacité
la mise à jour des propriétés qui doivent être communes à tous les membres.

Si vous êtes concered sur visibilité, je voudrais utiliser la même méthode modulaire vous êtes en train d'utiliser pour encapsuler les membres privés, mais également de l'utiliser
privilégiée membres pour l'accès à ces membres s'ils ont besoin d'être atteint. Privilégiée membres sont des membres du public qui fournissent une interface pour accéder aux variables privées. Ajoutez enfin les communes membres du prototype.

Bien sûr d'aller dans cette voie, vous aurez besoin de garder une trace de ce.
Il est vrai que la mise en œuvre, il est

• Pas besoin de suivre le " ce " pointeur via $.proxy(fn, c') des rappels
• Pas plus var que = ce, etc. avec les gestionnaires d'événements, etc. Chaque fois que je vois un "il", je sais que c'est le contexte qui est passé dans une fonction de rappel, il n'est PAS quelque chose que je suis suivi de la connaissance de mon instance de l'objet.

mais vous êtes la création d'un très grand objet à chaque fois qui consomment plus de mémoire en comparaison à l'utilisation de certains prototypes héritage.

Cas de la Délégation, comme Analogie

Un analogie de gagner en performance en utilisant des prototypes est l'amélioration de la performance en utilisant événement délégation lors de la manipulation du DOM.Événement Délégation en Javascript

Permet de dire que vous avez une grande liste d'épicerie.Yum.

<ul ="grocery-list"> 
    <li>Broccoli</li>
    <li>Milk</li>
    <li>Cheese</li>
    <li>Oreos</li>
    <li>Carrots</li>
    <li>Beef</li>
    <li>Chicken</li>
    <li>Ice Cream</li>
    <li>Pizza</li>
    <li>Apple Pie</li>
</ul>

Disons que vous voulez enregistrer l'élément que vous cliquez sur.
Une mise en œuvre serait de associer un gestionnaire d'événement pour chaque élément(mauvais), mais si notre liste est très longue, il y aura beaucoup d'événements à gérer.

var list = document.getElementById('grocery-list'),
 groceries = list.getElementsByTagName('LI');
//bad esp. when there are too many list elements
for(var i = 0; i < groceries.length; i++) {
    groceries[i].onclick = function() {
        console.log(this.innerHTML);
    }
}

Une autre mise en œuvre serait de attacher un gestionnaire d'événement pour le parent(bon) et ont que l'un des parents de gérer toute la clique.
Comme vous pouvez le voir c'est similaire à l'utilisation d'un prototype pour la commune de fonctionnalités et améliore sensiblement les performances

//one event handler to manage child elements
 list.onclick = function(e) {
   var target = e.target || e.srcElement;
   if(target.tagName = 'LI') {
       console.log(target.innerHTML);
   }
}

Réécrire à l'aide de la Combinaison de la Fonctionnelle/Prototypes Héritage

Je pense que la combinaison de la fonctionnelle/prototypes de succession peuvent être écrites dans un format facile compréhensible.
J'ai réécrit votre code en utilisant les techniques décrites ci-dessus.

var Animal = function () {

    var helloCount = 0;
    var self = this;
    //priviledge methods
    this.AnimalHello = function() {
        helloCount++;
        console.log(self.Name + ' says hello (animalHello)');
    };

    this.GetHelloCount = function (callback) {
        callback.call(null, helloCount);
    }

};

Animal.prototype = {
    Name: 'Generic',
    IsAnimal: true
};

var Sheep = function (name) {

    var sheep = new Animal();
    //use parasitic inheritance to extend sheep
    //http://www.crockford.com/javascript/inheritance.html
    sheep.Name = name || 'Woolie'
    sheep.SheepHello = function() {
        this.AnimalHello();
        var self = this;
        this.GetHelloCount(function(count) {
            console.log('i (' + self.Name + ') have said hello ' + count + ' times (sheepHello anon callback)');
        });
    }

    return sheep;

};

Sheep.prototype = new Animal();
Sheep.prototype.isSheep = true;

var sheepie = new Sheep('Sheepie');
var lambie = new Sheep('Lambie');

sheepie.AnimalHello();
sheepie.SheepHello();
lambie.SheepHello();

Conclusion

La vente à emporter est à utiliser à la fois les prototypes et fonctionnelle de l'héritage à leurs avantages à la fois pour s'attaquer à la performance et la visibilité des questions.
Enfin, si vous travaillez sur un petites applications JavaScript et ces problèmes de performances ne sont pas une préoccupation,
ensuite, votre méthode de l'approche viable.

Avec votre approche, vous ne serez pas en mesure de remplacer des fonctions et d'appeler la fonction super facilement.

function foo ()
{
}

foo.prototype.GetValue = function ()
{
        return 1;
}


function Bar ()
{
}

Bar.prototype = new foo();
Bar.prototype.GetValue = function ()
{
    return 2 + foo.prototype.GetValue.apply(this, arguments);
}

Aussi, dans le prototype approche, vous pouvez partager des données au sein de toutes les instances de l'objet.

function foo ()
{
}
//shared data object is shared among all instance of foo.
foo.prototype.sharedData = {
}

var a = new foo();
var b = new foo();
console.log(a.sharedData === b.sharedData); //returns true
a.sharedData.value = 1;
console.log(b.sharedData.value); //returns 1

Un autre avantage de l'approche par prototype serait pour économiser de la mémoire.

function foo ()
{
}

foo.prototype.GetValue = function ()
{
   return 1;
}

var a = new foo();
var b = new foo();
console.log(a.GetValue === b.GetValue); //returns true

Alors que dans votre approche,

var a = new Animal();
var b = new Animal();
console.log(a.AnimalHello === b.AnimalHello) //returns false

Cela signifie à chaque nouvel objet, une nouvelle instance de l'fonctions sont créés où, comme il est partagé entre tous les objets en cas de prototype approche.
Ce ne sera pas beaucoup de différence en cas de rares cas, mais lorsqu'un grand nombre d'instances sont créées, ce serait montrer une différence considérable.

Aussi, une plus puissante fonction de prototype serait une fois tous les objets sont créés, vous pouvez toujours modifier les propriétés parmi tous les objets à la fois (uniquement si elles ne sont pas modifiées après la création de l'objet).

function foo ()
{
}
foo.prototype.name = "world";

var a = new foo ();
var b = new foo ();
var c = new foo();
c.name = "bar";

foo.prototype.name = "hello";

console.log(a.name); //returns 'hello'
console.log(b.name); //returns 'hello'
console.log(c.name); //returns 'bar' since has been altered after object creation

Conclusion:
Si les avantages mentionnés ci-dessus du prototype approche ne sont pas si utiles pour votre application, votre approche serait mieux.