工厂函数到底是什么，如何应用？

最新推荐文章于 2024-08-07 20:16:00 发布

百毒不侵√303

最新推荐文章于 2024-08-07 20:16:00 发布

阅读量407

点赞数 1

分类专栏：前端基础文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_70876597/article/details/130956756

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

工厂函数

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

JavaScript中的工厂函数与构造函数是相同的。然而，它们不需要内部值的this关键字，也不需要初始化新对象的new关键字。工厂函数可以有内部值、参数等，就像常规函数一样。与普通函数不同，工厂函数返回的对象可以是任何值、方法等……

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

举个栗子：

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.下面的工厂函数示例展示了使用该函数进行的多个嵌套函数操作。这里我们可以在工厂函数内部创建两个方法，除法和乘法。我们可以为所有函数放置一个值，然后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>

结果输出为：

在这里插入图片描述