Trong bài viết trước, 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 để mô hình hóa các giáo sư và sinh viên 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à triển khai một mô hình như thế này và JavaScript cũng cung cấp các tính năng ánh xạ gần hơn với các khái niệm OOP cổ điển
Trong bài viết này, chúng ta sẽ đi qua các tính năng này. Cần lưu ý rằng các tính năng được mô tả ở đây không phải là một cách mới để kết hợp các đối tượng. dưới mui xe, họ vẫn sử dụng nguyên mẫu. Chúng chỉ là một cách giúp thiết lập chuỗi nguyên mẫu dễ dàng hơn
điều kiện tiên quyết. Trình độ máy tính cơ bản, hiểu biết cơ bản về HTML và CSS, quen thuộc với các kiến thức cơ bản về JavaScript [xem Các bước đầu tiên và Khối xây dựng] và kiến thức cơ bản về 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]. Khách quan. Để hiểu cách sử dụng các tính năng mà JavaScript cung cấp để triển khai các chương trình hướng đối tượng "cổ điển"Bạn có thể khai báo một lớp bằng cách sử dụng từ khóa class
. Đây là một khai báo 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 khai báo một lớp có tên là Person
, với
- một tài sản
1const giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
- một hàm tạo nhận 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 chiếu đến 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
5const giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
Khai báo
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, việc liệt kê các thuộc tính một cách rõ ràng trong khai báo lớp có thể giúp những người đọc mã của bạn dễ dàng xem thuộc tính nào là một phần của lớp nàyBạ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
9Hàm tạo được xác định bằng từ khóa
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
0. Cũng giống như a , 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ã hàm tạo của mìnhconst giles = new Person['Giles']; giles.introduceSelf[]; // Hi! I'm Giles
- chạy mã trong hàm tạo
- trả lại đối tượng mới
Với mã khai báo lớp ở trên, bạn có thể tạo và sử dụng một phiên bản Person
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
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'
Với lớp Person
của chúng ta ở trên, hãy định nghĩa lớp con
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
6class 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 ta 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ừ lớp khácLớp
class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
6 thêm 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ố rằngVì 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, nên chúng tôi xác định một hàm tạo, hàm tạo này nhận các đối số ____1_______1 và ____10_______9. Điều đầu tiên hàm tạo này thực hiện là gọi hàm tạo của lớp bậc trên 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, truyền tham số const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
1. Hàm tạo của lớp bậc trên đảm nhiệm 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 thiết lập thuộc tính class Animal {
sleep[] {
console.log['zzzzzzz'];
}
}
const spot = new Animal[];
spot.sleep[]; // 'zzzzzzz'
9Ghi chú. Nếu một lớp con có bất kỳ khởi tạo riêng nào để thực hiện, thì trước tiên nó phải gọi hàm tạo của lớp bậc trên 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, truyền bất kỳ tham số nào mà hàm tạo của lớp bậc trên đang mong đợiChúng tôi cũng đã ghi đè phương thức
const giles = new Person['Giles'];
giles.introduceSelf[]; // Hi! I'm Giles
4 từ lớp cha và thêm một phương thức 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, để chấm điểm một bài báo [giáo sư của chúng tôi không giỏi lắm và chỉ chấm điểm ngẫu nhiên cho các bài báo]Với tuyên bố này, bây giờ chúng ta 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
Cuối cùng, hãy xem cách triển khai đóng gói trong JavaScript. Trong bài viết trước, chúng ta đã thảo luận về cách đặt 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 ở chế độ riêng tư, vì vậy chúng tôi có thể thay đổi các quy tắc về lớp bắn cung mà không vi phạm 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 thực hiện đ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 phần 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 bên trong, nhưng nếu mã bên ngoài đối tượng cố truy cập vào 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 thì trình duyệt sẽ báo lỗiconst summers = new Student['Summers', 2];
summers.introduceSelf[]; // Hi! I'm Summers, and I'm in year 2.
summers.canStudyArchery[]; // true
summers.#year; // SyntaxError
Các 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;
}
}
0Bạ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ượngclass Example {
somePublicMethod[] {
this.#somePrivateMethod[];
}
#somePrivateMethod[] {
console.log['You called me?'];
}
}
const myExample = new Example[];
myExample.somePublicMethod[]; // 'You called me?'
myExample.#somePrivateMethod[]; // SyntaxError
Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . JavaScript hướng đối tượng
Trong bài viết này, chúng ta đã tìm hiểu 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 chưa đề cập đến 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ề Lớp học là một nơi tốt để tìm hiểu thêm