JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Function Call
Method Reuse
Using the call() method, allows you to write a method that can be used on different objects.
All Functions are Methods
In JavaScript all functions are object methods.
The example below is used to creates an object with 3 properties, firstName, lastName, fullName.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example creates an object with 3 properties (firstName, lastName, fullName).</p>
<p>The fullName property is a method:</p>
<p id=”demo”></p>
<script>
const myObject = {
firstName:”John”,
lastName: “Doe”,
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
}
document.getElementById(“demo”).innerHTML = myObject.fullName();
</script>
</body>
</html>
Output
JavaScript Functions
This example creates an object with 3 properties (firstName, lastName, fullName).
The fullName property is a method:
The JavaScript call() Method
The call() method is a predefined JavaScript method.
It is used to invoke (call) a method with an owner object as an argument (parameter).
With call(), an object is used as a method belonging to another object.
This example calls the fullName method of person, using it on person1.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>
<p id=”demo”></p>
<script>
const person = {
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
}
const person1 = {
firstName:”John”,
lastName: “Doe”
}
const person2 = {
firstName:”Mary”,
lastName: “Doe”
}
document.getElementById(“demo”).innerHTML = person.fullName.call(person1);
</script>
</body>
</html>
Output
JavaScript Functions
This example calls the fullName method of person, using it on person1:
John Doe
This example is used to call the fullName method of person, using it on person2.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person2:</p>
<p id=”demo”></p>
<script>
const person = {
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
}
const person1 = {
firstName:”John”,
lastName: “Doe”
}
const person2 = {
firstName:”Mary”,
lastName: “Doe”
}
document.getElementById(“demo”).innerHTML = person.fullName.call(person2);
</script>
</body>
</html>
Output
JavaScript Functions
This example calls the fullName method of person, using it on person2:
Mary Doe
The call() Method with Arguments
The call() method is used to accept arguments.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>
<p id=”demo”></p>
<script>
const person = {
fullName: function(city, country) {
return this.firstName + ” ” + this.lastName + “,” + city + “,” + country;
}
}
const person1 = {
firstName:”John”,
lastName: “Doe”
}
const person2 = {
firstName:”Mary”,
lastName: “Doe”
}
document.getElementById(“demo”).innerHTML = person.fullName.call(person1, “Oslo”, “Norway”);
</script>
</body>
</html>
Output
JavaScript Functions
This example calls the fullName method of person, using it on person1:
John Doe,Oslo,Norway