Giới thiệu về Lớp và Đối tượng trong JavaScript

Bây giờ chúng ta sẽ bắt đầu học lập trình hướng đối tượng (OOP) trong JavaScript. Hãy xem xét một ví dụ từ đời sống, sau đó chuyển nó sang JavaScript.

Lấy ô tô làm ví dụ. Nó có bánh xe, màu sắc, kiểu thân xe, dung tích động cơ và vân vân. Ngoài ra, người lái có thể ra lệnh cho nó: đi, dừng lại, rẽ phải, rẽ trái, v.v.

Có thể nói rằng tồn tại một lớp ô tô, sở hữu những đặc tính chung (tất cả đều có bánh xe và tất cả đều có thể nhận lệnh).

Một chiếc ô tô cụ thể, đang đỗ trên đường - là một đại diện của lớp này, hay, nói cách khác, một đối tượng của lớp này. Tất cả các đối tượng của lớp này đều có các thuộc tính: số lượng bánh xe, màu sắc, kiểu thân xe và các phương thức: đi, dừng lại, rẽ phải, rẽ trái.

Nói cách khác, bản thân lớp - là bản thiết kế, dựa trên nó mà các nhà máy sản xuất ô tô. Đối tượng là chính chiếc xe, được làm ra từ bản thiết kế đó.

Trong JavaScript, một lớp được tạo bằng từ khóa class, theo sau là tên của lớp đó. Hãy tạo lớp Car:

class Car {
	// code ở đây, tức là bản thiết kế JavaScript cho ô tô
}

Bây giờ hãy chỉ định trong bản thiết kế của chúng ta rằng bất kỳ ô tô nào được tạo ra từ bản thiết kế này sẽ có thuộc tính cho màu sắc và thuộc tính cho lượng nhiên liệu.

Để làm điều này, bên trong lớp, chúng ta viết thuộc tính color và thuộc tính fuel:

class Car {
	color; // màu của ô tô
	fuel;  // lượng nhiên liệu
}

Bây giờ hãy tạo các phương thức cho lớp của chúng ta. Trong JavaScript, phương thức giống như các hàm thông thường, chỉ khác là được khai báo mà không có từ khóa function.

Như đã đề cập ở trên, ô tô của chúng ta có thể đi, có thể rẽ, có thể dừng lại. Hãy tạo các phương thức tương ứng trong lớp của chúng ta:

class Car {
	color; // màu của ô tô
	fuel;  // lượng nhiên liệu
	
	// Lệnh đi:
	go() {
		// một đoạn mã JavaScript nào đó
	}
	
	// Lệnh rẽ:
	turn() {
		// một đoạn mã JavaScript nào đó
	}
	
	// Lệnh dừng lại:
	stop() {
		// một đoạn mã JavaScript nào đó
	}
}

Chúng ta đã tạo ra bản thiết kế cho chiếc ô tô của mình. Bây giờ cần đến nhà máy và tạo ra một đối tượng của lớp này (tức là một chiếc ô tô cụ thể).

Trong JavaScript, điều này được thực hiện bằng từ khóa new, theo sau là tên lớp:

new Car; // ra lệnh cho nhà máy sản xuất ô tô

Tuy nhiên, nếu chỉ đơn giản tạo một đối tượng lớp - điều đó sẽ chẳng dẫn đến đâu (giống như, ví dụ, khai báo một mảng và không lưu nó vào đâu cả). Chúng ta cần một biến để lưu trữ đối tượng này.

Giả sử biến này được gọi là myCar - hãy gán đối tượng mà chúng ta đã tạo vào nó:

let myCar = new Car;

Sau khi tạo ô tô, có thể truy cập vào các thuộc tính của nó. Truy cập vào chúng xảy ra thông qua dấu chấm. Hãy thiết lập các thuộc tính của đối tượng chúng ta:

let myCar = new Car; // ra lệnh cho nhà máy sản xuất ô tô

myCar.color = 'red'; // sơn màu đỏ
myCar.fuel = 50;     // đổ nhiên liệu

Thế là xong, ô tô của chúng ta đã được tạo, sơn và đổ nhiên liệu. Bây giờ chúng ta có thể ra lệnh cho nó thông qua các phương thức của chiếc ô tô này.

Truy cập vào các phương thức cũng xảy ra thông qua dấu chấm, nhưng, không giống như thuộc tính, sau tên phương thức cần viết thêm dấu ngoặc tròn. Hãy ra lệnh cho đối tượng của chúng ta:

myCar.go();
myCar.turn();
myCar.stop();