La classe Javascript ne s'étend pas comme prévu

Question

J'espère que quelqu'un pourra m'orienter dans la bonne direction.

Je ne suis pas novice en matière de POO mais je ne suis pas aussi familier avec la façon dont cela fonctionne en Javascript. Je comprends la notion que les classes en js sont des objets.

Je suis en train d'écrire un script qui va écrire du html et permettre à l'utilisateur d'ajouter ou de supprimer certains éléments. Tout fonctionne bien, sauf que lorsque vous cliquez sur "Add Checkbox" pour l'une des instances, le html est mis à jour dans la dernière instance au lieu de l'être lui-même (c'est ce qui me fait penser qu'il y a une sorte d'échec de scoping ou d'encapsulation).

J'ai simplifié le problème et posté un bidule, cliquez sur "Add Checkbox" pour l'instance "colors" et vous verrez que le html est ajouté au groupe "animals" à la place. Notez mon commentaire js à la ligne 25.

http://jsfiddle.net/XrJ3D/

var CheckboxGroup = function(label){
  return this.init(label);
}
CheckboxGroup.prototype = {
  type: "checkbox",
  label: null,      
  description: null,
  $label: null,              
  init: function(label){
    if(!label) label = "Checkboxes";
    self = this;         
    this.$wrap = $("<div class='checkBoxGroup'></div>");
    this.$label = $("<div>"+label+"</div>").appendTo(this.$wrap);
    this.$options = $("<div></div>").appendTo(this.$wrap); 
    this.$add = $("<div class='n'>Add Checkbox</div>").appendTo(this.$wrap);

    this.$add.click(function(){          
      self.addOption("New Option");
    });

    this.options = [];       
    return this;          
  },
  addOption: function(label){
    $option = $("<div class='c'><input type='checkbox' name='"+label+"'><span class='l'>"+label+"</span></div>").appendTo(this.$options);

    $remove = $("<span class='rm'>x</span>").appendTo($option);        
    $remove.click(function(){
      var r=confirm("Remove Option?");
      if (r==false) return;                    
      $(this).parents('.c').remove();
    });
    this.options.push($option);
    return $option;
  },
  get: function(){
    return this.$wrap;
  }
}

// === CREATE SOME INSTANCES ===

a = new CheckboxGroup("Colors");
a.addOption('red');
a.addOption('green');
a.addOption('blue');    

$('body').append(a.get());

b = new CheckboxGroup("Animals");
b.addOption('dog');
b.addOption('cat');

$('body').append(b.get());

Merci pour toute information.

Answer 1

Votre self est globale et sera remplacée par l'objet qui a été initialisé en dernier :

self = this;

Ajouter var devant lui pour le rendre local à votre init fonction :

var self = this;

Démonstration : http://jsfiddle.net/XrJ3D/5/

Answer 2

En plus de la réponse évidemment correcte de Blender, il y a plusieurs autres choses que vous pourriez vouloir corriger :

• La première ligne de votre fonction `init' devrait probablement être la suivante

  this.label = label || "Checkboxes";

• Il n'y a pas besoin de la fonction Constructor ou de la fonction init pour retourner quelque chose. Le faire à partir du constructeur est, en fait, un léger gaspillage.