Hàm tạo trong javascript giải thích bằng ví dụ là gì?

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 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

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 tạo đó để tạo các đối tượng

Trình xây dựng trong JavaScript là gì?

Constructor 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ư 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 hàm tạo với từ khóa hàm vì về cơ bản nó giống như bất kỳ hàm nào khác. Tuy nhiên, các nhà xây dựng tuân thủ các quy ước sau

1. Để 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 chữ in hoa
2. Các nhà xây dựng sử dụng từ khóa này theo cách khác. Bên trong một hàm tạo, điều này đề cập đến đối tượng mới mà hàm tạo sẽ tạo
3. 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 Constructor để tạo đối tượng mới

Trong JavaScript, sử dụng hàm tạo để tạo đố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, femaleStudent là một đối tượng được tạo từ hàm tạo Student. Sử dụng từ khóa mới để gọi hàm dưới dạng hàm 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ó từ khóa new vì this 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, femaleStudent có tất cả các thuộc tính của Student. Bạn có thể truy cập và sửa đổi các thuộc tính này giống như với bất kỳ đối tượng nào khác

Những điều quan trọng cần biết về JavaScript Constructor

Làm việc với các nhà xây dựng có thể rất mệt mỏi, đồ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 nhà xây dựng

Sử dụng hàm tạo với đối số

Bạn có thể mở rộng hàm tạo để nhận đối số. Điều này rất quan trọng nếu bạn đang muốn viết mã đáp ứng, linh hoạt

Bất cứ khi nào bạn tạo một đối tượng 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ụ: femaleStudent mà bạn đã tạo ở trên sẽ có các thuộc tính tên, giới tính và tuổi 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 khó khăn 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 hàm tạo của Sinh viên để chấp nhận hai tham số

 function Student[name, gender] {
    this.name = name;
    this.gender = gender;
    this.age = 19;
}
 

Bây giờ bạn có thể định nghĩa các đối tượng duy nhất từ ​​cùng một hàm tạo bằng cách chuyển vào các đối số khác nhau

Các đối số làm cho các nhà xây dựng linh hoạt hơn. Họ tiết kiệm thời gian và khuyến khích mã sạch

Xác định các phương thức đố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 hàm sayName vào hàm 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, femaleStudent. Sau đó, bạn có thể gọi chức năng 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ó thuộc tính tuổi với 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 phiên bản Sinh viên mà 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 chia sẻ các thuộc tính của nguyên mẫu của nó. Bạn có thể thêm thuộc tính age vào nguyên mẫu Student như bên dưới

 Student.prototype.age = 19; 

Bằng cách này, tất cả các trường hợp của Sinh viên sẽ có thuộc tính tuổi. Khai báo các 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ể

Một 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 tài sản để thêm, điều này có thể 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ẽ đặt 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"
} 

 Student.prototype = { 
    constructor: Student, 
    age: 19, 
    race: "White", 
    disability: "None" 
} 

Siêu kiểu và kế thừa

Kế thừa là một phương pháp lập trình viên sử dụng để giảm lỗi trong ứng dụng của họ. Đó là một cách để tuân thủ nguyên tắc Đừng lặp lại chính mình [DRY]

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

Cả hai hàm tạo này đều định nghĩa phương thức sayName 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 một siêu kiểu

 function IndividualDetails[]{};
 
IndividualDetails.prototype = { 
    constructor: IndividualDetails, 
 
    sayName: function [] {
        return `My Name is ${name}`; 
    }
}; 

Sau đó, bạn có thể xóa sayName khỏi cả hai hàm tạo

Để kế thừa các thuộc tính từ siêu kiểu, hãy sử dụng Object. tạo nên[]. Bạn đặt nguyên mẫu của cả hai hàm tạo thành một phiên bản của siêu kiểu. Trong trường hợp này, chúng tôi đặt các nguyên mẫu của Học sinh và Giáo viên thành một phiên bản của IndividualDetails

Nó đây rồi

 function Student[] {
    this.name = "Gloria";
    this.gender = "Female";
    this.age = 19;
}
 
let femaleStudent = new Student[]; 

Bằng cách này, Học sinh và Giáo viên kế thừa tất cả các thuộc tính của siêu kiểu, IndividualDetails

Đây là cách thực hành DRY trong OOP bằng siêu kiểu

Người xây dựng là người thay đổi cuộc chơi

Trình xây dựng là một 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 hàm tạo để tạo đối tượng chia sẻ thuộc tính và phương thức. Bạn cũng có thể sử dụng tính 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 từ khóa class để đị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ợ từ khóa hàm tạo

hàm tạo trong JavaScript với ví dụ là gì?

nhà xây dựng giải thích với một ví dụ là gì?

Hàm tạo trong JS là gì?

Các loại hàm tạo trong JavaScript là gì?