screen with javascript code

Javascript functions this, that and the other

Javascript functions this reference

When working with Javascript functions this refers the current object, which depends on the context of the function. For example if you have a top level function, then this references window, if the function is defined in an object, then this will reference the object instance, while if the function implements an event handler, then this will reference (most of the times) the DOM element that triggered the event.

In this post I will shortly describe how I usually handle Javascript functions this references. Some methods might be more elegant than the other, but in the end it’s just a matter of preference.

This

This method is perhaps what most of the times is use. It simply means using this to reference the current object. Here is a quick example:

var employee = {
  name : "John Doe",
  sayHello : function(){
    console.log("Hello " + this.name);
  }
}

employee.sayHello();

The example above will print “Hello John Doe”. As you can see in the sayHello function I’ve used this as a reference to the employee object.

That

Sometimes the code might be such that this does not reference the object that you need. In these cases I often use a local variable to store the reference I need like in the following example (please note that I used that as a name of the local variable, but it is just a name – you can use whatever name in your code):

var employee = {
  name : "John Doe",
  init : function(){
    var that = this; // store reference to current object in a local variable
    document.getElementById("myButton").onclick = function(){
       //this would reference the myButton element here, not employee
       that.sayHello();
    }
  },
  sayHello : function(){
    console.log("Hello " + this.name);
  }

The code above will print “Hello John Doe” when a DOM element with the id myButton element is clicked.

The other – Javascript functions are objects

Not many realize (me included until a while ago) that Javascript functions are actually objects. Not that it matters too much, but knowing this might come in handy. Being objects, you can access its properties and inner functions.

One inner function of the function object in particular is interesting for this discussion, and that is the bind function. The bind function allows you to tell the function that you want this inside your function to reference a specific object and returns a reference to that function without changing the original. Let’s rewrite the example:

var employee = {
  name : "John Doe"
}

var sayHelloEmployee = function sayHello(){
    console.log("Hello " + this.name);
}.bind(employee);

sayHelloEmployee();

The code above will print “Hello John Doe” to the console. As you can see, sayHelloEmployee() is a function that will treat this as a reference to employee, while if you would try to run sayHello() the output would be “Hello “, since this would be a reference to the window object and therefore not have a name property.

Hope you found this post useful. If you have any questions or remarks don’t hesitate to contact me via the comments.

John Negoita

View posts by John Negoita
I'm a Java programmer, been into programming since 1999 and having tons of fun with it.
[jetpack-related-posts]

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top