What is “this” keyword ?
“this” keyword refers to the current object.
Why is “this” keyword used ?
Whenever javascript code is executed, its reference is to the current object/method codes is called using “this” keyword.
“this” keyword returns different values for different scenarios.
1. “this” is declared alone.
2. “this” inside an object method.
3. “this” inside a default function
4. “this” inside a function in strict mode.
5. “this” inside event handlers.
6. “this” inside object methods.
7. “this” inside call() method.
8. “this” inside apply() method.
Javascript online learning !!!
Click to Learn More about – Javascript online learning
1. “this” is declared alone.
When “this” keyword is used alone, it refers the Global Object.The browser Global object is [object Window]
Example :
<script>
var a = this;
document.writeln("this keyword is declared alone<br/>");
document.writeln("Printing the variable a = "+a);
</script>
Output :
2. “this” inside an object method.
In an object method, this refers to the “owner” of the method.
The StudentInfo object is the owner of the fullName method.
Example :
<script>
var StudentInfo = {
firstName: "Abdul",
lastName : "Kalaam",
age : "87",
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.writeln("Printing the FullName including FirstName and LastName<br/>");
document.writeln("<b>FullName = " + StudentInfo.fullName()+"</b>");
</script>
Output :
3. “this” inside a default function
The owner of the function is the default binding for “this”.
myFunction() returns [object Window] .
Example :
<script>
function myFunction(){
return this;
};
document.writeln("Calling myFunction() <br/>");
document.writeln("<b>myFunction return value = " + myFunction()+"</b>");
</script>
Output :
4. “this” inside a function in strict mode.
“this” refers to the window Object in strict mode.
Example :
<script>
"use strict"
var a = this;
document.writeln("Strict mode printing the values <br/>");
document.writeln("<b> the value of a = " + a+"</b>");
</script>
Output :
5. “this” inside event handlers.
In HTML event handlers, “this” keyword refers to the HTML element that receives the event.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
</head>
<body>
<div>
<button type="button" style="width:300px;height:100px;"onclick="this.style.color='red'">
<b><font style="font-size:30px;">Click Me</font></b>
</button>
</div>
</body>
</html>
Output :
6. “this” inside object methods.
Printing the whole object
Example :
<script>
var StudentInfo = {
fName : "Abdul",
lName : "Kalaam",
age : "87",
country : "India",
fullName : function(){
return this;
}
}
document.writeln("Printing the fullName <br/>");
document.writeln("<b> This returns the whole StudentInfo Object = " + StudentInfo.fullName()+"</b>");
</script>
Output :
7. “this” inside call() method.
call() method is a predefined JavaScript method.
call() method can be used to invoke a method with an owner object as an argument (parameter).
In call() method, an object can use a method belonging to another object.
Example :
<script>
var StudentInfo = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var student1 = {
firstName:"Sachin",
lastName: "Tendulkar"
}
var student2 = {
firstName:"Rahul",
lastName: "Dravid"
}
document.writeln("Printing the Student Info <br/>");
document.writeln("This prints the student1 firstname and lastname = <b>" + StudentInfo.fullName.call(student1)+"</b><br/>");
document.writeln("This prints the student2 firstname and lastname = <b>" + StudentInfo.fullName.call(student2)+"</b><br/>");
</script>
Output :
call() method with arguments
Example :
<script>
var StudentInfo = {
fullName: function(age,country) {
return this.firstName + " " + this.lastName+" "+age+" "+country;
}
}
var student1 = {
firstName:"Sachin",
lastName: "Tendulkar"
}
var student2 = {
firstName:"Rahul",
lastName: "Dravid"
}
document.writeln("Printing the Student Info <br/>");
document.writeln("This prints the student1 firstname and lastname = <b>" + StudentInfo.fullName.call(student1,"45","India")+"</b><br/>");
document.writeln("This prints the student2 firstname and lastname = <b>" + StudentInfo.fullName.call(student2,"43","India")+"</b><br/>");
</script>
Output :
8. “this” inside apply() method.
The apply() method is similar to the call() method (previous chapter).
The apply() method takes arguments as an array.
Example :
<script>
var StudentInfo = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var student1 = {
firstName:"Sachin",
lastName: "Tendulkar"
}
var student2 = {
firstName:"Rahul",
lastName: "Dravid"
}
document.writeln("Printing the Student Info <br/>");
document.writeln("This prints the student1 firstname and lastname = <b>" + StudentInfo.fullName.apply(student1)+"</b><br/>");
document.writeln("This prints the student2 firstname and lastname = <b>" + StudentInfo.fullName.apply(student2)+"</b><br/>");
</script>
Output :
apply() method with arguments
Example :
<script>
var StudentInfo = {
fullName: function(age,country) {
return this.firstName + " " + this.lastName+" "+age+" "+country;
}
}
var student1 = {
firstName:"Sachin",
lastName: "Tendulkar"
}
var student2 = {
firstName:"Rahul",
lastName: "Dravid"
}
document.writeln("Printing the Student Info <br/>");
document.writeln("This prints the student1 firstname and lastname = <b>" + StudentInfo.fullName.apply(student1,["45","India"])+"</b><br/>");
document.writeln("This prints the student2 firstname and lastname = <b>" + StudentInfo.fullName.apply(student2,["43","India"])+"</b><br/>");
</script>
Output :
