JavaScript - Từ khóa 'new': Cửa ngõ vào Tạo đối tượng

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy.exciting vào thế giới tạo đối tượng sử dụng từ khóa ma thuật 'new'. Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ là hướng dẫn viên thân thiện của bạn, và chúng ta sẽ khám phá khái niệm này từng bước một. Vậy, hãy cầm lấy những cây phép thuật ảo của bạn (bàn phím), và cùng nhau lặn vào!

Từ khóa 'new' là gì?

Trước khi chúng ta bắt đầu ném phép (viết mã), hãy hiểu rõ từ khóa 'new' là về điều gì. Trong JavaScript, 'new' giống như một lời chú đặc biệt giúp chúng ta tạo ra các đối tượng mới dựa trên các hàm tạo hoặc lớp. Nó giống như có một bản vẽ cho một ngôi nhà và sử dụng nó để xây dựng nhiều ngôi nhà.

Cú pháp: Cách sử dụng từ khóa 'new'

Cú pháp để sử dụng từ khóa 'new' rất đơn giản:

let tenDoiTuong = new HamTao(arguments);

Đừng lo lắng nếu điều này trông có vẻ rối rắm bây giờ. Chúng ta sẽ phân tích nó với các ví dụ khi chúng ta tiếp tục.

Sử dụng 'new' với các Hàm Tạo

Hãy bắt đầu với các hàm tạo. Đây giống như các công thức để tạo ra các đối tượng. Dưới đây là một ví dụ:

function PhapSu(ten, nha) {
this.ten = ten;
this.nha = nha;
this.cast = function() {
console.log(this.ten + " ném một phép thuật!");
};
}

let harry = new PhapSu("Harry Potter", "Gryffindor");
console.log(harry.ten); // Output: Harry Potter
harry.cast(); // Output: Harry Potter ném một phép thuật!

Trong ví dụ này, chúng ta đã tạo ra một hàm tạo PhapSu. Khi chúng ta sử dụng 'new PhapSu()', nó giống như nói, "Tạo một pháp sư mới dựa trên bản vẽ này." Từ khóa 'new' thực hiện nhiều điều cho chúng ta:

1. Nó tạo ra một đối tượng trống mới.
2. Nó đặt 'this' bên trong hàm tạo để tham chiếu đến đối tượng mới này.
3. Nó thực thi hàm tạo, thêm các thuộc tính vào đối tượng mới.
4. Nó trả về đối tượng mới.

Đ Điều này có phải không phải là ma thuật? Chúng ta có thể tạo ra bao nhiêu pháp sư tùy thích sử dụng hàm tạo này!

Sử dụng 'new' với Lớp

Bây giờ, hãy nâng cấp và xem cách sử dụng 'new' với các lớp. Các lớp trong JavaScript giống như các hàm tạo mạnh mẽ hơn, tổ chức hơn. Dưới đây là một ví dụ:

class SachPhucThuat {
constructor(tieuDe, tacGia) {
this.tieuDe = tieuDe;
this.tacGia = tacGia;
this.phucThuat = [];
}

themPhucThuat(phucThuat) {
this.phucThuat.push(phucThuat);
console.log(`Thêm ${phucThuat} vào ${this.tieuDe}`);
}

némPhucThuat(index) {
if (index < this.phucThuat.length) {
console.log(`Ném ${this.phucThuat[index]}!`);
} else {
console.log("Phép thuật không tìm thấy trong sách!");
}
}
}

let sachDauTien = new SachPhucThuat("Hướng dẫn phép thuật cơ bản", "Merlin");
sachDauTien.themPhucThuat("Lumos"); // Output: Thêm Lumos vào Hướng dẫn phép thuật cơ bản
sachDauTien.némPhucThuat(0); // Output: Ném Lumos!

Ở đây, chúng ta sử dụng 'new' với lớp SachPhucThuat. Nó hoạt động tương tự như các hàm tạo, nhưng các lớp cung cấp một cách sạch sẽ, tổ chức hơn để tạo ra các đối tượng với phương thức.

Sử dụng 'new' với các Đối tượng Nativ

JavaScript cũng có các đối tượng nội tại mà chúng ta có thể tạo ra sử dụng 'new'. Hãy xem một vài ví dụ:

// Tạo một đối tượng Date mới
let homNay = new Date();
console.log(homNay); // Output: Ngày và giờ hiện tại

// Tạo một đối tượng Array mới
let vatPhamPhuThuong = new Array("cây phép", "thuốc", "cây chổi");
console.log(vatPhamPhuThuong); // Output: ["cây phép", "thuốc", "cây chổi"]

// Tạo một đối tượng RegExp (Biểu thức chính quy)
let phucThuat = new RegExp("abracadabra", "i");
console.log(phucThuat.test("ABRACADABRA")); // Output: true

Trong các ví dụ này, chúng ta đang sử dụng 'new' với các đối tượng nội tại của JavaScript. Nó giống như sử dụng các công cụ ma thuật đã sẵn có!

Phép thuật đằng sau 'new': Một cái nhìn kỹ hơn

Bây giờ chúng ta đã thấy 'new' trong hành động, hãy nhìn sau màn để hiểu rõ hơn điều gì thực sự đang diễn ra. Khi bạn sử dụng 'new', JavaScript thực hiện các bước sau:

1. Tạo một đối tượng trống mới.
2. Đặt prototype của đối tượng mới này thành prototype của hàm tạo.
3. Gọi hàm tạo với 'this' được đặt là đối tượng mới.
4. Trả về đối tượng mới (trừ khi hàm tạo trả về một giá trị không phải là nguyên thủy).

Dưới đây là bảng tóm tắt các phương thức chính liên quan đến 'new':

Phương thức	Mô tả
Object.create()	Tạo một đối tượng mới với đối tượng prototype và các thuộc tính được chỉ định
Object.setPrototypeOf()	Đặt prototype của một đối tượng xác định thành một đối tượng khác
Function.prototype.call()	Gọi một hàm với một giá trị 'this' và các đối số được cung cấp riêng lẻ
Function.prototype.apply()	Gọi một hàm với một giá trị 'this' và các đối số được cung cấp dưới dạng một mảng

Kết thúc hành trình ma thuật của chúng ta

Và thế là bạn đã có, các nhà mã hóa trẻ! Chúng ta đã khám phá từ khóa ma thuật 'new', từ các hàm tạo cơ bản đến các lớp và các đối tượng nội tại. Nhớ rằng, 'new' là cây phép của bạn để tạo đối tượng trong JavaScript. Sử dụng nó khôn ngoan, và bạn sẽ nhanh chóng tạo ra các chương trình tuyệt vời!

Trước khi chúng ta chia tay, đây là một thử thách lập trình nhỏ cho bạn: Hãy thử tạo một lớp 'Potion' với các thuộc tính như 'name', 'effect' và phương thức 'drink()'. Sau đó, tạo một vài potion sử dụng từ khóa 'new'. Chúc bạn may mắn và may mắn trong hành trình lập trình JavaScript của bạn!

Credits: Image by storyset