JavaScript:如何绑定(bind)一个方法？

Question

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

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

我希望我的对象绑定(bind)一个函数，以便在用户单击 DOM 中的元素时运行。在我制作的这个简化示例中，我希望在用户单击段落时弹出一个警告框。例如，在我正在处理的真实项目中，我需要做的事情之一是:用户单击 Canvas ，该函数计算出用户单击的位置并将其保存到 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();​

谢谢!

Answer 1

阅读MDN's introduction to the this keyword .由于它是关键字，因此不能将其用作参数名称。

使用其中之一

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