Show
If you have been building things using JavaScript libraries, you might have noticed a particular keyword called
In this post I will help you understand Before diving in, make
sure you have Node installedon your system. Then, open a command terminal and run the Tip: Use Bitto share and reuse your components between apps. It helps you discover and play with components, using them to build faster. Give it a try. React spinners with Bit: Choose, play, use“this” in Global EnvironmentThe working mechanism of At the global level, > this === global But this is true only inside To test this, create a file called console.log(this === global); Then run this file using the $ node index.js The reason for this is that inside a JavaScript file, “this” inside FunctionsThe value of In your function rajat() { If we run this code using To further explain this, let’s create a simple function that defines a Superhero’s real name and hero name. function Hero(heroName, realName) { Note that this function is not written in strict mode. Running this code in The reason behind this is
that since the function is not written in strict mode, If we run this code in strict mode, we will get an error because JavaScript does not allow us to assign properties Lastly, writing the function’s name in uppercase means that we need to call it as a constructor using the
const superman = new Hero("Superman", "Clark Kent"); Run the “this” inside constructorsJavaScript does not have any special constructor functions. All we can do is convert a function call into a constructor call using When a constructor call is made, a new object is
created and set as the function’s Inside the return { If we run the The only scenario where the return statement doesn’t overwrite the constructor call is if the return statement tries to return anything that is not an object. In this case, the object will contain the original values. “this” in MethodsWhen calling a function as a method of an object, Here, I have a method const hero = { This is very simply example. But in the real-world cases it can get very hard for our method to keep track of the receiver. Write the following snippet at the end of const saying = hero.dialogue(); Here, I am storing the reference to The loss of receiver usually happens when we are passing a method as a callback to another. We can either solve this by adding a wrapper function or by using call() and apply()Though a function’s Lets restructure the previous sections code snippet like this: function dialogue () { We need to connect the dialogue.call(hero) But if you are using bind()When we pass a method as a callback to another function, there is always a risk of losing the intended receiver of the method, making the The const hero = {
By doing so, our Catching “this” inside an Arrow FunctionUsing An arrow function permanently captures the To explain how const batman = this;const bruce = () => { Here, we are storing the value of a An arrow function’s An arrow function can also not be used as a constructor. Hence, we cannot assign properties to So what can arrow functions do in regards to Arrow functions can help
us access const counter = { Running this code using To make this counter work, lets rewrite it using an arrow function. const counter = { Our callback now uses Note: Do not try to write “this” in ClassesClasses are one of the most important parts of any JavaScript apps. Lets see how A class generally contains a
But in case of methods, Let’s re-create the class Hero {
But if we store a reference to the const say = batman.dialogue(); The reason for error is that JavaScript classes are
implicitly in strict mode. We are invoking const say = batman.dialogue.bind(batman); We can also do this binding inside the To sum it up…We need to use
We use pronouns to combine these two sentences. so these two sentences now become:
This short grammar lesson perfectly explains the importance of I
hope this post helped you clear any confusions you had about Learn moreCan you use this in a function JavaScript?In JavaScript, the this keyword allows us to: Reuse functions in different execution contexts. It means, a function once defined can be invoked for different objects using the this keyword.
What is this in a function in JavaScript?What is this? In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used: In an object method, this refers to the object.
Why we use this in JS?“This” keyword refers to an object that is executing the current piece of code. It references the object that is executing the current function. If the function being referenced is a regular function, “this” references the global object.
Can you pass this as a parameter in JavaScript?"Can I pass “this” as a parameter to another function in javascript" --- yes you can, it is an ordinary variable with a reference to current object.
|