JavaScript this Keyword Examples
1. Using this in a Method
In the context of an object method in JavaScript, the `this` keyword refers to the object itself, allowing access to its properties and methods within the method’s scope. It facilitates interaction with the object’s data and behavior, providing a way to access and manipulate its state.
Example: Below is an example of this in Method.
Javascript
const person = { name: 'John' , age: 30, greet() { console.log( 'Hello, my name is ' + this .name + ' and I am ' + this .age + ' years old.' ); } }; person.greet(); // Output: Hello, my name is John and I am 30 years old. |
Hello, my name is John and I am 30 years old.
Explanation:
- We have an object
person
with propertiesname
andage
, and a methodgreet()
. - Inside the
greet()
method,this.name
refers to thename
property of theperson
object, andthis.age
refers to theage
property. - When we call
person.greet()
,this
refers to theperson
object itself. So,this.name
andthis.age
access thename
andage
properties of theperson
object, allowing us to log a personalized greeting message to the console.
2. Using this in a Function
In a JavaScript function, the behavior of the this
keyword varies depending on how the function is invoked.
Syntax:
function exampleFunction() {
console.log(this); // Refers to the current execution context
}
Example: Below is an example of this in a function.
Javascript
function greet() { console.log( 'Hello, my name is ' + this .name); } const person = { name: 'John' , sayHello: greet }; const anotherPerson = { name: 'Alice' }; greet(); // Output: Hello, my name is undefined person.sayHello(); // Output: Hello, my name is John greet.call(anotherPerson); // Output: Hello, my name is Alice |
Hello, my name is undefined Hello, my name is John Hello, my name is Alice
Explanation:
- When
greet()
is called directly,this
refers to the global object (in non-strict mode), orundefined
(in strict mode), since the function is invoked without an explicit context. - When
sayHello()
is called as a method of theperson
object,this
refers to theperson
object itself, allowing access to itsname
property. - The
call()
method is used to explicitly specify the context forthis
. Whengreet.call(anotherPerson)
is called,this
refers to theanotherPerson
object, allowing access to itsname
property.
3. Using this alone
When used alone in JavaScript, outside of any specific context, the behavior of the this
keyword depends on whether the code is running in strict mode or not.
Example:
Javascript
console.log( this ); |
{}
Explanation:
- In non-strict mode,
this
refers to the global object (e.g.,window
in browsers,global
in Node.js), representing the global scope. - In strict mode,
this
isundefined
when used alone outside of any function or object context. This behavior prevents accidental use of the global object and encourages safer coding practices.
4. Implicit Binding
When we call a function as a method of the object this keyword refers to the calling object
Example: In this example, we will see the implicit binding of this keyword.
Javascript
const person = { name: "ram" , age: 22, greet: function (){ return `Hello ${ this .name}, you are ${ this .age} years old` } } console.log(person.greet()); |
Hello ram, you are 22 years old
Output: Here this keyword is referring to the person object so it can access name and age values.
5. Explicit Binding
When we explicitly bind this keyword using the call(), bind(), or apply() method then this keyword default reference is changed to the object called using the above-specified methods.
Example: In this example, we will see the explicit binding of this keyword.
Javascript
function ageVerify(){ if ( this .age> 18){ console.log( "Yes you can drive" ); } else { console.log( "No you cannot drive" ); } } const per1 = {age: 21}; const per2 = {age: 16}; ageVerify.call(per1); ageVerify.call(per2); |
Yes you can drive No you cannot drive
6. Default Binding
When this keyword is used in global scope this is set to window object.
Example: This example shows the Default binding.
Javascript
const age = 22; function verifyAge (){ return this .age; } console.log(verifyAge()); |
undefined
7. Arrow Function Binding
When this is used in the arrow function then this has lexical scope so without the function keyword this is unable to refer to the object in the outer scope.
Example: This example shows the arrow function binding.
Javascript
const person = { name: "ram" , age: 22, greet : () =>{ return `Hello , you are ${ this .age} years old` } } console.log(person.greet()); |
Hello , you are undefined years old
JavaScript this Keyword
In JavaScript, this
keyword refers to the current context or scope within which code is executing. Its value is determined by how a function is called, and it can dynamically change depending on the invocation context.
The this keyword refers to different objects depending upon how it is used:
- When used within a method of an object,
this
points to that object. - When used by itself,
this
points to the global object. - Within a function,
this
typically points to the global object. - In a function under strict mode,
this
becomes undefined. - During an event,
this
points to the element that triggered the event. - Methods such as
call()
,apply()
, andbind()
can reassignthis
to any desired object.