Javascript: Thừa kế trong javascript phải làm thế nào?

Javascript là một ngôn ngữ khá linh hoạt, có dynamic type. Nó rất dễ học, dễ làm ở mức căn bản. Nhưng khi anh em học sâu thì mới thấy nó dị thế nào. Javascript là một ngôn ngữ OOP. Nó cho phép chúng ta tạo ra những đối tượng và nó có đầy đủ những tính chất của một OOP. Trong bài này, chúng ta cùng tìm hiểu làm thế nào để thừa kế trong javascript nhé.

Một OOP thường có bốn tính chất sau: Bao đóng, Thừa kế, Trừu tượng, Đa hình. Một trong số đó, thừa kế có lẽ là dị nhất trong javascript.

Vậy thừa kế(inheritance) là gì? Đơn giản, một đối tượng con có thể thừa kế những thuộc tính và phương thức từ một đối tượng cha. Ví dụ như bạn sẽ thừa kế nhà và xe từ cha mẹ bạn vậy. Bạn không cần làm việc cực nhọc để có nhà và xe, đơn giản vì bạn thừa kế của cha mẹ bạn. Quá dễ hiểu phải không nào!

Giả sử, chúng ta có một đối tượng Person như sau:

function Person(firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

Và chúng ta muốn tạo một đối tượng Student và muốn nó thừa kế các thuộc tính của Person. Ở các ngôn ngữ khác như Java, chúng ta dùng từ khóa extends và super. Hiện tại, chúng ta dùng hai version của Javascript là ES5 và ES6. Với ES6, chúng ta đã có class, extends, super như Java. Nhưng tôi muốn bàn ở đây chỉ là cú pháp của ES5 vì bản chất cú pháp mới chỉ thì một cách khác để tạo một đối tượng, nó không thay đổi cách Javascript hoạt động. Chúng ta muốn hiểu sâu bên dưới Javascript làm gì thì xem cú pháp ES5 nhé.

Vậy làm sao để thừa kế đây. Chúng ta dùng call thần thánh nhé.

function Student(firstName, lastName) {
   Person.call(this, firstName, lastName);
}
const john = new Student('John', 'Snow');
console.log(john);

Bam!!! Học Sinh john đã thừa kế được firstName, lastName từ Person. Make sense !!

Tiếp theo giả sử chúng ta muốn Student lại thừa kế phương thức getFullName của Person thì chúng ta làm sao. Chúng ta phải tạo getFullName trong prototype của Person như sau:

function Person(firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}
Person.prototype.getFullName = function() {
   return this.firstName + ' ' + this.lastName;
}

Đối tượng Student thừa kế hàm getFullName như sau:

Student.prototype = Object.create(Person.prototype);// hoặc có thể viết Student.prototype = new Person();

Về bản chất Object.create sẽ link prototype của Student với prototype của Person. Để mà khi chúng ta truy xuất những method của cha(Person) thì Javascript Engine sẽ dò tìm trong prototype của Person. Đây là cách thiết kế của JS, những đối tượng thường có prototype và một khi chúng ta muốn thừa kề lẫn nhau, chúng ta có thể link các prototype lại với nhau.

Thế là xong rồi, túm cái váy lại ví dụ cuối cùng sẽ như thế này:

function Person(firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

Person.prototype.getFullName = function() {
   return this.firstName + ' ' + this.lastName;
}

function Student(firstName, lastName) {
   Person.call(this, firstName, lastName);
}

Student.prototype = Object.create(Person.prototype);

const john = new Student('John', 'Snow');
console.log(john.getFullName());