Javascript's 'this' Assignment

Every week our Front End Developer team gathers to discuss/share any site-wide initiatives that are in the pipeline.

In addition to administrative announcements, we each take turns to give a mini presentation, which we've unoriginally called Front End Developer Talks, aka FED Talks (hopefully TED Talks doesn't chase us on trademark infringement...).

It's both a way to share knowledge, and a medium for us to practice talking to developers.

Generally the topic is anything fun/cool/random that we've been working on, or a new technology that we've been experimenting with.

This past week was my turn and I shared two things:
1. My journey into jQuery's source code
2. A fun little exercise on Javscript's this assignment I had been playing around in a Codepen.

I'll take you through an exercise on Javascript's this assignment.

Example 1: this points to window, in a globally invoked function
//Global variable, greeting.
var greeting = 'hello';

//Global function, sayGreeting.
function sayGreeting(){  
    console.log('greeting:', this.greeting);
}

sayGreeting(); //Result: hello  

In this example the variable, greeting, and the function, sayGreeting, are both in the global context.

sayGreeting() is called in the global context, so the keyword this in sayGreeting points to window when it is invoked.

Example 2: this points to the object, in an invoked method
//Constructor French which stores a property, greeting
var French = function (greeting){  
    this.greeting = greeting;
}

//French.prototype which has a method sayGreeting
French.prototype = {  
  sayGreeting: function() {
    console.log('greeting:', this.greeting);
  }
}

//Create a new object, louis
var louis = new French('bonjour');

louis.sayGreeting() //Result: bonjour  

In this example the variable, louis.greeting, and the method, louis.sayGreeting, are both properties of the object louis.

louis.sayGreeting() is called in the context of the object louis, the keyword this in louis.sayGreeting points to the object louis, when it is invoked.

Question: What does this point to, when a method is assigned to a global variable and invoked?
//borrowedGreeting points to the method, louis.sayGreeting
var borrowedGreeting = louis.sayGreeting;

borrowedGreeting(); //Result: ??  

So now we have an interesting case!

borrowedGreeting is a global variable, which points to the method, louis.sayGreeting, on the object louis.

Essentially, borrowedGreeting will console.log(this.greeting). However, which this does it point to?

There is a global variable, greeting.
But there is also a property, louis.greeting.

borrowedGreeting(); //Result: hello  
Take Away: this points to the object which invoked the function

Interesting! Even though borrowedGreeting points to the method louis.sayGreeting, the object which invoked the function is window.

We can look at it another way:

window.borrowedGreeting()  

A quick shortcut to figuring out the this assignment in a function, is to look to the left of the function call to see which object is invoking it.

Further Reading: Assign the this context of function calls

If we wanted to get borrowedGreeting to log out bonjour, we can use Function.prototype.call() to assign the this context of the function.

borrowedGreeting.call(louis); //Result: bonjour  

For a full explanation, I'll point you to this great article by one of my Javascript heros, Yehuda Katz: Understanding Javascript Function Invocation and "this"

Hope you had fun following through this little exercise!

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!