In JavaScript, the keyword this is one of the most important and occasionally complex concepts that indicates a different behavior based on its specific context. In general, this refers to the object that is currently accessible, and we want to utilize its features or methods. The reason for this complexity is the various ways this can be applied, depending on the contexts in which it is used.
For example, in a global function, this refers to the window object. This means that if you are in the global context, this will equal window:
function myFunction() {\r\n console.log(this);\r\n}\r\nmyFunction();In the code above, console.log(this); will output window in the browser's context. The contexts in which this is used can vary based on how the function is invoked.
Now let’s consider another example: In a specific object, this refers to that particular object. When defining a method within an object, you can use this to access its properties:
const person = {\r\n name: 'Ali',\r\n greet: function() {\r\n console.log(`Hello, my name is ${this.name}`);\r\n }\r\n};\r\nperson.greet();Here, this.name refers to Ali and the output will be "Hello, my name is Ali". This is because greet is a method defined within person.
In classes, which are one of the features introduced in ES6, this is often used. In classes, this refers to the specific object created from that class, which is indicated by how that class is constructed. Below is an example of how this is used in classes:
class Car {\r\n constructor(make, model) {\r\n this.make = make;\r\n this.model = model;\r\n }\r\n displayInfo() {\r\n console.log(`This car is a ${this.make} ${this.model}`);\r\n }\r\n}\r\nconst myCar = new Car('Toyota', 'Corolla');\r\nmyCar.displayInfo();The Car class includes a method displayInfo that uses this to access the properties make and model. An instance of the Car class and then calling the displayInfo method will result in the output "This car is a Toyota Corolla".
Code Explanation Step by Step
function myFunction() { <- Definition of a function at the global levelconsole.log(this); <- Print the value of this which equals window} <- End of the functionmyFunction(); <- Call the function in global context and print windowconst person = { <- Define an object named personname: 'Ali', <- Define a property named name with the value Aligreet: function() { <- Define a method named greetconsole.log(`Hello, my name is ${this.name}`); <- Access property name and print its value} <- End of the method}; <- End of the objectperson.greet(); <- Call the greet method and print the messageclass Car { <- Define a class named Carconstructor(make, model) { <- Define the class constructorthis.make = make; <- Assign make to this.makethis.model = model; <- Assign model to this.model} <- End of the constructordisplayInfo() { <- Define a method displayInfoconsole.log(`This car is a ${this.make} ${this.model}`); <- Access the properties and print the information} <- End of the method} <- End of the classconst myCar = new Car('Toyota', 'Corolla'); <- Create an instance of class CarmyCar.displayInfo(); <- Call the displayInfo method and display the car information.