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 Apply
Method Reuse
With the apply() method, you can write a method that can be used on different objects.
The JavaScript apply() Method
The apply() method is similar to the call() method.
In this example the fullName method of person is applied on person1:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>
<p id=”demo”></p>
<script>
const person = {
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
}
const person1 = {
firstName:”John”,
lastName: “Doe”
}
document.getElementById(“demo”).innerHTML = person.fullName.apply(person1);
</script>
</body>
</html>
Output
JavaScript Functions
In this example the fulllName method of person is applied on person1:
The Difference Between call() and apply()
The difference is:
The call() method takes arguments separately.
The apply() method takes arguments in the form of an array.
The apply() method is easy to handle if you want to use an array instead of an argument list.
The apply() Method with Arguments
The apply() method accepts arguments in the form of an array:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> 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”
}
document.getElementById(“demo”).innerHTML = person.fullName.apply(person1, [“Oslo”, “Norway”]);
</script>
</body>
</html>
Output
JavaScript Functions
In HTML the value of this, in a global function, is the window object.
John Doe,Oslo,Norway
Compared with the call() method
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
myObject.fullName() will return John Doe:
John Doe
The fullName method is a function. The function belongs to the object. myObject is the owner of the function.
The thing known as this is the object that “owns” the JavaScript code. In this case, the value of this is myObject.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The value of <b>this</b>, in an object method, is the owner object.</p>
<p id=”demo”></p>
<script>
const myObject = {
firstName:”John”,
lastName: “Doe”,
fullName: function() {
return this;
}
}
document.getElementById(“demo”).innerHTML = myObject.fullName();
</script>
</body>
</html>
Output
JavaScript Functions
This example calls the fullName method of person, using it on person1:
John Doe,Oslo,Norway
Simulate a Max Method on Arrays
Find the largest number (in a list of numbers) using the Math.max() method.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.max()</h2>
<p>This example returns the highest number in a list of number arguments:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.max(1,2,3);
</script>
</body>
</html>
Output
JavaScript Math.max()
This example returns the highest number in a list of number arguments:
3
As JavaScript arrays do not contains a max() method, so you can apply the Math.max() method instead.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.max.apply(null, [1,2,3]);
</script>
</body>
</html>
Output
JavaScript apply()
This example returns the highest number in an array of numbers:
3