JavaScript - Nguyên mẫu bản địa

Chào mừng các bạn đang học lập trình! Hôm nay, chúng ta sẽ khám phá thế giới fascinante của JavaScript Nguyên mẫu bản địa. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ hướng dẫn bạn từng bước trong hành trình này, cũng như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Hãy cùng nhau bắt đầu cuộc phiêu lưu này!

Nguyên mẫu bản địa

Hãy tưởng tượng bạn đang ở trong một thư viện ma thuật nơi mỗi cuốn sách đều có sức mạnh đặc biệt. Trong JavaScript, những "cuốn sách ma thuật" này là các đối tượng bản địa của chúng ta, và "sức mạnh đặc biệt" của chúng là các phương thức và thuộc tính mà chúng sở hữu sẵn. Đó là những gì chúng ta gọi là Nguyên mẫu bản địa.

Nguyên mẫu bản địa là gì?

Nguyên mẫu bản địa là các nguyên mẫu内置 cho các đối tượng tiêu chuẩn của JavaScript như Array, String, Number và Object. Chúng cung cấp một bộ phương thức mà tất cả các thể hiện của các đối tượng này có thể sử dụng.

Hãy xem một ví dụ:

let myString = "Hello, World!";
console.log(myString.toUpperCase());

Kết quả:

HELLO, WORLD!

Trong ví dụ này, toUpperCase() là một phương thức được cung cấp bởi nguyên mẫu String. Mặc dù chúng ta không định nghĩa phương thức này,但我们仍然可以在 bất kỳ chuỗi nào chúng ta tạo ra sử dụng nó. Nó giống như mỗi chuỗi chúng ta tạo ra đều đi kèm với một bộ công cụ内置 hữu ích!

Khám phá Nguyên mẫu bản địa

Hãy khám phá thêm một số phương thức nguyên mẫu bản địa:

// Phương thức nguyên mẫu của Array
let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);  // 3
console.log(fruits.join(", "));  // "apple, banana, cherry"

// Phương thức nguyên mẫu của Number
let num = 3.14159;
console.log(num.toFixed(2));  // "3.14"

// Phương thức nguyên mẫu của Object
let person = { name: "Alice", age: 30 };
console.log(Object.keys(person));  // ["name", "age"]

Mỗi phương thức này (length, join, toFixed, keys) đều đến từ nguyên mẫu bản địa tương ứng. Chúng giống như các cây kéo đa năng - luôn có sẵn khi bạn cần!

Cập nhật Nguyên mẫu bản địa

Bây giờ, nếu chúng ta muốn thêm "sức mạnh đặc biệt" của riêng mình vào những cuốn sách ma thuật này, chúng ta có thể làm điều đó bằng cách cập nhật nguyên mẫu bản địa. Nhưng hãy nhớ, với quyền lực lớn đi kèm với trách nhiệm lớn!

Thêm một phương thức vào Nguyên mẫu bản địa

Hãy thêm một phương thức mới vào nguyên mẫu String:

String.prototype.greet = function() {
return `Hello, ${this}!`;
};

let name = "Alice";
console.log(name.greet());  // "Hello, Alice!"

Ở đây, chúng ta đã thêm phương thức greet vào tất cả các chuỗi. Nó giống như tặng cho mỗi chuỗi trong chương trình của chúng ta khả năng chào hỏi!

Nguy cơ của Việc Thay đổi Nguyên mẫu Bản địa

Mặc dù điều này có vẻ tuyệt vời, việc thay đổi nguyên mẫu bản địa có thể rất nguy hiểm. Nó giống như thay đổi quy tắc của một trò chơi trong khi mọi người đang chơi - nó có thể gây ra sự nhầm lẫn và hành vi không mong muốn. Trong môi trường chuyên nghiệp, thường được khuyên nên tránh thay đổi nguyên mẫu bản địa.

Thêm một phương thức vào Hàm tạo

Một giải pháp an toàn hơn là thêm phương thức vào các hàm tạo của riêng bạn. Hãy tạo một hàm tạo Person:

function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.sayHello = function() {
return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
};

let alice = new Person("Alice", 30);
console.log(alice.sayHello());  // "Hello, my name is Alice and I'm 30 years old."

Bằng cách này, chúng ta đang thêm khả năng mới cho các "cuốn sách ma thuật" của riêng mình mà không làm rối loạn bộ sưu tập gốc của thư viện.

Kết nối Nguyên mẫu

Bây giờ, hãy nói về kết nối nguyên mẫu. Hãy tưởng tượng một gia đình nơi trẻ em kế thừa các đặc điểm từ cha mẹ. Trong JavaScript, các đối tượng có thể kế thừa các thuộc tính và phương thức từ các đối tượng khác thông qua kết nối nguyên mẫu.

function Animal(name) {
this.name = name;
}

Animal.prototype.makeSound = function() {
return "Some generic animal sound";
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
return "Woof!";
};

let myDog = new Dog("Buddy");
console.log(myDog.name);  // "Buddy"
console.log(myDog.makeSound());  // "Some generic animal sound"
console.log(myDog.bark());  // "Woof!"

Trong ví dụ này, Dog kế thừa từ Animal. Nó giống như nói tất cả các con chó đều là động vật, nhưng không phải tất cả các động vật đều là con chó. Chuỗi nguyên mẫu của Dog trông như sau: myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null.

Tóm tắt các Phương thức Nguyên mẫu Bản địa

Dưới đây là bảng các phương thức nguyên mẫu bản địa thường được sử dụng:

Loại Đối tượng	Phương thức	Mô tả
Array	push()	Thêm một hoặc nhiều phần tử vào cuối mảng
Array	pop()	Loại bỏ phần tử cuối cùng khỏi mảng
Array	slice()	Trả về một bản sao nông của một phần của mảng
String	toLowerCase()	Chuyển đổi một chuỗi thành chữ viết thường
String	trim()	Loại bỏ khoảng trống ở cả hai đầu của một chuỗi
Number	toFixed()	Định dạng một số sử dụng ký hiệu定点
Object	hasOwnProperty()	Trả về một boolean chỉ ra liệu một đối tượng có một thuộc tính xác định hay không

Lưu ý, những ví dụ này chỉ là một phần nhỏ. Mỗi loại đối tượng bản địa đều đi kèm với nhiều phương thức hữu ích khác để bạn khám phá và sử dụng trong hành trình lập trình của mình!

Cuối cùng, nguyên mẫu bản địa là những khối xây dựng của các đối tượng JavaScript. Hiểu chúng là mở khóa một kho báu của các công cụ mạnh mẽ có thể làm cho mã của bạn hiệu quả và biểu cảm hơn. Khi bạn tiếp tục hành trình lập trình của mình, bạn sẽ thấy mình ngày càng sử dụng các công cụ này nhiều hơn. Chúc mừng lập trình, và hãy nhớ - trong thế giới của JavaScript, bạn luôn chỉ cách một nguyên mẫu để đến điều kỳ diệu!

Credits: Image by storyset