什麼是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.

更新於:2022年4月28日

13K+ 瀏覽量

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告