Question

希望有人能指出我正确的方向。

我不是OOP的新手，但我不熟悉它在Javascript中的工作原理。我理解js中的类是对象的概念。

我正在编写一个脚本，它会写一些html并允许用户添加或删除一些元素。一切正常，除非你在最后一个实例中点击html更新的任何实例点击“Add Checkbox”而不是它自己（这使我相信存在某种范围或封装失败）。

我已经简化了问题并发布了一个小提琴，单击“添加复选框”作为“颜色”实例，您将看到html被添加到“animals”组中。请注意我在第25行的评论。

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());

感谢您的任何见解。

Answer 1

您的self变量是全局变量，将被最后初始化的对象覆盖：

self = this;

在其前面添加var，使其成为init功能的本地代码：

var self = this;

演示：http://jsfiddle.net/XrJ3D/5/

Answer 2

除了Blender明显正确的答案之外，还有其他一些你可能想要解决的问题：

`init函数的第一行应该是

this.label = label || "Checkboxes";
您的构造函数或init函数无需返回任何内容。事实上，在构造函数中这样做有点浪费。

Javascript类没有按预期方式确定

2 个答案: