JavaScript: JavaScript Factory Functions

Giới thiệu về Factory Functions trong JavaScript

Factory Functions là hàm trả về một đối tượng (object) mới. Sau đây sẽ tạo một đối tượng người có tên person1:

let person1 = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};

console.log(person1.getFullName());

Output

John Doe

Đối tượng person1 có hai thuộc tính: firstName và lastName, và một phương thức getFullName() trả về tên đầy đủ.

Giả sử bạn cần tạo một đối tượng tương tự khác có tên là person2, bạn có thể sao chép mã như sau:

let person2 = {
  firstName: 'Jane',
  lastName: 'Doe',
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};

console.log(person2.getFullName());

Output

Jane Doe

Trong ví dụ này, các đối tượng person1và person2 có cùng thuộc tính và phương thức.

Vấn đề là bạn càng muốn tạo nhiều đối tượng thì bạn càng có nhiều mã trùng lặp.

Để tránh sao chép lại cùng một đoạn mã, bạn có thể xác định một hàm tạo đối tượng person:

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName,
    getFullName() {
      return firstName + ' ' + lastName;
    },
  };
}

Khi một hàm tạo và trả về một đối tượng mới, nó được gọi là factory function. Hàn createPerson() là một factory function vì nó trả về một đối tượng person mới.

Phần sau đây trình bày cách sử dụng factory function createPerson() để tạo hai đối tượng person1 và person2:

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName,
    getFullName() {
      return firstName + ' ' + lastName;
    },
  };
}

let person1 = createPerson('John', 'Doe');
let person2 = createPerson('Jane', 'Doe');

console.log(person1.getFullName());
console.log(person2.getFullName());

Bằng cách sử dụng factory function, bạn có thể tạo số lượng đối tượng person bất kỳ mà không cần sao chép mã.

Khi bạn tạo một đối tượng, JavaScript engine sẽ phân bổ bộ nhớ cho nó. Nếu bạn tạo nhiều đối tượng person, JavaScript engine cần nhiều dung lượng bộ nhớ để lưu trữ các đối tượng này.

Tuy nhiên, mỗi đối tượng person có một bản sao của cùng một phương thức getFullName(). Đó không phải là một cách quản lý bộ nhớ hiệu quả.

Để tránh trùng lặp cùng một phương thức getFullName() trong mọi đối tượng, bạn có thể xóa phương thức getFullName() khỏi đối tượng person:

function createPerson(firstName, lastName) {
    return {
        firstName: firstName,
        lastName: lastName
    }
}

Và di chuyển phương thức này sang đối tượng khác:

var personActions = {
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};

Và trước khi gọi phương thức getFullName() trên đối tượng person, bạn có thể gán phương thức của đối tượng personActions cho đối tượng person như sau:

let person1 = createPerson('John', 'Doe');
let person2 = createPerson('Jane', 'Doe');

person1.getFullName = personActions.getFullName;
person2.getFullName = personActions.getFullName;

console.log(person1.getFullName());
console.log(person2.getFullName());

Cách tiếp cận này không thể mở rộng nếu đối tượng có nhiều phương thức vì bạn phải gán chúng theo cách thủ công. Đây là lý do tại sao Object.create() phát huy tác dụng.

Object.create()

Phương thức Object.create() tạo một đối tượng mới bằng cách sử dụng một đối tượng hiện có làm nguyên mẫu (prototype) của đối tượng mới:

Object.create(proto, [propertiesObject])

Vì vậy, bạn có thể sử dụng Object.create() như sau:

var personActions = {
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};

function createPerson(firstName, lastName) {
  let person = Object.create(personActions);
  person.firstName = firstName;
  person.lastName = lastName;
  return person;
}

Bây giờ, bạn có thể tạo đối tượng person và gọi các phương thức của đối tượng personActions:

let person1 = createPerson('John', 'Doe');
let person2 = createPerson('Jane', 'Doe');

console.log(person1.getFullName());
console.log(person2.getFullName())

Mã hoạt động hoàn toàn tốt. Tuy nhiên, trong thực tế, bạn sẽ hiếm khi sử dụng các factory function. Thay vào đó, bạn sử dụng class hoặc mẫu hàm tạo/nguyên mẫu.

Tóm tắt

• Factory function là hàm trả về một đối tượng mới.
• Sử dụng Object.create() để tạo một đối tượng bằng cách sử dụng đối tượng hiện có làm nguyên mẫu.