How to invoke a function with a function constructor in JavaScript?


A function constructor invocation creates a new object. The new object inherits the properties and methods from the constructor. This keyword in the constructor does not have a value. This value will be a new object created when the function is invoked. Function construction creates functions that execute the global scope only.

In JavaScript invoking a function with a function, the constructor is different from invoking a function as a method or invoking a function. Because it creates a new object that constructs properties and methods.

Syntax

Following is the snippet invoking a function with a function constructor. Here, we are creating a function and pa, passing parameters, and inheriting these two parameters to this keyword with var1 and var2.

Function functioName(arg1, arg2){
   this.var1 = arg1;
   this.var2 = arg2;
}
var x = new functionName(1,2) // creating the object

Example: 1

In the following example, a function and a function constructor were created. And the function constructor inherits the properties of the function. Then we were passing the value as an object.

<!DOCTYPE html>
<html>
<head>
   <title>Invoke Function Constructor</title>
</head>
<body>
   <script>
      function funcDemo(arg1, arg2) {
         this.var1 = arg1;
         this.var2 = arg2;
      }
      var obj = new funcDemo(10, 20);
      document.write(JSON.stringify(obj));
      document.write("<br>")
      document.write(obj.var1 + " " + obj.var2);
   </script>
</body>
</html>

Example 2

In the following example, we are creating a function constructor and also passing the constructor method. And calling the method and variables with the help of an object.

<!DOCTYPE html>
<html>
<head>
   <title>Invoke Function Constructor</title>
</head>
<body>
   <script>
      function details() {
         this.name = "Aman kumar";
         this.age = 23;
         this.greet = function () {
            document.write("Hello! What is your name and age ?");
         };
      }
      var obj = new details();
      obj.greet();
      document.write("<br>");
      document.write(obj.name + " " + obj.age);
   </script>
</body>
</html>

Example 3

In the following example, we are using a function constructor named User and printing the details of the user.

<!DOCTYPE html>
<html>
<head>
   <title>Invoke Function Constructor</title>
</head>
<body>
   <script>
      function Users(name, age, state, degree, designation) {
         this.name = name;
         this.age = age;
         this.state = state;
         this.degree = degree;
         this.designation = designation;
      }
      const obj = new Users(
         "Aman",
         23,
         "Jharkhand",
         "B-Tech",
         "technical Writer"
      );
      document.write(JSON.stringify(obj));
   </script>
</body>
</html>

Example 4

Let us see another example −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Invoke a function with a function constructor</title>
<div id="getArea"></div>
</head>
<body>
   <script type="text/javascript">
      let areaFun = function (side1, side2) {
         this.length = side1;
         this.width = side2;
      };
      let result = new areaFun(5, 5);
      document.getElementById("getArea").innerHTML = JSON.stringify(result);
   </script>
</body>
</html>

Advertisements