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();

究其原因，點擊事件引起錯誤的是， 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返回也可以訪問它們的值。 這允許我們通過對我們分配給that的實例的引用來訪問doSomething方法。