Question

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

My goal is to make a module that I can use and distribute. Therefore I must not pollute the global namespace. The module I’m making is also going to be used multiple times on one web page. That’s why I chose to use OOP, but this introduced a problem.

I want my object to bind a function to be run when the user clicks an element in the DOM. In this simplified example I made, I want an alert box to pop up when the user clicks a paragraph. As an example, one of the things I need in the real project I’m working on is: The user clicks a canvas, the function figures out where the user clicked and saves it to this.clientX and this.clientY.

Instead of doing

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

I figured it would work if I did:

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

The problem is that this isn’t a good design. Inside the “class” you shouldn’t need to know the name of the object(s) that is going to be made of this “class”. This doesn’t get better when I’m making multiple objects of the “class”…

So I figured I could do

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

But it didn’t work because sending this into the function didn’t work as I thought.

How should I solve this problem?
Here is a simplified sample problem. (Same as 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();​

Thanks!

Answer 1

Read MDN’s introduction to the this keyword. As it’s a keyword, you can’t use it as a parameter name.

Use either

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

or $.proxy, the jQuery cross-browser equivalent to the bind() function:

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