Khám Phá Khái Niệm Thừa Kế Nguyên Mẫu trong JavaScript

Thừa kế nguyên mẫu (prototypal inheritance) là một trong những khái niệm quan trọng và đôi khi gây khó hiểu trong JavaScript. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu khái niệm này một cách đơn giản thông qua những ví dụ thực tiễn dễ hiểu.

Thừa Kế Là Gì?

Hãy hình dung về một gia đình, nơi có ông bà, cha mẹ và con cái. Trong đó, ông bà là tổ tiên, cha mẹ là thế hệ tiếp theo và con cái là thế hệ tiếp theo nữa. Điều này tương tự như cách mà thừa kế trong JavaScript hoạt động.

• Ông bà: Đối tượng gốc (Object)
• Cha mẹ: Các hàm tạo như Array, String, Number
• Con cái: Các đối tượng được tạo ra từ các hàm tạo.

Đối Tượng Trong JavaScript

Trong JavaScript, mọi thứ gần như đều được coi là đối tượng. Cụ thể, khi nói đến "Đối tượng", chúng ta đang đề cập đến hàm tạo dùng để tạo ra các đối tượng cụ thể.

Cách Tạo Một Đối Tượng

Để tạo một đối tượng, bạn có thể sử dụng:

• Cú Pháp Đối Tượng:

const newObj = {}

• Hàm Tạo Object:

const newObjWithConstructor = new Object()

Tạo Các Kiểu Dữ Liệu Khác

Tương tự như vậy, chúng ta có thể tạo ra các kiểu dữ liệu khác:

• Mảng:

const newArr = []
const newArrWithConstructor = new Array()

• Số:

const num = 3
const numWithConstructor = new Number(3)

• Hàm:

function logArg (arg) { console.log(arg) }
const logArgWithConstructor = new Function('arg1', 'console.log(arg1)')

• Boolean:

const isValid = true
const isValidWithConstructor = new Boolean(true)

Nguyên Mẫu (Prototype) Trong JavaScript

Nguyên mẫu trong JavaScript có thể được coi là "DNA" của đối tượng. Nó xác định các thuộc tính và phương thức mà đối tượng sẽ kế thừa. Mỗi hàm tạo đều có một nguyên mẫu và các đối tượng được tạo ra từ hàm đó sẽ được kế thừa thuộc tính từ nguyên mẫu.

Xem Nội Dung Nguyên Mẫu

Để xem các thuộc tính trong nguyên mẫu của một hàm tạo, bạn có thể viết như sau:

console.log(Array.prototype)
console.log(Object.prototype)

Ví Dụ Về Kế Thừa Nguyên Mẫu

Khi bạn sử dụng các thuộc tính và phương thức như .length, .map, .reduce, chúng thực ra đã được kế thừa từ nguyên mẫu của lớp đối tượng mà bạn đang làm việc.

Thay Đổi Nguyên Mẫu

Bạn có thể thay đổi một nguyên mẫu của một hàm tạo tương tự như việc thay đổi thuộc tính của một đối tượng. Tuy nhiên, thao tác này rất nguy hiểm và cần được thực hiện chỉ khi bạn có kiến thức đầy đủ về điều này.

Ví dụ về cách thêm thuộc tính mới vào nguyên mẫu:

Array.prototype.currentDate = new Date().toDateString();

Phương Thức Mới trong Nguyên Mẫu

Bạn có thể định nghĩa các phương thức mới cho nguyên mẫu để sử dụng chúng trong mã của bạn:

Ví dụ 1: Tạo Phương Thức .reduceV2

Array.prototype.reduceV2 = function (reducer, initialValue) { /*...*/ };

Ví dụ 2: Tạo Phương Thức .mapV2

Array.prototype.mapV2 = function (func) { /*...*/ };

Kết Luận

Việc hiểu rõ về thừa kế nguyên mẫu trong JavaScript sẽ giúp bạn nắm vững nhiều khái niệm khác trong ngôn ngữ này. Hãy thử nghiệm với các ví dụ và mở rộng kiến thức của bạn mỗi ngày.

Cảm ơn bạn đã đồng hành theo dõi bài viết!
source: viblo