Chapter 6. The this Keyword

Conceptual Overview of this and How It Refers to Objects

When a function is created, a keyword called this is created (behind the scenes), which links to the object in which the function operates. Said another way, this is available to the scope of its function, yet is a reference to the object of which that function is a property/method.

Let’s take a look at the cody object from Chapter 1 again:

Live Code

<!DOCTYPE html><html lang="en"><body><script>

var cody = {
   living : true,
   age : 23,
   gender : 'male',
   getGender : function() {return cody.gender;}
};

console.log(cody.getGender()); // logs 'male'

</script></body></html>

Notice how inside of the getGender function, we are accessing the gender property using dot notation (e.g., cody.gender) on the cody object itself. This can be rewritten using this to access the cody object because this points to the cody object.

Live Code

<!DOCTYPE html><html lang="en"><body><script>

var cody = {
   living: true,
   age: 23,
   gender: 'male',
   getGender: function() {return this.gender;}
};

console.log(cody.getGender()); // logs 'male'

</script></body></html>

The this used in this.gender simply refers to the cody object on which the function is operating.

The topic of this can be confusing, but it does not have to be. Just remember that, in general, this is used inside of functions to refer to the object the function is contained within, as opposed to the function itself [exceptions include using the new keyword or call() and apply() ...

Get JavaScript Enlightenment now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial