JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

JavaScript’s `this` keyword is a source of confusion for new and experienced developers alike. It can be frustrating if, for some reason, `this` doesn’t point to the context that was intended. 

This course will help you understand JavaScript’s `this` mechanism in-depth. Marius will take us through all of the ways `this` will change its values, from why many libraries use "use strict" to how arrow functions take its outer execution context’s `this`. 

Over 8 lessons, you’ll learn:

- how JavaScript implicitly sets the `this` context, and how we can set it ourselves
- that the call-site of a function determines the `this` value of that function invocation 
- how to call a function with a specific `this` value
- how to create functions that always remain tied to a specific this context
- how `this` is treated within arrow functions and classes

Following the course, `this` will feel less frustrating, more intuitive, and far more useful in your day-to-day. 

JavaScript's `this` mechanism behaves a little differently compared to other languages. When used in the global context (outside of any function), `this` refers to the **global object**. This lesson highlights the different behavior between Node and the browser.

this in the Global Context

In most cases, the value of a function's `this` argument is determined by how the function is called. This lesson explains what `this` refers to when we call plain function. Marius points out how functions behave differently in strict and non-strict mode. `"use strict"` mode defaults `this` to undefined and prevents us from assigning values to undefined. We must call functions as a constructor to assign their `this` value correctly.



this in Function Calls

In JavaScript, there are no special constructor functions. Instead, a function call can turn into a **constructor call** when that function is called with the `new` operator in front of it.

When a function is called as a constructor, a new object is created and set as the function's `this` argument. This object is then returned implicitly from the function if no other object is returned explicitly.

In this lesson, we'll play around with constructor calls and see why it might make sense to return a different object from the function.

this in Constructor Calls

When a function is called as a method of an object, that function's `this` argument is set to the object the method is called on. That object is called the **receiver** of the function call.

Oftentimes, the receiver gets lost when we invoke a method as a function. This happens particularly often when passing a method as a callback to another function.

In this lesson we'll see how the receiver mechanism works, what problems it creates, and how to work around these problems using wrapper functions or the `bind` method.

this in Method Calls

A function's `this` argument is usually set implicitly, depending on how the function is called. Ordinary function calls, method calls, and constructor calls all lead to a different `this` value.

We can also call a function with an **explicit** `this` argument using `Function.prototype.call()` or `Function.prototype.apply()`. Both methods accept a `thisArg` as their first parameter and a variable number of additional arguments.

This lesson shows how to use `call()` and `apply()` and explains how they differ.

Specify this using .call() or .apply()

The `Function.prototype.bind()` method lets us permanently tie a function's `this` argument to a specific value. It creates a new **bound function** that calls the original function with the provided `this` argument, no matter how that bound function is called.

In this lesson we'll see how to use the `bind()` method. To better understand how it works, we'll implement a naive version of `bind()` ourselves.

Hard-Bind a Function's this Value with the .bind() Method

Arrow functions are not only syntactically different from other JavaScript functions, but they also have special `this` behavior. An arrow function doesn't have its own `this`. Instead, it uses the `this` value from its enclosing execution context.

When an arrow function is created, it permanently captures the surrounding `this` value. Neither `call()` nor `apply()` can change the `this` value later. Additionally, arrow functions cannot be used as constructors.

This lesson demonstrates that arrow functions are `this`-transparent and illustrates how they can solve the problem of incorrect `this` values within callback functions.

Capture this with an Arrow Function

Within the constructor of a class, `this` refers to the newly created object. Within a method, however, `this` might refer to another value if the method is called as an ordinary function. Just like any other object method, class methods can lose their intended receiver this way.

This lesson shows different approaches to solving this problem either by binding class methods or by using class fields with arrow functions instead.

Understand JavaScript's this Keyword in Depth

Marius Schulz

Course Content