Hướng dẫn which is the correct way to create an object in javascript - đó là cách chính xác để tạo một đối tượng trong javascript

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.

1. Tạo đối tượng bằng cách sử dụng cú pháp theo nghĩa đen đố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 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:

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

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

2. Tạo các đối tượng bằng cách sử dụng từ khóa ’mới

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.

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();

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ức

const person = new Object();

1 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.

Để hiểu phương pháp

const person = new Object();

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();

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 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();

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 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.

Phương thức

const person = new Object();

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();

const person = new Object();

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

const person = new Object();

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

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

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!