this is a reference to an object. The object that
this refers to can vary, implicitly based on whether it is global, on an object, or in a constructor, and can also vary explicitly based on usage of the
Function prototype methods
In this article, you’ll learn what
this refers to implicitly based on context, and you’ll learn how to use the
apply methods to explicitly determine the value of
There are four main contexts in which the value of
this can be implicitly inferred:
- the global context
- as a method within an object
- as a constructor on a function or class
- as a DOM event handler
In the global context,
this refers to the global object. When you’re working in a browser, the global context is would be
window. When you’re working in Node.js, the global context is
If you log the value of
this without any other code, you will see what object
this refers to.
You can see that
window, which is the global object of a browser.
this would follow the same rules inside a function, but it does not. A top-level function will still retain the
this reference of the global object.
You write a top-level function, or a function that is not associated with any object, like this:
Even within a function,
this still refers to the
window, or global object.
However, when using strict mode, the context of
this within a function on the global context will be
Generally, it is safer to use strict mode to reduce the probability of
this having an unexpected scope. Rarely will someone want to refer to the
window object using
For more information about strict mode and what changes it makes regarding mistakes and security, read the Strict mode documentation on MDN.
A method is a function on an object, or a task that an object can perform. A method uses
this to refer to the properties of the object.
In this example,
this is the same as
In a nested object,
this refers to the current object scope of the method. In the following example,
this.symbol within the
details object refers to
Another way of thinking about it is that
this refers to the object on the left side of the dot when calling a method.
When you use the
new keyword, it creates an instance of a constructor function or class. Function constructors were the standard way to initialize a user-defined object before the
In this context,
this is now bound to the instance of
Country, which is contained in the
this in the
describe method refers to the instance of
Country, which is
In the browser, there is a special
this context for event handlers. In an event handler called by
this will refer to
event.currentTarget. More often than not, developers will simply use
event.currentTarget as needed to access elements in the DOM, but since the
this reference changes in this context, it is important to know.
In the following example, we’ll create a button, add text to it, and append it to the DOM. When we log the value of
this within the event handler, it will print the target.
Once you paste this into your browser, you will see a button appended to the page that says “Click me”. If you click the button, you will see
<button>Click me</button> appear in your console, as clicking the button logs the element, which is the button itself. Therefore, as you can see,
this refers to the targeted element, which is the element we added an event listener to.
In all of the previous examples, the value of
this was determined by its context—whether it is global, in an object, in a constructed function or class, or on a DOM event handler. However, using
bind, you can explicitly determine what
this should refer to.
It is difficult to define exactly when to use
bind, as it will depend on the context of your program.
bind can be particularly helpful when you want to use events to access properties of one class within another class. For example, if you were to write a simple game, you might separate the user interface and I/O into one class, and the game logic and state into another. Since the game logic would need to access input, such as key press and click, you would want to
bind the events to access the
this value of the game logic class.
The important part is to know how to determine what object
this refers to, which you can do implicitly with what you learned in the previous sections, or explicitly with the three methods you will learn next.
apply are very similar—they invoke a function with a specified
this context, and optional arguments. The only difference between
apply is that
call requires the arguments to be passed in one-by-one, and
apply takes the arguments as an array.
In this example, we’ll create an object, and create a function that references
this but has no
book have no connection, invoking
summary by itself will only print
undefined, as it’s looking for those properties on the global object.
Note: Attempting this in strict mode would result in
Uncaught TypeError: Cannot read property 'title' of undefined, as
this itself would be
However, you can use
apply to invoke the
this context of
book on the function.
There is now a connection between
summary when these methods are applied. Let’s confirm exactly what
In this case,
this actually becomes the object passed as an argument.
This is how
apply are the same, but there is one small difference. In addition to being able to pass the
this context as the first argument, you can also pass additional arguments through.
call each additional value you want to pass is sent as an additional argument.
If you try to send the exact same arguments with
apply, this is what happens:
apply, you have to pass all the arguments in an array.
The difference between passing the arguments individually or in an array is subtle, but it’s important to be aware of. It might be simpler and more convenient to use
apply, as it would not require changing the function call if some parameter details changed.
apply are one-time use methods—if you call the method with the
this context it will have it, but the original function will remain unchanged.
Sometimes, you might need to use a method over and over with the
this context of another object, and in that case you could use the
bind method to create a brand new function with an explicitly bound
In this example, every time you call
braveNewWorldSummary, it will always return the original
this value bound to it. Attempting to bind a new
this context to it will fail, so you can always trust a bound function to return the
this value you expect.
Although this example tries to bind
braveNewWorldSummary once again, it retains the original
this context from the first time it was bound.
Arrow functions do not have their own
this binding. Instead, they go up to the next level of execution.
It can be useful to use the arrow function in cases where you really want
this to refer to the outer context. For example, if you had an event listener inside of a class, you would probably want
this to refer to some value in the class.
In this example, you’ll create and append button to the DOM like before, but the class will have an event listener that will change the text value of the button when clicked.
If you click the button, the text content will change to the value of
buttonText. If you hadn’t used an arrow function here,
this would be equal to
event.currentTarget, and you wouldn’t be able to use it to access a value within the class without explicitly binding it. This tactic is often used on class methods in frameworks like React.
In this article, you learned about
apply. You also learned about how the lack of
this binding in arrow functions can be used to refer to a different context. With this knowledge, you should be able to determine the value of
this in your programs.