Question

我对JS中的原型设计感到有点困惑。我为此准备了一个小提琴：

标记：

<div class="container1">
    <p>Container 1</p>
    <button>Turn me (container1) red</button>
</div>

<div class="container2">
    <p>Container 2</p>
    <button>Turn me (container2) red</button>
</div>

JS：

// Constructor Function
function Box( container ) {
  this.container = $(container);
}

// Prototype method
Box.prototype = {
  init : function() {

      // Assign buttons to object variable
      this.button = this.container.find('button');

      $this = this; // Set 'this' to Slider object
      this.button.on('click', function() {
        // It is getting the wrong container here, but why
        $this.container.css('background-color','red');
      });
  }
};

以下是我调用构造函数的方法：

// Create two instances of box
(function() {
    var container1 = new Box( $('div.container1') );
    container1.init();

    var container2 = new Box( $('div.container2') );
    container2.init();
})();

我有两个由构造函数创建的Box对象。当我点击框内的按钮时，CONTAINING框的背景应该改变颜色。

颜色的变化在Box的init原型函数中处理。

然而，错误的方框正在使用上面的代码着色。我如何处理正确的容器？

我在这里缺少什么？

Answer 1

您错过了var声明：

$this = this;

应该是：

var $this = this;

添加var并按预期工作：http://jsfiddle.net/GBCav/8/

说明：当您省略var关键字时，您将$this分配给全局变量，而不是仅限于.init()方法的范围。当你调用.init()时会发生赋值，因此在第二个实例上调用此方法会将$this重新分配给第二个实例，从而影响第一个实例的事件处理程序中$this的值

JS：Prototyping - 访问正确的实例属性

1 个答案: