Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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> 
1K+ Views
