Khi thiết lập chương trình, chúng ta thường phải tạo ra nhiều đối tượng với cùng kiểu, ví dụ như. các đối tượng người dùng hoặc các đối tượng sản phẩm,
Để giải quyết vấn đề này, bạn có thể sử dụng hàm khởi động với từ khóa mới
Tuy nhiên, từ ES6 trở đi, JavaScript có thêm lớp từ khóa, với nhiều đặc điểm và tính năng hữu ích được áp dụng trong lập trình hướng đối tượng
Cú pháp cơ bản của lớp trong JavaScript
Cú pháp lớp cơ bản là
Bạn sử dụng
setTimeout[[] => button.click[], 1000];Phương thức
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];Ví dụ lớp
setTimeout[[] => button.click[], 1000];Khi
setTimeout[[] => button.click[], 1000];- Một đối tượng mới được tạo ra
- Hàm khởi tạo
5 được gọi với giá trị tham số truyền vào làsetTimeout[[] => button.click[], 1000];
6 - gán chosetTimeout[[] => button.click[], 1000];
7setTimeout[[] => button.click[], 1000];
Sau đó, bạn có thể gọi phương thức của đối tượng, ví dụ.
setTimeout[[] => button.click[], 1000];📝 Chú ý. Không tồn tại dấu phẩy giữa các phương thức. Việc thêm vào một dấu phẩy vào giữa các phương thức sẽ gây ra lỗi cú pháp
Bạn cần chú ý để tránh nhầm lẫn giữa việc định nghĩa lớp với việc định nghĩa đối tượng
Class là gì?
Trong JavaScript, class thực chất là một loại Function. Và bạn có thể xem ví dụ sau để biết điều đó
Bản chất của
setTimeout[[] => button.click[], 1000];- Tạo mới nếu một hàm có tên là
3, nội dung của hàm được lấy từ hàm khởi tạosetTimeout[[] => button.click[], 1000];
5 [default is empty you don't meaning]setTimeout[[] => button.click[], 1000]; - Save the method of function [ví dụ
4] trongsetTimeout[[] => button.click[], 1000];
5setTimeout[[] => button.click[], 1000];
Sau khi các đối tượng mới được tạo ra và gọi một phương thức, JavaScript sẽ tự động tìm kiếm phương thức đó trong nguyên mẫu [như đã miêu tả trong bài F. nguyên mẫu]
Ví dụ chứng minh
Lớp không chỉ là "đường cú pháp"
Khái niệm đường cú pháp dùng để chỉ một cú pháp mới được sinh ra nhằm mục đích dễ đọc, dễ viết, chứ không phải tạo thêm những điểm đặc biệt, tính chất mới như vậy với cú pháp cũ
Mọi người thường coi lớp là đường cú pháp của hàm. Vì thực chất là ta có thể định nghĩa lớp tương tự thứ tự mà không cần phải từ khóa lớp như sau
Bạn có thể thấy cách định nghĩa hàm trên cho kết quả tương tự với cách sử dụng lớp. Tuy nhiên, vẫn có một số đặc điểm khác giữa lớp và hàm như sau
► Một hàm được tạo bởi từ khoá lớp luôn có một thuộc tính mặc định là
setTimeout[[] => button.click[], 1000];Ví dụ lớp bắt buộc phải gọi với từ khóa
setTimeout[[] => button.click[], 1000];Chuỗi biểu tượng lớp cũng luôn bắt đầu bằng lớp
► The method of class is non-enumerable - tức là không xuất hiện trong
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];► Mã trong lớp luôn được sử dụng ở chế độ nghiêm ngặt
Ngoài ra, class còn có nhiều cú pháp và tính năng hay ho khác nữa sẽ được trình bày ở các bài viết sau
biểu thức lớp
Giống như hàm, lớp cũng có biểu thức lớp - biểu thức lớp. Nghĩa là nó có thể được định nghĩa bên trong một biểu thức khác, truyền giữa các hàm, làm giá trị trả về của hàm hoặc dùng để gán cho biến,
Sau đây là ví dụ về class expression
let User = class {
sayHi[] {
console.log["Hello"];
}
};Tương tự như - NFE, class expression cũng có thể có tên. Và nếu một biểu thức lớp có tên thì tên đó chỉ được nhìn thấy bên trong lớp, ví dụ
Hoặc bạn có thể tạo lớp động như sau
Getter/setter trong lớp
Lớp cũng có getter/setter như trong đối tượng. Ví dụ sau sử dụng
setTimeout[[] => button.click[], 1000];Về cơ bản, cách định nghĩa getter/setter trong lớp như trên cũng giống như định nghĩa getter/setter trong
setTimeout[[] => button.click[], 1000];Tạo tên phương thức thông qua biểu thức
Tên của phương thức trong lớp có thể được tạo thông qua một biểu thức, ví dụ
Tính năng này tương tự như trong đối tượng
Thuộc tính trong lớp
Trong các phần trên, mình mới đề cập đến phương thức trong lớp. Thực tế, bạn có thể thêm bất kỳ thuộc tính nào vào lớp như sau
Chú thích. nhiều trình duyệt cũ không hỗ trợ cách xác định thuộc tính thuộc tính trong lớp như trên
Điểm khác nhau quan trọng giữa việc định nghĩa phương thức và thuộc tính trong lớp là
- Phương thức trong lớp được định nghĩa bên trong nguyên mẫu
- Thuộc tính trong lớp tồn tại ở mỗi đối tượng được tạo ra từ lớp
Ví dụ
Bạn có thể gán giá trị cho thuộc tính thông qua một biểu thức hoặc thông qua hàm gọi như sau
Tạo phương thức liên kết với thuộc tính trong lớp
Như mình đã đề cập trong bài viết về liên kết hàm, hàm trong JavaScript xử lý
setTimeout[[] => button.click[], 1000];Vì vậy, khi một đối tượng được truyền lại thông qua các hàm và được gọi theo một ngữ cảnh khác, thì
setTimeout[[] => button.click[], 1000];Ví dụ đoạn mã sau sẽ hiển thị
setTimeout[[] => button.click[], 1000];Vấn đề ở đây là khi phương thức
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];Có ba cách để giải quyết vấn đề này là
► Cách 1. Use arrow function in the function
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];Khi đó, đối tượng gọi hàm
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];► Cách 2. Sử dụng chức năng mũi tên khi định nghĩa hàm
setTimeout[[] => button.click[], 1000];Do hàm mũi tên không có
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];► Cách 3. liên kết phương thức
setTimeout[[] => button.click[], 1000];Với cách này, giá trị của
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];Tổng kết
Cú pháp cơ bản của lớp trong JavaScript như sau
setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];setTimeout[[] => button.click[], 1000];Trong các bài viết sau, mình sẽ tìm hiểu thêm về lớp, bao gồm tính kế thừa và các tính chất khác của lập trình hướng đối tượng
Tham khảo. Cú pháp cơ bản của lớp
★ Nếu các bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận thông báo khi có bài viết mới nhất nhé