Hàm Factory trong JavaScript

Trong bài viết này, bạn sẽ tìm hiểu về các hàm trả về các đối tượng, hay còn gọi là hàm Factory trong JavaScript.

Hàm Factory trong JavaScript là gì?

Hàm Factory trong JavaScript là một hàm trả về một đối tượng. Ví dụ dưới sẽ tạo một đối tượng là Person có tên là john:

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

console.log(john.getFullName());
Code language: JavaScript (javascript)

Kết quả:

John Doe    

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

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

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

console.log(jane.getFullName());Code language: JavaScript (javascript)

Kết quả:

Jane Doe

Đối tượng jane có cùng thuộc tính và phương thức với đối tượng john.

Bạn muốn tạo càng nhiều đối tượng, thì càng phải sao chép nhiều mã trùng lặp.

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

function createPerson(firstName, lastName) {
    return {
        firstName: firstName,
        lastName: lastName,
        getFullName() {
            return firstName + ' ' + lastName;
        }
    }
}Code language: JavaScript (javascript)

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

Đoạn mã sau sử dụng hàm Factory createPerson() để tạo hai đối tượng john và jane:

let john = createPerson('John', 'Doe'),
    jane = createPerson('Jane', 'Doe');

console.log(john.getFullName());
console.log(jane.getFullName());Code language: JavaScript (javascript)

Với hàm Factory, bạn có thể tạo bất kỳ số lượng đối tượng person nào mà bạn muốn mà không cần sao chép mã.

Khi bạn tạo một đối tượng, đối tượng đó yêu cầu một khoảng trống trong bộ nhớ. Nếu bạn có một nghìn đối tượng người, bạn cần một nghìn không gian trong bộ nhớ để lưu trữ các đối tượng này. Tuy nhiên, những đối tượng người này có cùng một phương thức getFullName().

Để tránh lặp lại cùng một hàm getFullName() trong bộ nhớ, 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
    }
}Code language: JavaScript (javascript)

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

const behavior = {
    getFullName() {
        return this.firstName + ' ' + this.lastName;
    }
}Code language: JavaScript (javascript)

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 behavior cho đối tượng person như sau:

let john = createPerson('John', 'Doe'),
    jane = createPerson('Jane', 'Doe');


john.getFullName = behavior.getFullName;
jane.getFullName = behavior.getFullName;

console.log(john.getFullName());
console.log(jane.getFullName());Code language: JavaScript (javascript)

Sẽ khó hơn nếu bạn có nhiều phương thức và phải gán chúng theo cách thủ công.

Đây là lý do tại sao phương thức Object.create() phát huy tác dụng.

Phương thức 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 đã có làm prototype cho đối tượng mới.

Object.create(proto, [propertiesObject])
Code language: CSS (css)

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

const behavior = {
    getFullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

function createPerson(firstName, lastName) {
    let person = Object.create(behavior);
    person.firstName = firstName;
    person.lastName = lastName;
    return person;
}Code language: JavaScript (javascript)

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

let john = createPerson('John', 'Doe'),
    jane = createPerson('Jane', 'Doe');

console.log(john.getFullName());
console.log(jane.getFullName());Code language: JavaScript (javascript)

Đoạn code này hoạt động hoàn toàn tốt. Tuy nhiên, trong thực tế, bạn sẽ hiếm khi thấy hàm Factory. Thay vào đó, bạn sẽ thấy các hàm Constructor hoặc các Class.

Kết luận

Trên đây là một số kiến thức đi kèm ví dụ cơ bản về hàm Factory trong JavaScript. Chúc bạn thành công!

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG