Cách nào sau đây là cách tạo đối tượng JavaScript?

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 đề cập đến đ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 nghĩ về các đối tượng như một bộ sưu tập 'khóa. cặp giá trị. Điều này mang đến cho chúng ta cách đầu tiên và phổ biến nhất để tạo đối tượng trong JavaScript

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

1. Tạo đối tượng bằng cách sử dụng cú pháp chữ đố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ị chính của mình đượ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 các đối tượng bằng từ khóa 'mới'

Phương thức tạo đối tượng này giống với cách tạo đối tượng 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ó 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 hàm tạo

const person = new Object();

0, như thế này

const person = new Object();

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

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

Bạn có thể đã hình dung rằng phương pháp này sẽ lâu hơn một chút để 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

Một 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? . Vì vậy, để thoát khỏi 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 đối tượng. 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

Phương thức

const person = new Object();

1 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 phương pháp

const person = new Object();

2, chỉ cần nhớ rằng nó cần 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

const person = new Object();

3

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 person = new Object();

0

4. Sử dụng đối tượng. gán() để 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?

Như đã nêu trên MDN

Phương thức

const person = new Object();

5 đượ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

Phương thức

const person = new Object();

6 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ư dưới đây

const person = new Object();

4

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ự trợ giúp của

const person = new Object();

7 như bên dưới

const person = new Object();

8

Bây giờ, bạn có một đối tượng

const person = new Object();

9 có

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

0 và

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

1 là thuộc tính của nó

const person = new Object();

0

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 'mới' 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 vì chúng được hỗ trợ thông qua các đặc tả ES6. Hãy xem mã ngay bây giờ

const person = new Object();

1

Đâ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 bạn đã dành thời gian đọ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 ? . Tiếp tục học hỏi thêm

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Có bao nhiêu cách chúng ta có thể tạo một đối tượng trong JavaScript?

Cách chính xác để tạo một đối tượng là gì?

Cái nào sau đây là đối tượng trong JavaScript?

Cái nào sau đây được sử dụng để tạo một đối tượng?