如何在 JavaScript 中使用函数构造器调用函数?
使用函数构造器调用函数会创建一个新的对象。新对象继承了构造器的属性和方法。构造器中的this关键字没有值。当函数被调用时,这个值将是一个新创建的对象。函数构造创建的函数只在全局作用域中执行。
在 JavaScript 中,使用函数构造器调用函数与将函数作为方法调用或将函数作为函数调用不同。因为它创建了一个构建属性和方法的新对象。
语法
以下是使用函数构造器调用函数的代码片段。在这里,我们创建了一个函数并传递参数,并将这两个参数继承到 this 关键字的 var1 和 var2 中。
Function functioName(arg1, arg2){ this.var1 = arg1; this.var2 = arg2; } var x = new functionName(1,2) // creating the object
示例:1
在下面的示例中,创建了一个函数和一个函数构造器。函数构造器继承了函数的属性。然后我们将值作为对象传递。
<!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>
示例 2
在下面的示例中,我们创建了一个函数构造器,也传递了构造器方法。并借助对象调用方法和变量。
<!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>
示例 3
在下面的示例中,我们使用了一个名为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>
示例 4
让我们看另一个例子 -
<!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>
广告