Loading lesson path
Concept visual
Start at both ends
When the this keyword is used in a function, it refers to an Object. Which Object, is not decided when the function is written. The value of this is decided when the function is called. This chapter contains an advanced topic. Make sure you understand basic JavaScript functions before continuing.
All JavaScript functions are object methods.
A method of the global object this in an Object Method
this refers to the object that owns the method.
An object with 3 properties, firstName, lastName, fullName.
const person = {
firstName: "John", lastName: "Doe", fullName: function() {
return this.firstName + " " + this.lastName;
}
};
person.fullName();In the example above, this refers to the person object. this.firstName means the firstName property of person. this.firstName is the same as person.firstName. this in a Function (Default)
By default, when this is used in a regular function, this refers to the global object.In a browser window, the global object is [object Window]
Example function myFunction() {
return this;
}
In the example above, this is the global object.
this in a Function (Strict Mode)strict mode does not allow default binding. In strict mode, this used inside a function is undefined.
"use strict";
function myFunction() {
return this;
}In the example above, this is undefined. this
When used outside a function, this always refers to the global object.In a browser window the global object is [object Window]
let x = this;In a regular function in strict mode, when used outside a function, this also refers to the global object
"use strict";
let x = this;
In both the examples above, this is the global object.
It is so because , this is in the global scope.In JavaScript, globalThis is a special built-in object that provides a standard way to access the global object, regardless of the environment your code runs in - whether it is a browser, Node.js, a Web Worker, or another JS runtime.Formula
The global object is the top - level object in a JavaScript environment:In browsers, it is window.
In Node.js, it is global.In Web Workers, it is self. Each environment used to have its own name for this object. This caused compatibility issues for code meant to run everywhere. globalThis was introduced in
(ES11) to solve that problem. It is a unified reference to the global object, no matter the environment.Example globalThis === window; // true in browsers globalThis === global; // true in Node.js this in Event HandlersIn HTML event handlers, this refers to the HTML element that received the event:
<button onclick="this.innerHTML='Clicked!'">Click Me</button> <button onclick="this.style.display='none'">
Remove Me! </button> this in Arrow Functions Arrow functions do not have their own this. They inherit this from the surrounding scope. In regular functions the this keyword represents the object that called the function, which could be the window, the document, a button or whatever. With arrow functions the this keyword always represents the object that defined the arrow function.
? In JavaScript, the this keyword refers to an object. The this keyword refers to different objects depending on how it is used:
Alone, this refers to the global object.
In a function, this refers to the global object.In a function, in strict mode, this is undefined. In an object method, this refers to the object. In an event, this refers to the element that received the event. In methods like call(), apply() and bind(), this can refer to any object. this is not a variable. this is a keyword. You cannot change the value of this.
Use the following precedence of order to determine which object this refers to:
bind() this is in a function being called using bind()
apply() this is in a function being called using apply()
call() this is in a function being called using call()
Object method this is in an object function (method)
Global scope this is in a function in the global scope
Below are two examples that call the same method twice:
The first example uses a regular function, and the second example uses an arrow function. The result shows that the first example returns two different objects (window and button), and the second example returns the window object twice, because the window object is the "owner" of the function.