Javascript 工厂函数

工厂函数与构造函数或类函数相关。然而，它生成并返回一个对象而不需要使用new关键字。

Javascript中的工厂函数与构造函数完全相同。然而，在初始化新对象时，它们不需要使用内部值的’this’关键字或’new’关键字。工厂函数可以像常规函数一样具有内部值、参数等。与普通函数不同的是，工厂函数返回一个具有任何值、方法等的对象。

如果我们需要产生多个包含相同逻辑的对象，我们可以将逻辑写在一个函数中，并将其用作工厂。就像一个真实的工厂制造物品一样。

语法

使用以下工厂语法来使用函数返回多个数据。

<script>
 function factoryFunctionName(data) {
return data;
}
</script>

这里，数据是可变的，可以使用工厂函数获取输入值并返回工厂变量数据。

示例

以下示例有助于了解工厂函数以及如何使用JavaScript操作它。

示例1

以下工厂函数示例用于使用函数显示多个数据。数据使用console.log函数在控制台中显示。

<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To JavaTpoint Website
</h1>
<script>
//function making new objects with a factory function
function createsObjects(sname) {
return {
sname: sname,
swork: function () {
console.log('New Student is Created with name: ' + sname);
}
};
}
//Creating the first value with a factory function
const student1 = createsObjects('Javatpoint');
student1.swork();
// Create a second value with the same function
const student2 = createsObjects('tutorialsandexample');
student2.swork();
</script>
</body>
</html>

输出：

该图像使用单个函数显示多个数据。

Javascript 工厂函数

示例2

以下工厂函数示例用于显示数学运算及其输出。

<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>   
<title> Javascript Factory Function </title>
</head>
<body>
<script>
//function making new objects with a factory function
function createsObjects(value) {
return {
value: value,
swork: function () {
console.log('Get value: ' + value*value);
}
};
}
//Creating a first value with a factory function
const operate1 = createsObjects(3);
operate1.swork();
// Create a second value with the same function
const operate2 = createsObjects(4);
operate2.swork();
</script>
</body>
</html>

输出：

图片展示了使用单个函数表示的多个数据。

Javascript 工厂函数

示例3

以下工厂函数示例用于使用函数显示多个数据。使用console.log函数将数据显示在控制台中。在这里，我们使用”var”来创建变量。

<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To JavaTpoint Website
</h1>
<h3> Javascript Factory Function </h3>
<script>
// Factory Function creating student data
var Student = function (name, age, mark) {
// creating student object
var student = {};
// parameters as keys to this object
student.name = name;
student.age = age;
student.mark = mark;
//function to student greeting function
student.greeting = function () {
return (
'Hello Student name: ' + student.name
+ '. student age: ' + student.age
+ ' . student marks ' + student.age+                        '.'
);
};
return student;
};
var student1 = Student('Radhika', 15, 80);
console.log(student1.greeting());
var student2 = Student('Sam', 12, 90);
console.log(student2.greeting());
var student3 = Student('Anand', 16, 70);
console.log(student3.greeting());
</script>
</body>
</html>

输出

图像显示了使用单个函数显示的多个数据。

Javascript 工厂函数

示例4

下面的工厂函数示例用于使用函数显示多个数据。数据通过console.log函数在控制台中显示。在工厂函数中，我们可以使用不同的对象来使用fullname。

<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To JavaTpoint Website
</h1>
<h3> Javascript Factory Function </h3>
<script>
// Factory Function creating student data
function createEmp(firstemp, lastemp) {
return {
firstemp: firstemp,
lastemp: lastemp,
empFullName() {
return 'Full Name:' +firstemp + ' ' + lastemp;
},
};
}
let emp1 = createEmp('Sadhana', 'Jog');
let emp2 = createEmp('Samir', 'Radhe');
console.log(emp1.empFullName());
console.log(emp2.empFullName());
</script>
</body>
</html>

输出

该图像使用单一函数来显示多个数据。
Javascript 工厂函数

示例5

以下工厂函数示例用于使用函数显示多个嵌套函数操作。在这里，我们可以在工厂函数中创建两个方法，分别是除法和乘法。我们可以为所有函数提供一个单一值，然后JavaScript会对单个工厂函数的值进行乘法和除法操作。

<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To JavaTpoint Website
</h1>
<h3> Javascript Factory Function </h3>
<script>
// Factory Function creating student data
function createOperate(firstemp, lastemp) {
return {
firstemp: firstemp,
lastemp: lastemp,
divisiOn() {
return 'Division:' +firstemp / lastemp;
},
mulTiplicTion() {
return 'Multiplication:' +firstemp * lastemp;
},
};
}
let valf1 = createOperate('8', '5');
let valf2 = createOperate(12, 8);
console.log(valf1.divisiOn());
console.log(valf2.divisiOn());
console.log(valf1.mulTiplicTion());
console.log(valf2.mulTiplicTion());
</script>
</body>
</html>

输出

该图像使用一个函数显示了多个数据。

Javascript 工厂函数