Cách tạo đối tượng trong JavaScript

bởi Kaashan Hussain

Tất cả chúng ta xử lý các đối tượng theo cách này hay cách khác trong khi viết mã bằng ngôn ngữ lập trình. Trong JavaScript, các đối tượng cung cấp cách để chúng ta lưu trữ, thao tác và gửi dữ liệu qua mạng.

Có nhiều cách mà các đối tượng trong JavaScript khác với các đối tượng trong các ngôn ngữ lập trình chính thống khác, như Java. Tôi sẽ cố gắng trình bày điều đó trong một chủ đề khác. Ở đây, chúng ta hãy chỉ tập trung vào các cách khác nhau mà JavaScript cho phép chúng ta tạo các đối tượng.

Trong JavaScript, hãy coi các đối tượng là một tập hợp các cặp ‘key:value’. Điều này mang đến cho chúng ta cách đầu tiên và phổ biến nhất để tạo các đối tượng trong JavaScript.

Hãy bắt đầu điều này.

1. Tạo đối tượng sử dụng cú pháp ký tự đối tượng

Điều này thực sự đơn giản. Tất cả những gì bạn phải làm là ném các cặp giá trị khóa được phân tách bằng ‘:’ bên trong một tập hợp các dấu ngoặc nhọn ({ }) và đối tượng của bạn đã sẵn sàng để được phục vụ (hoặc tiêu thụ), như bên dưới:

const person = {
  firstName: 'testFirstName',
  lastName: 'testLastName'
};

Đây là cách đơn giản và phổ biến nhất để tạo đối tượng trong JavaScript.

2. Tạo đối tượng bằng từ khóa ‘new’

Phương pháp tạo đối tượng này giống với cách các đối tượng được tạo trong các ngôn ngữ dựa trên lớp, như Java. Nhân tiện, bắt đầu với ES6, các lớp cũng có nguồn gốc từ JavaScript và chúng ta sẽ xem xét việc tạo các đối tượng bằng cách định nghĩa các lớp ở cuối bài viết này. Vì vậy, để tạo một đối tượng bằng từ khóa ‘new’, bạn cần có một hàm tạo.

Dưới đây là 2 cách bạn có thể sử dụng mẫu từ khóa ‘mới’ —

a) Sử dụng từ khóa ‘mới’ với ‘hàm tạo Đối tượng dựng sẵn

Để tạo một đối tượng, hãy sử dụng từ khóa mới với Object() hàm tạo, như thế này:

const person = new Object();

Bây giờ, để thêm các thuộc tính cho đối tượng này, chúng ta phải làm như sau:

person.firstName="testFirstName";
person.lastName="testLastName";

Bạn có thể hình dung rằng phương pháp này sẽ mất nhiều thời gian hơn để gõ. Ngoài ra, phương pháp này không được khuyến nghị vì có một giải pháp phạm vi xảy ra đằng sau hậu trường để tìm xem hàm xây dựng được tích hợp sẵn hay do người dùng xác định.

b) Sử dụng ‘mới’ với hàm tạo do người dùng xác định

Vấn đề khác với cách tiếp cận sử dụng hàm tạo ‘Đối tượng’ xuất phát từ thực tế là mỗi khi chúng ta tạo một đối tượng, chúng ta phải thêm các thuộc tính vào đối tượng đã tạo theo cách thủ công.

Điều gì sẽ xảy ra nếu chúng ta phải tạo hàng trăm đối tượng người? Bạn có thể tưởng tượng nỗi đau bây giờ. Vì vậy, để loại bỏ việc thêm các thuộc tính vào các đối tượng theo cách thủ công, chúng tôi tạo các hàm tùy chỉnh (hoặc do người dùng xác định). Trước tiên, chúng tôi tạo một hàm tạo và sau đó sử dụng từ khóa ‘mới’ để lấy các đối tượng:

function Person(fname, lname) {
  this.firstName = fname;
  this.lastName = lname;
}

Bây giờ, bất cứ khi nào bạn muốn một đối tượng ‘Người’, chỉ cần làm điều này:

const personOne = new Person('testFirstNameOne', 'testLastNameOne');
const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Sử dụng Object.create() để tạo đối tượng mới

Mẫu này rất hữu ích khi chúng tôi được yêu cầu tạo các đối tượng từ các đối tượng hiện có khác và không trực tiếp sử dụng cú pháp từ khóa ‘mới’. Hãy xem cách sử dụng mẫu này. Như đã nêu trên MDN:

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

Để hiểu được Object.create phương pháp, chỉ cần nhớ rằng nó có hai tham số. Tham số đầu tiên là một đối tượng bắt buộc đóng vai trò là nguyên mẫu của đối tượng mới được tạo. Tham số thứ hai là một đối tượng tùy chọn chứa các thuộc tính sẽ được thêm vào đối tượng mới.

Bây giờ chúng ta sẽ không đi sâu vào các nguyên mẫu và chuỗi thừa kế để tập trung vào chủ đề này. Nhưng tóm lại, bạn có thể nghĩ về các nguyên mẫu như các đối tượng mà từ đó các đối tượng khác có thể mượn các thuộc tính/phương thức mà chúng cần.

Hãy tưởng tượng bạn có một tổ chức được đại diện bởi orgObject

const orgObject = { company: 'ABC Corp' };

Và bạn muốn tạo nhân viên cho tổ chức này. Rõ ràng, bạn muốn tất cả các đối tượng nhân viên.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } });

console.log(employee); // { company: "ABC Corp" }
console.log(employee.name); // "EmployeeOne"

4. Sử dụng Object.assign() để tạo đối tượng mới

Nếu chúng ta muốn tạo một đối tượng cần có các thuộc tính từ nhiều đối tượng thì sao? Object.assign() đến để giúp đỡ của chúng tôi.

Như đã nêu trên MDN:

Các Object.assign() phương thức được sử dụng để sao chép các giá trị của tất cả các thuộc tính riêng có thể đếm được từ một hoặc nhiều đối tượng nguồn sang đối tượng đích. Nó sẽ trả về đối tượng mục tiêu.

Object.assign phương thức có thể lấy bất kỳ số lượng đối tượng nào làm tham số. Tham số đầu tiên là đối tượng mà nó sẽ tạo và trả về. Phần còn lại của các đối tượng được truyền cho nó sẽ được sử dụng để sao chép các thuộc tính vào đối tượng mới. Hãy hiểu nó bằng cách mở rộng ví dụ trước mà chúng ta đã thấy.

Giả sử bạn có hai đối tượng như sau:

const orgObject = { company: 'ABC Corp' }
const carObject = { carName: 'Ford' }

Bây giờ, bạn muốn một đối tượng nhân viên của ‘ABC Corp’ lái xe ‘Ford’. Bạn có thể làm điều đó với sự giúp đỡ của Object.assign như sau:

const employee = Object.assign({}, orgObject, carObject);

Bây giờ, bạn nhận được một employee đối tượng có company và carName như tài sản của nó.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. Sử dụng các lớp ES6 để tạo đối tượng

Bạn sẽ nhận thấy rằng phương pháp này tương tự như sử dụng ‘new’ với hàm tạo do người dùng xác định. Các hàm tạo hiện được thay thế bằng các lớp khi chúng được hỗ trợ thông qua các đặc tả ES6. Hãy xem mã ngay bây giờ.

class Person {
  constructor(fname, lname) {
    this.firstName = fname;
    this.lastName = lname;
  }
}

const person = new Person('testFirstName', 'testLastName');

console.log(person.firstName); // testFirstName
console.log(person.lastName); // testLastName

Đây là tất cả những cách tôi biết để tạo đối tượng trong JavaScript. Tôi hy vọng bạn thích bài đăng này và giờ đã hiểu cách tạo đối tượng.

Cảm ơn thời gian của bạn để đọc bài viết này. Nếu bạn thích bài đăng này và nó hữu ích cho bạn, vui lòng nhấp vào vỗ tay ? nút để hiển thị hỗ trợ của bạn. Tiếp tục học hỏi thêm!