Trong bài viết cuối cùng, chúng tôi đã giới thiệu một số khái niệm cơ bản về lập trình hướng đối tượng [OOP] và thảo luận về một ví dụ mà chúng tôi sử dụng các nguyên tắc OOP cho các giáo sư và sinh viên mô hình hóa trong một trường học. Chúng tôi cũng đã nói về cách có thể sử dụng các nguyên mẫu và nhà xây dựng để thực hiện một mô hình như thế này và JavaScript cũng cung cấp các tính năng ánh xạ chặt chẽ hơn đến các khái niệm OOP cổ điển. Trong bài viết này, chúng tôi sẽ trải qua các tính năng này. Điều đáng ghi nhớ là các tính năng được mô tả ở đây không phải là một cách kết hợp mới: dưới mui xe, chúng vẫn sử dụng các nguyên mẫu. Chúng chỉ là một cách để làm cho việc thiết lập một chuỗi nguyên mẫu dễ dàng hơn.Prerequisites: Kiến thức máy tính cơ bản, sự hiểu biết cơ bản về HTML và CSS, làm quen với cơ bản của JavaScript [xem các bước đầu tiên và khối xây dựng] và cơ bản của OOJS [xem Giới thiệu về đối tượng, nguyên mẫu đối tượng và lập trình hướng đối tượng]. Objective: Để hiểu cách sử dụng các tính năng JavaScript cung cấp để triển khai các chương trình hướng đối tượng "cổ điển".
Các lớp và nhà xây dựng
Bạn có thể khai báo một lớp bằng từ khóa class
. Đây là một tuyên bố lớp cho Person
của chúng tôi từ bài viết trước:
class Person {
name;
constructor[name] {
this.name = name;
}
introduceSelf[] {
console.log[`Hi! I'm ${this.name}`];
}
}
Điều này tuyên bố một lớp gọi là Person
, với:
- một tài sản
1.const giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
- một hàm tạo có tham số
1 được sử dụng để khởi tạo thuộc tínhconst giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
1 của đối tượng mớiconst giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
- Một phương thức
4 có thể tham khảo các thuộc tính của đối tượng bằng cách sử dụngconst giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
5.const giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
Tuyên bố
const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
6 là tùy chọn: bạn có thể bỏ qua nó và dòng const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
7 trong hàm tạo sẽ tạo thuộc tính const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
1 trước khi khởi tạo nó. Tuy nhiên, các thuộc tính liệt kê rõ ràng trong khai báo lớp có thể giúp mọi người đọc mã của bạn dễ dàng hơn để xem thuộc tính nào là một phần của lớp này.Bạn cũng có thể khởi tạo thuộc tính thành giá trị mặc định khi bạn khai báo nó, với một dòng như
const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
9.Hàm tạo được xác định bằng cách sử dụng từ khóa
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
0. Giống như một hàm tạo bên ngoài một định nghĩa lớp, nó sẽ:- Tạo một đối tượng mới
- Liên kết
5 với đối tượng mới, vì vậy bạn có thể tham khảoconst giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
5 trong mã constructor của mìnhconst giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
- Chạy mã trong hàm tạo
- Trả về đối tượng mới.
Đưa ra mã khai báo lớp ở trên, bạn có thể tạo và sử dụng một thể hiện mới như thế này:
const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
Lưu ý rằng chúng tôi gọi hàm tạo bằng tên của lớp, Person
trong ví dụ này.
Bỏ qua các nhà xây dựng
Nếu bạn không cần thực hiện bất kỳ khởi tạo đặc biệt nào, bạn có thể bỏ qua hàm tạo và hàm tạo mặc định sẽ được tạo cho bạn:
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
Di sản
Với lớp Person
của chúng tôi ở trên, hãy xác định lớp con
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
6.class Professor extends Person {
teaches;
constructor[name, teaches] {
super[name];
this.teaches = teaches;
}
introduceSelf[] {
console.log[`My name is ${this.name}, and I will be your ${this.teaches} professor.`];
}
grade[paper] {
const grade = Math.floor[Math.random[] * [5 - 1] + 1];
console.log[grade];
}
}
Chúng tôi sử dụng từ khóa
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
7 để nói rằng lớp này kế thừa từ một lớp khác.Lớp
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
6 thêm một thuộc tính mới class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
9, vì vậy chúng tôi tuyên bố điều đó.Vì chúng tôi muốn đặt
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
9 khi một class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
6 mới được tạo, chúng tôi xác định một hàm tạo, lấy const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
1 và class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
9 làm đối số. Điều đầu tiên mà hàm tạo này thực hiện là gọi hàm tạo siêu lớp bằng cách sử dụng class Professor extends Person {
teaches;
constructor[name, teaches] {
super[name];
this.teaches = teaches;
}
introduceSelf[] {
console.log[`My name is ${this.name}, and I will be your ${this.teaches} professor.`];
}
grade[paper] {
const grade = Math.floor[Math.random[] * [5 - 1] + 1];
console.log[grade];
}
}
4, chuyển tham số const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
1. Trình xây dựng siêu lớp chăm sóc việc thiết lập const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
1. Sau đó, hàm tạo class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
6 đặt thuộc tính class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
9.Lưu ý: Nếu một lớp con có bất kỳ khởi tạo riêng nào của mình, trước tiên nó phải gọi hàm tạo siêu lớp bằng cách sử dụng
4, hãy truyền bất kỳ tham số nào mà hàm tạo siêu lớp đang mong đợi. If a subclass has any of its own initialization to do, it must first call the superclass constructor using class Professor extends Person {
teaches;
constructor[name, teaches] {
super[name];
this.teaches = teaches;
}
introduceSelf[] {
console.log[`My name is ${this.name}, and I will be your ${this.teaches} professor.`];
}
grade[paper] {
const grade = Math.floor[Math.random[] * [5 - 1] + 1];
console.log[grade];
}
}
class Professor extends Person {
teaches;
constructor[name, teaches] {
super[name];
this.teaches = teaches;
}
introduceSelf[] {
console.log[`My name is ${this.name}, and I will be your ${this.teaches} professor.`];
}
grade[paper] {
const grade = Math.floor[Math.random[] * [5 - 1] + 1];
console.log[grade];
}
}
4, passing up any parameters that the superclass constructor is expecting.Chúng tôi cũng đã ghi đè phương thức
const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
4 từ siêu lớp và thêm một phương pháp mới const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
1, vào bài báo cấp A [giáo sư của chúng tôi không tốt lắm và chỉ gán các lớp ngẫu nhiên cho các bài báo].Với tuyên bố này, bây giờ chúng tôi có thể tạo và sử dụng các giáo sư:
const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
Đóng gói
Cuối cùng, chúng ta hãy xem cách thực hiện đóng gói trong JavaScript. Trong bài viết cuối cùng, chúng tôi đã thảo luận về cách chúng tôi muốn tạo thuộc tính
const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
2 của const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
3 riêng tư, vì vậy chúng tôi có thể thay đổi các quy tắc về các lớp bắn cung mà không phá vỡ bất kỳ mã nào sử dụng lớp const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
3.Đây là một tuyên bố của lớp
const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
3 chỉ làm điều đó:class Student extends Person {
#year;
constructor[name, year] {
super[name];
this.#year = year;
}
introduceSelf[] {
console.log[`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`];
}
canStudyArchery[] {
return this.#year > 1;
}
}
Trong khai báo lớp này,
const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
6 là một thuộc tính dữ liệu riêng tư. Chúng ta có thể xây dựng một đối tượng const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
3 và nó có thể sử dụng const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
6 trong nội bộ, nhưng nếu mã bên ngoài đối tượng sẽ cố gắng truy cập const walsh = new Professor['Walsh', 'Psychology'];
walsh.introduceSelf[]; // 'My name is Walsh, and I will be your Psychology professor'
walsh.grade['my paper']; // some random grade
6 Trình duyệt ném lỗi:const summers = new Student['Summers', 2];
summers.introduceSelf[]; // Hi! I'm Summers, and I'm in year 2.
summers.canStudyArchery[]; // true
summers.#year; // SyntaxError
Thuộc tính dữ liệu riêng tư phải được khai báo trong khai báo lớp và tên của chúng bắt đầu bằng
class Student extends Person {
#year;
constructor[name, year] {
super[name];
this.#year = year;
}
introduceSelf[] {
console.log[`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`];
}
canStudyArchery[] {
return this.#year > 1;
}
}
0.Phương pháp riêng tư
Bạn có thể có các phương thức riêng tư cũng như các thuộc tính dữ liệu riêng tư. Giống như các thuộc tính dữ liệu riêng tư, tên của chúng bắt đầu bằng
class Student extends Person {
#year;
constructor[name, year] {
super[name];
this.#year = year;
}
introduceSelf[] {
console.log[`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`];
}
canStudyArchery[] {
return this.#year > 1;
}
}
0 và chúng chỉ có thể được gọi bằng các phương thức riêng của đối tượng:class Example {
somePublicMethod[] {
this.#somePrivateMethod[];
}
#somePrivateMethod[] {
console.log['You called me?'];
}
}
const myExample = new Example[];
myExample.somePublicMethod[]; // 'You called me?'
myExample.#somePrivateMethod[]; // SyntaxError
Kiểm tra kỹ năng của bạn!
Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục-xem Kiểm tra kỹ năng của bạn: JavaScript hướng đối tượng.
Bản tóm tắt
Trong bài viết này, chúng tôi đã trải qua các công cụ chính có sẵn trong JavaScript để viết các chương trình hướng đối tượng. Chúng tôi đã không bao gồm tất cả mọi thứ ở đây, nhưng điều này là đủ để bạn bắt đầu. Bài viết của chúng tôi về các lớp học là một nơi tốt để tìm hiểu thêm.
- Trước
- Tổng quan: Đối tượng
- Tiếp theo