Javascript: объект this.var внутри метода jQuery

Question

Я не могу понять это:

У меня есть функция, например,

function test () {
  this.rating = 0;
  $j('#star_rating a').click(function() {
    alert(this.rating);
  });
}

var foo = new test();

При нажатии появляется предупреждение "undefined".Что случилось?Пожалуйста, помогите.

Answer 1

Внутри .click() this относится к нажатому элементу.Таким образом, контекст отличается от того, когда вы устанавливаете rating.Эти два this отличаются.

Вам необходимо как-то сохранить контекст.

Кроме того, вы можете захотеть return false; или event.preventDefault(), если вы нажимаете на ссылку иВы не хотите, чтобы страница обновлялась

function test () {

  this.rating = 0;
  var oldThis = this;           // Conserving the context for use inside .click()

  $j('#star_rating a').click(function() {

       alert(oldThis.rating);

       return false; // Use this if you don't want the page to change / refresh
  });
}

var foo = new test();

Попробуйте это с помощью jsFiddle

Answer 2

Внутри функции «this» - элемент, по которому щелкнули, который отличается от «this» вне функции. Простое исправление:

function test () {
  this.rating = 0;
  var self = this;
  $j('#star_rating a').click(function() {
    alert(self.rating);
  });
}

Answer 3

Как и другие, «this» отличается в тесте, и анонимная функция передается в click ().

test является глобальной функцией, поэтому «this» является ссылкой на оконный (глобальный) объект. На самом деле вы устанавливаете глобальную переменную, вероятно, не предполагаемый побочный эффект. (используйте alert (window.rating), чтобы понять, что я имею в виду)

Для вашего примера нет необходимости использовать «это», хотя я думаю, что ваш пример просто для демонстрации сути. Если бы это был настоящий код, tt должен быть преобразован в:

function test () {
  var rating = 0;
  $j('#star_rating a').click(function() {
    alert(rating); //Use the closure defined in the outer function
  });
}

Дело в том, что вы не должны использовать «this» из глобальных функций.

Answer 4

Если вы хотите сохранить this -подобную ссылку внутри объекта для последующего использования, где this, вероятно, будет означать что-то другое, это обычная уловка - присваивать this локальной переменной экземпляра.Я использую self.

function test () {
  var self = this;
  self.rating = 0;
  $j('#star_rating a').click(function() {
    alert(self.rating);
  });
}

var foo = new test();

Преимущество этого трюка состоит в том, что внутри всего кода в вашем объекте - даже замыканий - self всегда будет ссылаться на объект.Вы также можете использовать this для обозначения того, что обычно означает.

Answer 5

this отличается в обоих случаях.Попробуйте использовать точки останова в firebug, чтобы увидеть, на что они настроены.