1

JSFiddle：http: //jsfiddle.net/M2ALY/3/

我的目标是制作一个我可以使用和分发的模块。因此我不能污染全局命名空间。我正在制作的模块也将在一个网页上多次使用。这就是我选择使用 OOP 的原因，但这带来了一个问题。

我希望我的对象绑定一个在用户单击 DOM 中的元素时运行的函数。在我制作的这个简化示例中，我希望在用户单击段落时弹出一个警告框。例如，在我正在处理的实际项目中，我需要的一件事是：用户单击画布，该函数确定用户单击的位置并将其保存到 this.clientX 和 this.clientY。

而不是做

this.bind = function() {
    $("p1").bind('click', function() {
        // code here
    });
}

我想如果我这样做会起作用：

this.bind = function() {obj.codeMovedToThisMethod()}

问题是这不是一个好的设计。在“类”中，您不需要知道将由该“类”组成的对象的名称。当我制作“类”的多个对象时，这并没有变得更好......

所以我想我可以做到

$("p1").bind('click', function(this) {
        // code here
    });
}

但它不起作用，因为将它发送到函数中并没有像我想象的那样起作用。

我应该如何解决这个问题？这是一个简化的示例问题。（与 JSFiddle 相同。）

var test = function() {
    this.alert = function() {
        alert("Hi");
    }

    this.bind = function() {
        $("#p1").bind('click', function() {
            obj.alert();
        });
    }        
}

window.obj = new test();
obj.bind();

// What if I want to do this:

var test2 = function() {
    // Private vars
    this.variable = "This secret is hidden.";

    this.alert = function() {
        alert(this.variable);
    }

    this.bind = function() {
        $("#p2").bind('click', function(this) {
            obj2.alert();
            this.alert();
        });
    }        
}

window.obj2 = new test2();
obj2.bind();​

谢谢！

4

1 回答 1

2

阅读MDN 对this关键字的介绍。由于它是关键字，因此不能将其用作参数名称。

使用任一

this.bind = function() {
    var that = this;
    $("#p2").on('click', function(e) {
        that.alert();
        // "this" is the DOM element (event target)
    });
}

或者$.proxy，jQuery 跨浏览器等价于bind()函数：

this.bind = function() {
    $("#p2").on('click', $.proxy(function(e) {
        this.alert();
    }, this));
}
于 2012-10-16T11:27:04.283 回答