Function Call

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