Доступ к переменной из-за пределов ее области?

Question

Итак, я относительно новичок в javascript и все еще испытываю трудности с размахом переменных. Итак, я пытаюсь сделать доступ к переменной извне функции (все внутри одного и того же объекта).

Смотрите ниже:

function GameCard(imageSource, div) 
{ 
    this.cardImage = new Image(); 
    this.cardImage.src = imageSource; 

    this.imageString = "<img src='" + this.cardImage.src + "' />"; 

    this.hiddenImage = new Image(); 
    this.hiddenImage.src = HIDDEN_SOURCE; 

    this.clicked = false; 

    this.cardDiv = div; 

    $(this.cardDiv).click(function() { 
     alert(this.imageString); 
     $(this).flip({ 
      direction:'lr', 
     }); 
    }); 
} 

Предупреждение (мой несчастный отладки) говорит imageString неопределен в функции обработчика щелчка. Что имеет смысл, как я могу получить к нему доступ?

Спасибо заранее, J

Answer 1

два способа: первый, вы можете копить this в другой переменной:

var saveThis = this; 

перед настройкой "нажмите кнопку" обработчик, а затем использовать "saveThis" в код обработчика:

$(this.cardDiv).click(function() { 
    alert(saveThis.imageString); 
    $(saveThis).flip({ 
     direction:'lr', 
    }); 
}); 

Второй способ: связать функцию обработчика для объекта, который вы хотите:

$(this.cardDiv).click(function() { 
    alert(this.imageString); 
    $(this).flip({ 
     direction:'lr', 
    }); 
}.bind(this)); 

Этот второй способ требует a shim в старых версиях IE.

Answer 2

Объявите var of imageString вне функции и используйте ее как в GameCard, так и в функции анонимного click().

Эти две функции не разделяют пространства памяти, так как анонимная функция не выполняется в контексте GameCard, но оба они совместно используют глобальные переменные, объявленные снаружи.

Answer 3

В этом случае «this» относится к $ (this.cardDiv), а не к родительскому объекту.

Вы могли бы рассмотреть вопрос о яваскрипта объект, содержащий все данные за пределами вашего объекта CardGame

Таким образом, данные будут область видимости выше и доступны из вашего метода