JavaScript工厂函数

工厂函数与构造函数或类函数相关。但是，它产生并返回一个对象，而不需要一个新的对象。

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>