JavaScript Function call()

❮ Previous Next ❯

Method Reuse

You can create a method that works on various objects using the call() method.

All Functions are Methods

In JavaScript, every function is a method of an object.

If a function is not part of a JavaScript object, it's a function of the overall/global object (refer to the previous chapter).

The following example generates an object with three characteristics: firstName, lastName, and fullName.

In the sample provided, this points to the person object.

this.firstName refers to the firstName attribute of the current object (this).

Same as:

this.firstName refers to the firstName attribute of a person.

What is this?

In JavaScript, when we use the this keyword, it points to an object.

Which object that relies on how this is invoked (used or called).

The word "this" means different things based on how it's used:

In a method related to an object, the keyword this points to the specific object.

By itself, the term this points to the overall object known as the global object.

In a function, the term this points to the overall object known as the global object.

In a function, when in strict mode, the value of this is undefined.

At an event, this means the element that got the event.

HTML methods such as call(), apply(), and bind() can make the reference of this point to any object.

Note

this is not like a variable; it's a keyword. You can't alter the value of this.

The JavaScript call() Method

The call() method in JavaScript is already set up and ready to use.

You can use it to call a method, providing an owner object as an argument.

Using call(), an object can utilize a method that belongs to a different object.

This example uses the fullName method of a person and applies it to person1.

This instance invokes the fullName function of a person, applying it to person2:

The call() Method with Arguments

The call() method can take in information or values known as arguments:

<!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>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>This example uses the fullName function of a person object, applying it to 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>

<!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>

<!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>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics