JavaScript 工厂函数

2025年3月18日 | 阅读时长 4 分钟

工厂函数与构造函数或类函数相关。然而，它在不需要 `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 TpointTech 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('TpointTech');
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>

输出

图像显示了一个函数中的多个数据。

Example3

下面的工厂函数示例用于通过函数显示多个数据。数据使用 `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 TpointTech 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>

输出

图像显示了一个函数中的多个数据。

Example4

下面的工厂函数示例用于通过函数显示多个数据。数据使用 `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 TpointTech 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 TpointTech 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 中的工厂函数用于通过单个函数显示多个值。它用于根据需要显示数据。

下一主题JavaScript for...in 循环

JavaScript 工厂函数

语法

示例

示例 1

示例 2

Example3

Example4

示例 5

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 工厂函数

语法

示例

示例 1

示例 2

Example3

Example4

示例 5

结论

相关帖子

如何使用 JavaScript 绘制一条线

PolyFill JS

从 JavaScript IndexedDB 删除数据

JavaScript scrollIntoView

如何使用 JavaScript 使文本变为斜体

JavaScript classList

如何检查 JavaScript 中的空对象

如何使用 JavaScript 创建图像映射

JavaScript 中的随机图像生成器