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
