Псевдоклассы Javascript, обработчики событий jQuery и 'this'

Question

У меня есть большой проект Javascript, который я пытаюсь преобразовать в псевдоклассы:

jsFiddle: http://jsfiddle.net/waitinforatrain/7T42w/

var MyNameSpace = {}

MyNameSpace.MyClass = function() {
    this.doSomething = function () {
        return "hello";
    }

    this.doSomething2 = function() {
        var x = this.doSomething() + " world";
        alert(x);
    }

    this.doSomething2(); //Works fine

    $("#mydiv").click ( this.doSomething2 ); //Doesn't work
}

var class = new MyNameSpace.MyClass();

Причина, по которой событие click вызывает ошибку, заключается в том, что this ссылается на элемент #mydiv.

Как я должен спроектировать вышеупомянутое, чтобы я мог получить доступ к элементу, по которому щелкнули, но также могу вызвать doSomething()?

Answer 1

Вам необходимо кэшировать ссылку на контекст и заключить вызов в закрытие:

var MyNameSpace = {}

MyNameSpace.MyClass = function() {
    var context = this;

    context.doSomething = function () {
        return "hello";
    }

    context.doSomething2 = function() {
        var x = context.doSomething() + " world";
        alert(x);
    }

    // You can do this:
    context.doSomething2();

    // Or this:
    $("#mydiv").click(function(e) {
        context.doSomething2();
    });
}

Answer 2

this.doSomething2 = $.proxy(function() {
    var x = this.doSomething() + " world";
    alert(x);
}, this);

$. Proxy связывает область действия this с контекстной переменной внутри указанной функции.

Answer 3

Сохранить ссылку на this во внешней области видимости:

MyNameSpace.MyClass = function() {

    var that = this;

    this.doSomething = function () {
        return "hello";
    }

    this.doSomething2 = function() {
        var x = that.doSomething() + " world";
        alert(x);
    }

    this.doSomething2(); //Works fine

    $("#mydiv").click ( this.doSomething2 ); //Doesn't work
}

Функция, назначенная doSomething2, как говорят, "закрывает" переменные в своей лексической области и поэтому имеет доступ к их значениям даже после возврата MyClass. Это позволяет нам получить доступ к методу doSomething через ссылку на экземпляр, который мы присвоили that.