JS: Прототипирование - доступ к нужному свойству экземпляра - PullRequest
Новая
       2

JS: Прототипирование - доступ к нужному свойству экземпляра

1 голос
/ 12 марта 2012

Я немного запутался по поводу прототипирования в JS.Я подготовил скрипку для этого:

http://jsfiddle.net/GBCav/7/

Разметка: 

<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, созданных функцией конструктора.Когда я нажимаю на кнопку внутри поля, фон поля СОДЕРЖАНИЕ должен изменить цвет.

Изменение цвета обрабатывается в функции-прототипе init Box.

Однаконеправильное поле окрашивается с помощью кода выше.Как мне обратиться к нужному контейнеру?

Что мне здесь не хватает?

1 Ответ

1 голос
/ 12 марта 2012

Вы пропускаете оператор var: 

$this = this;

должен быть: 

var $this = this;

Добавить var, и он работает как ожидалось: http://jsfiddle.net/GBCav/8/

Объяснение: Когда вы опускаете ключевое слово var, вы присваиваете $this глобальной переменной, а не ограничивает область действия метода .init().Присвоение происходит при вызове .init(), поэтому вызов этого метода во втором экземпляре повторно назначает $this второму экземпляру, что также влияет на значение $this в обработчике событий первого экземпляра.

...