JavaScript - Object Constructors

Xin chào, các bạn học lập trình! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của JavaScript Object Constructors. Là giáo viên khoa học máy tính gần gũi của bạn, tôi rất háo hức dẫn dắt các bạn trong hành trình này. Vậy, hãy đeo mũ bảo hiểm ảo của bạn, và chúng ta cùng bắt đầu xây dựng một số đối tượng!

Object Constructors

Hãy tưởng tượng bạn đang điều hành một cửa hàng thú cưng kỳ diệu. Bạn có rất nhiều loài động vật khác nhau, mỗi loài đều có một bộ đặc điểm riêng. Thay vì viết ra từng con vật riêng lẻ, liệu có phải là tuyệt vời nếu chúng ta có thể tạo ra một bản đồ cho động vật của mình? Đó chính xác là điều mà object constructors làm trong JavaScript!

Một object constructor giống như một nhà máy sản xuất ra các đối tượng có các thuộc tính và phương thức tương tự. Hãy tạo một constructor đơn giản cho thú cưng kỳ diệu của chúng ta:

function MagicalPet(name, species, specialPower) {
this.name = name;
this.species = species;
this.specialPower = specialPower;
this.introduce = function() {
console.log(`Xin chào, tôi là ${this.name}, một ${this.species} với khả năng ${this.specialPower}!`);
};
}

Bây giờ, hãy phân tích này:

1. Chúng ta định nghĩa một hàm叫做 MagicalPet với các tham số cho tên, loài và khả năng đặc biệt.
2. Trong hàm, chúng ta sử dụng this để gán các tham số này là các thuộc tính của đối tượng.
3. Chúng ta cũng định nghĩa một phương thức叫做 introduce để in ra lời chào.

Để tạo một con thú cưng kỳ diệu mới, chúng ta sử dụng từ khóa new:

let fluffy = new MagicalPet("Fluffy", "rồng", "nhiệt thở");
fluffy.introduce(); // Output: Xin chào, tôi là Fluffy, một rồng với khả năng nhiệt thở!

Voila! Chúng ta vừa tạo ra con thú cưng kỳ diệu đầu tiên của mình bằng cách sử dụng một object constructor. Có phải đó là điều tuyệt vời không?

Thêm một Thuộc tính hoặc Phương thức vào Constructor

Đôi khi, sau khi tạo constructor, chúng ta có thể nhận ra rằng chúng ta quên thêm một thuộc tính hoặc phương thức quan trọng. Đừng lo lắng! Chúng ta có thể thêm chúng sau bằng cách sử dụng prototype.

Hãy thêm thuộc tính age và phương thức birthday vào MagicalPet của chúng ta:

MagicalPet.prototype.age = 0;
MagicalPet.prototype.birthday = function() {
this.age++;
console.log(`${this.name} bây giờ ${this.age} tuổi!`);
};

Bây giờ, mỗi con thú cưng kỳ diệu sẽ có tuổi (bắt đầu từ 0) và có thể庆祝 sinh nhật:

fluffy.birthday(); // Output: Fluffy bây giờ 1 tuổi!
fluffy.birthday(); // Output: Fluffy bây giờ 2 tuổi!

JavaScript Object Prototype

Bạn có thể đang tự hỏi, "Vậy这个东西 'prototype' mà chúng ta vừa sử dụng là gì?" Well, hãy tưởng tượng nó như một túi đựng chung mà tất cả các đối tượng được tạo ra từ cùng một constructor mang theo. Bất kỳ thứ gì chúng ta đặt vào túi này đều có thể truy cập được bởi tất cả các đối tượng.

Khi chúng ta thêm các thuộc tính hoặc phương thức vào prototype, chúng ta thực sự đang đặt chúng vào túi đựng chung này. Điều này tiết kiệm bộ nhớ hơn nhiều so với việc thêm chúng trực tiếp vào từng đối tượng, đặc biệt là khi chúng ta có rất nhiều đối tượng.

Dưới đây là một hình ảnh trực quan:

MagicalPet Constructor
|
v
Prototype (Túi Đựng Chung)
- age
- birthday()
|
v
Các Đối tượng MagicalPet Riêng Lẻ
- name
- species
- specialPower
- introduce()

Built-in Object Constructors in JavaScript

JavaScript cung cấp một số constructor đối tượng tích hợp sẵn mà bạn sẽ thường xuyên sử dụng trong các cuộc phiêu lưu lập trình của mình. Hãy cùng xem xét một số trong số chúng:

Constructor	Mô tả	Ví dụ
String()	Tạo các đối tượng chuỗi	let greeting = new String("Hello");
Number()	Tạo các đối tượng số	let age = new Number(25);
Boolean()	Tạo các đối tượng boolean	let isAwesome = new Boolean(true);
Array()	Tạo các đối tượng mảng	let fruits = new Array("apple", "banana", "cherry");
Object()	Tạo các đối tượng tổng quát	let emptyObj = new Object();
Date()	Tạo các đối tượng ngày	let today = new Date();

Mặc dù các constructor này có sẵn, nhưng đáng lưu ý rằng đối với các kiểu nguyên thủy như chuỗi, số và boolean, việc sử dụng literals là phổ biến và hiệu quả hơn:

let greeting = "Hello";            // Ưu tiên hơn new String("Hello")
let age = 25;                      // Ưu tiên hơn new Number(25)
let isAwesome = true;              // Ưu tiên hơn new Boolean(true)
let fruits = ["apple", "banana"];  // Ưu tiên hơn new Array("apple", "banana")

Tuy nhiên, các constructor như Date() thường được sử dụng như sau:

let birthday = new Date("1990-01-01");
console.log(birthday.getFullYear()); // Output: 1990

Và thế là xong, các pháp sư mã nguồn non trẻ! Chúng ta đã cùng nhau hành trình qua thế giới của JavaScript Object Constructors, thêm các thuộc tính và phương thức kỳ diệu, khám phá bí ẩn của prototype, và thậm chí còn lén nhìn một số constructor tích hợp sẵn.

Nhớ rằng, thực hành là cách tốt nhất để thành thạo. Hãy thử tạo constructor của riêng bạn, có thể là cho các loại phép thuật khác nhau hoặc các sinh vật kỳ diệu. Càng chơi với các khái niệm này, chúng sẽ càng trở nên tự nhiên hơn.

Tiếp tục lập mã, tiếp tục học hỏi, và quan trọng nhất, đừng bao giờ ngừng vui vẻ! Đến bài học tiếp theo, chúc mã của bạn không có lỗi và thời gian biên dịch nhanh chóng!

Credits: Image by storyset