Using JavaScript this keyword in object-oriented code

Posted by

Understanding the JavaScript This Keyword in Object-Oriented Code

In JavaScript, the this keyword is a special keyword that is used to refer to the current object in the scope of the code. It is most commonly used in object-oriented programming, where it can be used to refer to the object that is currently being used in a method. This keyword is an essential part of understanding how objects work in JavaScript, so it is important to understand how it works and how to properly use it.

What is the JavaScript This Keyword?

The this keyword is used to refer to the current object in the scope of the code. This means that it will always refer to whatever object the code is currently being executed in. It is used to refer to the object in which a method is being executed, so it can be used to access any of that object’s properties or methods.

For example, if you have an object called person, this will refer to that object. This means that if you have a method called sayName() in the person object, then you can use this to access the properties of that object, such as the name property.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let person = { 
  name: 'John', 
  sayName() { 
    console.log(this.name); 
  } 
}; 

person.sayName(); // Outputs 'John'

[/dm_code_snippet]

In this example, this is used to refer to the person object, so the name property can be accessed using this.name. This is an important concept to understand when using this in object-oriented programming.

When to Use the JavaScript This Keyword

When writing object-oriented code, the this keyword can be used to access properties and methods of the current object. It is most commonly used in methods to refer to the object that contains the method. This allows you to access any of the object’s properties or methods without having to explicitly pass the object as an argument.

It is also important to understand that this can be changed depending on how the code is executed. For example, if you call a method using the call() or apply() methods, then this will refer to the object that is passed as the first argument to these methods.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let person = { 
  name: 'John', 
  sayName() { 
    console.log(this.name); 
  } 
}; 

let otherPerson = { 
  name: 'Jane' 
}; 

person.sayName.call(otherPerson); // Outputs 'Jane'

[/dm_code_snippet]

In this example, the sayName() method is called using the call() method. This means that this will refer to the otherPerson object, so the name property of that object is printed when the method is called.

Conclusion

The this keyword is an essential part of understanding how objects work in JavaScript. It is used to refer to the current object in the scope of the code, so it can be used to access any of that object’s properties or methods. It is important to understand how this can be changed depending on how the code is executed, as this can affect which object this refers to.