什么是JavaScript工厂函数?
工厂函数可以定义为创建一个对象并返回它的函数。它类似于构造函数/类函数。
工厂函数在JavaScript中是一个非常有用的工具,因为它可以直接返回任何类的对象。我们还可以在这些工厂函数中填充一些固定的静态值。
这些函数不需要使用“this”关键字来访问内部值。此外,它们在初始化新对象时也不需要“new”关键字。
工厂函数可以包含内部值、方法等等。它们就像普通的函数,但目标是创建对象。工厂函数和普通函数的区别在于它返回一个带有赋值值的 对象。
使用工厂函数
当用户想要多次初始化类的对象并赋予一些指定值或静态值时,主要使用工厂函数。这使得流程变得简单,因为我们只需调用此函数并检索创建的新对象。
示例1
在下面的示例中,我们创建了一个工厂函数,每当调用此函数时,它都会返回一个新对象。
# index.html
<!DOCTYPE html>
<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" content="ie=edge" />
<title>Factory Function</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
// Function creating new objects
// without use of 'new' keyword
function createEmployeeObjects(name) {
return {
name: name,
work: function () {
console.log('New Employee Created with name: ' + name);
}
};
}
//Creating an Employee with factory function
const emp1 = createEmployeeObjects('Steve Jobs');
emp1.work();
// Create a robot with name Chitti 2.O Upgraded
const emp2 = createEmployeeObjects('Bill Gates');
emp2.work();
</script>
</body>
</html>输出
输出可以在控制台中看到。
New Employee Created with name: Steve Jobs New Employee Created with name: Bill Gates
示例2
# index.html
<!DOCTYPE html>
<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" content="ie=edge" />
<title>Factory Function</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
// Factory Function creating student object
var Student = function (rollNo, name, age) {
// creating Student object
var student = {};
// parameters as keys to this object
student.rollNo = rollNo
student.name = name;
student.age = age;
// function to greet
student.greeting = function () {
return (
'Hello I am ' + student.name +
' My roll no is ' + student.rollNo + '. I am ' + student.age + ' years old. '
);
};
return student;
};
var student1 = Student(1, 'Mark', 16);
console.log(student1.greeting());
var student2 = Student(21, 'Bill', 13);
console.log(student2.greeting());
</script>
</body>
</html>输出
在成功执行上述程序后,可以在控制台中看到输出。
Hello I am Mark My roll no is 1. I am 16 years old. Hello I am Bill My roll no is 21. I am 13 years old.
广告
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP