ООП в JavaScript с обратными вызовами

Question

Я хочу, чтобы закрыть свое окно (только DIV с позицией абсолютной, который перетаскиваемый), когда я нажимаю на тесной связи

Это мой код

function ApplicationWindow() { 
    this.window = $('<div class="window"></div>'); 

    this.create = function create() { 
     //..... 
     var closeButton = this.window.find('.close'); 
     closeButton.live('click', this.close); 
    } 

    this.close = function close() { 
     this.window.fadeOut(200); 
    }; 
} 

Когда я нажимаю на кнопке закрытия функция закрытия выполняется, но проблема в том, что я получаю сообщение об ошибке «this.window undefined». Это потому, что функция close передается как обратный вызов, я думаю, но мой вопрос заключается в том, как я могу решить это с хорошим способом?

Answer 1

как это;

function ApplicationWindow() { 
    this.window = $('<div class="window"></div>'); 

    this.create = function create() { 
     //..... 
     var closeButton = this.window.find('.close'); 
     var self = this; 
     closeButton.live('click', function() { 
      self.window.fadeOut(200); 
     }); 
    } 
} 

Answer 2

Не использовать this. В JS зарезервированное слово this изменяется в зависимости от контекста, поэтому вы хотите избежать его в этом случае.

Используя простую переменную в рамки должны решить эту проблему:

function ApplicationWindow() { 
    var theWindow = $('<div class="window"></div>'); 

    this.create = function create() { 
     //..... 
     var closeButton = theWindow.find('.close'); 
     closeButton.live('click', this.close); 
    } 

    this.close = function close() { 
     theWindow.fadeOut(200); 
    }; 
} 

Answer 3

Что библиотеки вы используете? Вы должны быть в состоянии связать функцию к объекту:

this.close = function close() { 
    this.window.fadeOut(200); 
}.bind(this); 

Answer 4

См this answer для объяснения любопытных this -связывающей функции в JavaScript и как работать вокруг него с помощью явного закрытия или function.bind.