Question

我的目标是制作一个我可以使用和分发的模块。因此，我不能污染全局命名空间。我正在制作的模块也将在一个网页上多次使用。这就是我选择使用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();

谢谢！

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

JavaScript：如何绑定方法？

1 个答案: