Hey reader👋 Hope you are doing well😊
In the last post we have seen about objects in JavaScript. In this post we are going to know about this keyword in JavaScript, we are going to start from very basic and take it to advanced level.
So let's get started🔥
this Keyword
In JavaScript, the this keyword is a special identifier that refers to the context in which the current code is executing. Its behavior can vary depending on the mode (strict or non-strict) and the type of function call.
Different Contexts for this
Global Context (or default binding):
In the global execution context (outside of any function), this refers to the global object. In a browser, the global object is window.
this in a Function (Default)
In a function, the global object is the default binding for this.
this in event handlers
In HTML event handlers, this refers to the HTML element that received the event.
Object Method Binding
When a function is called as a method of an object, this refers to the object the method is called on.
Arrow Functions
Arrow functions do not have their own this context. Instead, this is lexically inherited from the surrounding non-arrow function or global context.
In regular functions the this keyword represented 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.
As here the function is called when the button is clicked so here this repersents the button.
In this case this refers to the owner of function i.e. window object.
Explicit Function Binding
call() Method-:
The call() method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter).
This example calls the fullName method of person, using it on person1.
apply() Method-:
The apply() method is similar to the call() method.The difference is-: the call() method takes arguments separately whereas the apply() method takes arguments as an array.
bind() Method-:
With the bind() method, an object can borrow a method from another object.
Here the member object borrows the fullname method from the person object.
Sometimes the bind() method has to be used to prevent losing this.
Inside the setTimeout callback, this no longer refers to obj. Instead, it refers to the global object (window in browsers) in non-strict mode or is undefined in strict mode.
The value of this can be lost in callbacks because the context in which the callback is executed might differ from the context in which it was defined. This happens due to how JavaScript handles function calls and the default binding of this. To address this, you can use bind, arrow functions, or store this in a variable to preserve the intended context.
Understanding how this works is crucial for writing correct and predictable JavaScript code, especially in the context of object-oriented programming, event handling, and functional programming paradigms.
I hope you have understood this blog. Don't forget to follow me and leave some reaction for this post.
Thankyou 🩵
Top comments (0)