bởi Kaashan Hussain Tất cả chúng ta đều đối phó với các đối tượng bằng 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 một cách để chúng tôi lưu trữ, thao tác và gửi dữ liệu qua mạng. Có nhiều cách trong đó 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 khác, như Java. Tôi sẽ cố gắng bao quát điều đó trong một chủ đề khác. Ở đây, chúng ta 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 tập hợp các cặp khóa: giá trị. Điều này mang đến cho chúng tôi cách đầu tiên và phổ biến nhất mà chúng tôi tạo ra các đối tượng trong JavaScript. Hãy để bắt đầu điều này. Đ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 bạn được phân tách bằng ‘: Bên trong một bộ niềng răng xoăn [{}] và đối tượng của bạn đã sẵn sàng để được phục vụ [hoặc tiêu thụ], như dưới đây: Đây là cách đơn giản nhất và phổ biến nhất để tạo các đối tượng trong JavaScript. 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 tôi sẽ xem xét việc tạo các đối tượng bằng cách xác định các lớp vào cuối bài viết này. Vì vậy, để tạo một đối tượng bằng cách sử dụng từ khóa ‘mới, bạn cần phải có hàm tạo hàm.1. Tạo đối tượng bằng cách sử dụng cú pháp theo nghĩa đen đối tượng
const person = {
firstName: 'testFirstName',
lastName: 'testLastName'
};
2. Tạo các đối tượng bằng cách sử dụng từ khóa ’mới
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 xây dựng đối tượng được xây dựng
Để 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 các thuộc tính vào đối tượng này, chúng ta phải làm một cái gì đó như sau:
person.firstName = 'testFirstName';
person.lastName = 'testLastName';
Bạn có thể đã hình dung rằng phương pháp này dài hơn một chút để gõ. Ngoài ra, thực tiễn này không được khuyến nghị vì có độ phân giải phạm vi xảy ra đằng sau hậu trường để tìm nếu hàm tạo hàm được tích hợp hoặc xác định người dùng.
b] Sử dụng ’mới với hàm xây dựng do người dùng xác định
Vấn đề khác với cách tiếp cận của việc sử dụng hàm tạo hàm ‘đối tượng từ thực tế là mỗi lần chúng ta tạo một đối tượng, chúng ta phải thêm các thuộc tính theo cách thủ công vào đối tượng được tạo.
Điều gì sẽ xảy ra nếu chúng ta phải tạo ra hàng trăm đối tượng của người? Bạn có thể tưởng tượng nỗi đau bây giờ. Vì vậy, để loại bỏ các thuộc tính thêm thủ công vào các đối tượ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 chức năng Constructor 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ứ lúc 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 các đối tượng mới
Mẫu này rất tiện dụng 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 cùng xem cách sử dụng mẫu này. Như đã nêu trên MDN:
Phương thức1 tạo ra 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.const person = new Object[];
Để 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 được thêm vào đối tượng mới.Chúng tôi sẽ không đi sâu vào các nguyên mẫu và chuỗi kế thừa ngay bây giờ để tập trung vào chủ đề này. Nhưng như một điểm nhanh chóng, bạn có thể nghĩ các nguyên mẫu là đố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[];
3const 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 các đối tượng mới
Điều gì sẽ xảy ra nếu chúng ta muốn tạo một đối tượng cần có thuộc tính từ nhiều đối tượng?
const person = new Object[];
4 đến để giúp đỡ của chúng tôi.Như đã nêu trên MDN:
Phương thức5 được sử dụng để sao chép các giá trị của tất cả các thuộc tính riêng từ một hoặc nhiều đối tượng nguồn sang đối tượng đích. Nó sẽ trả về đối tượng đích.const person = new Object[];
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 tôi đã thấy.Giả sử bạn có hai đối tượng như dưới đây:
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, người lái một chiếc xe Ford Ford. Bạn có thể làm điều đó với sự trợ giúp của
const person = new Object[];
7 như dưới đây:const person = new Object[];
8Bây giờ, bạn nhậ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àm 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 ‘mới với chức năng Constructor do người dùng xác định. Các hàm xây dựng hiện được thay thế bằng các lớp vì chúng được hỗ trợ thông qua các thông số kỹ thuật ES6. Hãy cùng 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 các đối tượng trong JavaScript. Tôi hy vọng bạn thích bài đăng này và bây giờ hiểu cách tạo đối tượng.
Cảm ơn bạn đã dành thời gian cho việc đọ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, xin vui lòng nhấp vào tiếng vỗ tay? nút để hiển thị hỗ trợ của bạn. Tiếp tục học thêm!
Học mã miễn phí. Chương trình giảng dạy 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