Đối Tượng Trong JavaScript - JavaScript Objects

Trong lập trình, đối tượng đóng vai trò quan trọng trong việc tổ chức và thao tác dữ liệu. Tương tự như trong cuộc sống hàng ngày, chúng ta gặp phải các đối tượng với các thuộc tính và hành vi đặc biệt. Trong ngôn ngữ lập trình JavaScript, đối tượng mang lại một cách mạnh mẽ để cấu trúc và tương tác với thông tin.

Đối Tượng Thực Tế, Thuộc Tính và Phương Thức

Hãy tưởng tượng một đối tượng thực tế, như một chiếc xe. Chiếc xe có những thuộc tính như tên, mô hình, trọng lượng, và màu sắc. Ngoài ra, chiếc xe còn có các phương thức hoặc hành động như bắt đầu, lái xe, phanh, và dừng lại.

//Thuộc Tính của Đối Tượng

car.name = "Fiat";

car.model = "500";

car.weight = "850kg";

car.color = "white";

 

//Phương Thức của Đối Tượng

car.start();

car.drive();

car.brake();

car.stop();

 

Trong ví dụ trên, tất cả các xe có những thuộc tính chung, nhưng mỗi chiếc xe có thể có các giá trị khác nhau cho những thuộc tính này. Tương tự, tất cả các xe sử dụng cùng các phương thức, nhưng các phương thức này được thực hiện tại các thời điểm khác nhau.

Giới Thiệu về Đối Tượng Trong JavaScript

Trong JavaScript, biến đóng vai trò như các container cho các giá trị dữ liệu. Tương tự như việc gán một giá trị đơn cho một biến, chúng ta có thể gán nhiều giá trị cho một đối tượng.

//Gán Nhiều Giá Trị cho Một Đối Tượng

const car = { type: "Fiat", model: "500", color: "white" };

 

Ở đây, các giá trị được viết dưới dạng cặp tên-giá trị, và việc khai báo đối tượng thường được thực hiện bằng từ khóa const.

Định Nghĩa Đối Tượng Trong JavaScript

Đối tượng trong JavaScript được định nghĩa bằng cách sử dụng object literals:

//Định Nghĩa Đối Tượng

const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };

 

Các cặp tên-giá trị có thể được viết trên một dòng hoặc trải dài trên nhiều dòng để dễ đọc hơn.

Thuộc Tính của Đối Tượng và Cách Truy Cập

Các cặp tên-giá trị trong đối tượng JavaScript được gọi là thuộc tính. Bạn có thể truy cập thuộc tính của đối tượng bằng cách sử dụng dấu chấm hoặc dấu ngoặc vuông:

//Truy Cập Thuộc Tính của Đối Tượng

person.firstName; // John

person["lastName"]; // Doe

 

Phương Thức của Đối Tượng: Hành Động và Hàm

Đối tượng JavaScript cũng có thể có các phương thức, đó là các hành động được thực hiện trên đối tượng. Phương thức thường là các hàm được lưu trữ như các thuộc tính của đối tượng.

//Phương Thức của Đối Tượng

const person = {

 firstName: "John",

 lastName: "Doe",

 id: 5566,

 fullName: function() {

 return this.firstName + " " + this.lastName;

 }

};

 

Ở đây, fullName là một phương thức nối chuỗi firstName và lastName của đối tượng person.

Hiểu về Từ Khóa 'this'

Trong JavaScript, từ khóa this tham chiếu đến một đối tượng và phụ thuộc vào cách nó được sử dụng. Ví dụ, trong một phương thức của đối tượng, this tham chiếu đến chính đối tượng đó.

Truy Cập Phương Thức của Đối Tượng

Để gọi một phương thức của đối tượng, bạn sử dụng cú pháp sau:

//Truy Cập Phương Thức của Đối Tượng

name = person.fullName();

 

Hãy chắc chắn rằng bạn bao gồm dấu ngoặc đơn () khi gọi một phương thức. Bỏ sót nó sẽ trả về định nghĩa hàm thay vì kết quả của phương thức.

Tránh Khai Báo Đối Tượng cho Các Kiểu Dữ Liệu Cơ Bản

Hạn chế việc khai báo chuỗi, số, và boolean như là các đối tượng sử dụng từ khóa new. Thói quen này có thể làm phức tạp mã của bạn và ảnh hưởng đến tốc độ thực thi.

//Tránh Khai Báo Đối Tượng cho Kiểu Dữ Liệu Cơ Bản

x = new String(); // Khai Báo x Là Đối Tượng Chuỗi

y = new Number(); // Khai Báo y Là Đối Tượng Số

z = new Boolean(); // Khai Báo z Là Đối Tượng Boolean

 

Tổng Kết

Tóm lại, đối tượng JavaScript là một khái niệm cơ bản trong phát triển web, cho phép tổ chức và thao tác dữ liệu một cách có tổ chức. Khi bạn tiến xa trong JavaScript, việc thành thạo đối tượng sẽ mở ra những kỹ thuật lập trình phức tạp và mạnh mẽ hơn. Hãy tiếp tục theo dõi để khám phá thêm trong loạt bài viết JavaScript của chúng tôi!