Scribd
Upload
2K views

In JavaScript - This Keyword

This keyword refers to the context in which a function is called and can vary depending on how and where it is used. The behavior of this differs in the following contexts: 1) Global context - refers to the global object (window or global) 2) Function context - depends on how function is called: as a regular function it defaults to global object, as a method it refers to object, as a constructor it refers to new instance, in event handlers it refers to DOM element 3) Arrow functions - inherit this from surrounding context rather than having their own

Uploaded by

Sampath Kumar Chindirala
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2K views

In JavaScript - This Keyword

This keyword refers to the context in which a function is called and can vary depending on how and where it is used. The behavior of this differs in the following contexts: 1) Global context - refers to the global object (window or global) 2) Function context - depends on how function is called: as a regular function it defaults to global object, as a method it refers to object, as a constructor it refers to new instance, in event handlers it refers to DOM element 3) Arrow functions - inherit this from surrounding context rather than having their own

Uploaded by

Sampath Kumar Chindirala
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

In JavaScript, the this keyword refers to the current execution context or the

context in which a function is called. The behavior of this can vary depending
on how and where it is used. Here are some common scenarios in which the
behavior of this can differ:

1. Global Context: In the global scope (outside of any function), this refers
to the global object, which is window in a web browser or global in Node.js.
javascriptCopy code
console . log ( this ); // Refers to the global object (window in a browser)
2. Function Context: Inside a function, this can have different values
depending on how the function is called.
 Regular Function: In a regular function (not an arrow function),
this refers to the object that called the function. If the function is
called without an explicit context, it defaults to the global object.
javascriptCopy code
function sayHello () { console . log ( this ); // Refers to the global object if not called from an
object } sayHello (); // Refers to the global object
 Object Method: When a function is a method of an object, this
refers to the object itself.
javascriptCopy code
const person = { name : 'John' , greet : function () { console . log ( `Hello, my name is $
{this.name}` ); }, }; person. greet (); // Refers to the 'person' object
 Constructor Function: When a function is used as a constructor
with the new keyword, this refers to the newly created instance of
the object.
javascriptCopy code
function Car ( make ) { this . make = make; } const myCar = new Car ( 'Toyota' );
console . log (myCar. make ); // 'Toyota'
 Event Handlers: Inside event handlers, this often refers to the
DOM element that triggered the event.
3. Arrow Functions: Arrow functions do not have their own this context;
instead, they inherit the this value from their containing (surrounding)
function or context.
javascriptCopy code
const obj = { name : 'Alice' , greet : () => { console . log ( `Hello, my name is ${this.name}` ); }, };
obj. greet (); // 'Hello, my name is undefined' (this.name is undefined because arrow functions don't have
their own 'this')
To understand the value of this in a specific context, you need to consider how
the function containing it was called or how it was defined. The behavior of this
can be a bit complex, so it's important to pay attention to the context in which
it is used to avoid unexpected behavior in your JavaScript code.

You might also like