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 方法。