JavaScript là một ngôn ngữ đã được thiết lập nhưng nó chỉ hỗ trợ thêm cho lập trình hướng đối tượng cổ điển (OOP) trong ES6. Cho đến khi nó thêm các tính năng như khai báo lớp, JavaScript đã xử lý OOP bằng cách sử dụng mô hình dựa trên nguyên mẫu ít được biết đến hơn. Tuy nhiên, với một trong hai cách tiếp cận, bạn có thể tạo các ứng dụng phức tạp sử dụng các tính năng dựa trên đối tượng.
Một hàm tạo trong JavaScript nguyên mẫu trông giống như bất kỳ hàm nào khác. Sự khác biệt chính là bạn có thể sử dụng hàm khởi tạo đó để tạo các đối tượng.
Constructor trong JavaScript là gì?
Constructors là một trong những khái niệm cơ bản trong lập trình hướng đối tượng. Hàm tạo là một hàm bạn có thể sử dụng để tạo một thể hiện của một đối tượng. Cũng như việc tạo một đối tượng mới, một hàm tạo chỉ định các thuộc tính và hành vi sẽ thuộc về nó.
Cú pháp xây dựng
function NameOfConstructor() {
this.property1 = "Property1";
this.property2 = "Property2";
this.property3 = "Property3";
}Bạn có thể tạo một hàm tạo với hàm số từ khóa vì nó về cơ bản giống như bất kỳ chức năng nào khác. Tuy nhiên, các hàm tạo tuân thủ các quy ước sau:
- Để phân biệt chúng với các hàm khác, hãy sử dụng tên cho hàm tạo của bạn bắt đầu bằng một chữ cái viết hoa.
- Người xây dựng sử dụng đây từ khóa khác nhau. Bên trong một hàm tạo, đây đề cập đến đối tượng mới mà hàm tạo sẽ tạo.
- Không giống như các hàm JavaScript, các hàm tạo xác định các thuộc tính và hành vi thay vì trả về các giá trị.
Sử dụng một hàm tạo để tạo các đối tượng mới
Trong JavaScript, sử dụng một hàm tạo để tạo một đối tượng là một nhiệm vụ dễ dàng. Đây là một hàm tạo đơn giản với một lời gọi theo sau nó:
function Student() {
this.name = "Gloria";
this.gender = "Female";
this.age = 19;
}
let femaleStudent = new Student();
Trong ví dụ này, nữ sinh là một đối tượng được tạo ra từ Sinh viên người xây dựng. Sử dụng Mới từ khóa để gọi hàm như một phương thức khởi tạo. Từ khóa này yêu cầu JavaScript tạo một phiên bản mới của Sinh viên. Bạn không nên gọi hàm này mà không có Mới từ khóa bởi vì đây bên trong hàm tạo sẽ không trỏ đến một đối tượng mới. Sau khi xây dựng, nữ sinh có tất cả các thuộc tính của Sinh viên. Bạn có thể truy cập và sửa đổi các thuộc tính này giống như bạn làm với bất kỳ đối tượng nào khác.
Những điều quan trọng cần biết về trình tạo JavaScript
Làm việc với các hàm tạo có thể rất mệt mỏi và đồng thời, nó có thể là một nhiệm vụ dễ dàng. Dưới đây là một số điều quan trọng mà bất kỳ nhà phát triển nào cũng nên biết khi làm việc với các hàm tạo.
Sử dụng hàm tạo có đối số
Bạn có thể mở rộng một hàm tạo để nhận các đối số. Điều này rất quan trọng nếu bạn đang muốn viết mã linh hoạt, đáp ứng.
Bất cứ khi nào bạn tạo một đối tượng từ một hàm tạo, đối tượng sẽ kế thừa tất cả các thuộc tính được khai báo trong hàm tạo. Ví dụ, nữ sinh bạn đã tạo ở trên sẽ có các thuộc tính Tên, giới tínhvà tuổi tác với các giá trị ban đầu cố định. Mặc dù bạn có thể thay đổi từng thuộc tính theo cách thủ công, nhưng sẽ rất tốn công nếu bạn đang viết một chương trình sử dụng nhiều đối tượng.
Rất may, các hàm tạo JavaScript có thể chấp nhận các tham số, giống như bất kỳ hàm nào khác. Bạn có thể thay đổi Sinh viên phương thức khởi tạo để chấp nhận hai tham số:
function Student(name, gender) {
this.name = name;
this.gender = gender;
this.age = 19;
}
Tất cả các đối tượng được tạo từ trên sẽ có tuổi tác đặt thành 19. Bạn có thể thiết kế hàm tạo của mình theo cách này nếu có một thuộc tính mà bạn muốn tất cả các đối tượng có.
Bây giờ bạn có thể xác định các đối tượng duy nhất từ cùng một hàm tạo bằng cách truyền vào các đối số khác nhau.
Các đối số làm cho các hàm tạo linh hoạt hơn. Chúng tiết kiệm thời gian và khuyến khích mã sạch.
Định nghĩa các phương pháp đối tượng
Một phương thức là một thuộc tính đối tượng là một hàm. Các phương thức nâng cao mã của bạn trong OOP vì nó thêm các hành vi khác nhau vào các đối tượng của bạn. Đây là một ví dụ:
function Student(name, gender) {
this.name = name;
this.gender = gender;
this.age = 19 ;
this.sayName = function () {
return `My Name is ${name}`;
}
}
Ở trên thêm chức năng sayName đến phương thức khởi tạo.
Giả sử bạn sử dụng hàm tạo này để tạo một đối tượng mà bạn lưu trữ trong một biến, nữ sinh. Sau đó, bạn có thể gọi hàm này bằng mã bên dưới:
femaleStudent.sayName()Nguyên mẫu
Trước đó, chúng tôi đã tạo Sinh viên theo cách mà tất cả các phiên bản của nó sẽ có tuổi tác tài sản có giá trị là 19. Điều này sẽ dẫn đến việc có một biến trùng lặp cho mỗi Sinh viên trường hợp bạn tạo.
Để tránh sự trùng lặp này, JavaScript sử dụng khái niệm nguyên mẫu. Tất cả các đối tượng được tạo từ một hàm tạo đều chia sẻ các thuộc tính của nguyên mẫu của nó. Bạn có thể thêm tuổi tác tài sản để Sinh viên nguyên mẫu như hình dưới đây:
Student.prototype.age = 19;Bằng cách làm này, tất cả các trường hợp của Sinh viên sẽ có tuổi tác tài sản. Khai báo thuộc tính nguyên mẫu là một cách để giảm mã trùng lặp trong ứng dụng của bạn. Nó làm cho mã của bạn chuẩn nhất có thể.
Thuộc tính nguyên mẫu có thể là một đối tượng
Bạn có thể thêm các thuộc tính Nguyên mẫu riêng lẻ như đã giải thích ở trên. Nhưng nếu bạn có nhiều thuộc tính để thêm, điều này có thể gây bất tiện.
Thay vào đó, bạn có thể chứa tất cả các thuộc tính mà bạn yêu cầu trong một đối tượng mới. Bằng cách này, bạn sẽ thiết lập tất cả các thuộc tính cùng một lúc. Ví dụ:
Student.prototype = {
age: 19,
race: "White",
disability: "None"
}Hãy nhớ đặt người xây dựng thuộc tính khi thiết lập nguyên mẫu cho một đối tượng mới.
Student.prototype = {
constructor: Student,
age: 19,
race: "White",
disability: "None"
}Bạn có thể sử dụng thuộc tính này để kiểm tra hàm khởi tạo nào đã tạo một phiên bản.
Siêu kiểu và sự kế thừa
Di sản là một phương pháp mà các lập trình viên sử dụng để giảm lỗi trong các ứng dụng của họ. Đó là một cách để gắn bó với Đừng lặp lại chính mình (KHÔ) nguyên tắc.
Giả sử bạn có hai hàm tạo—Sinh viên và Giáo viên—Có hai thuộc tính nguyên mẫu giống nhau.
Student.prototype = {
constructor: Student,
sayName: function () {
return `My Name is ${name}`;
}
}
Teacher.prototype = {
constructor: Teacher,
sayName: function () {
return `My Name is ${name}`;
}
}
Cả hai hàm tạo này đều xác định sayName phương pháp, giống hệt nhau. Để tránh sự trùng lặp không cần thiết này, bạn có thể tạo siêu loại.
function IndividualDetails(){};
IndividualDetails.prototype = {
constructor: IndividualDetails,
sayName: function () {
return `My Name is ${name}`;
}
};
Sau đó, bạn có thể loại bỏ sayName từ cả hai hàm tạo.
Để kế thừa các thuộc tính từ supertype, hãy sử dụng Object.create (). Bạn đặt nguyên mẫu của cả hai hàm tạo thành một thể hiện của siêu kiểu. Trong trường hợp này, chúng tôi đặt Sinh viên và Giáo viên nguyên mẫu cho một phiên bản của IndividualDetails.
Nó đây rồi:
Student.prototype = Object.create(IndividualDetails.prototype);
Teacher.prototype = Object.create(IndividualDetails.prototype);Bằng cách này, Sinh viên và Giáo viên kế thừa tất cả các thuộc tính của supertype, Cá nhân.
Đây là cách thực hành DRY trong OOP bằng cách sử dụng supertypes.
Người xây dựng là người thay đổi trò chơi
Các trình xây dựng là thành phần chính của JavaScript và việc nắm vững chức năng của chúng là rất quan trọng để phát triển các ứng dụng JavaScript OOP. Bạn có thể sử dụng một hàm tạo để tạo các đối tượng chia sẻ thuộc tính và phương thức. Bạn cũng có thể sử dụng kế thừa để xác định cấu trúc phân cấp đối tượng.
Trong ES6, bạn có thể sử dụng lớp từ khóa để định nghĩa các lớp hướng đối tượng cổ điển. Phiên bản JavaScript này cũng hỗ trợ người xây dựng từ khóa.
