极客教程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>
输出:
该图显示了使用单个函数的多个数据。
示例 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>
输出:
该图显示了使用单个函数的多个数据。
示例 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>
输出：
该图显示了使用单个函数的多个数据。
示例 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>
输出：
该图显示了使用单个函数的多个数据。
示例 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中的工厂函数用于在一个函数中显示多个值。它是用来按要求显示数据的。