Kế thừa từ prototype trong javaScript

Bài viết trước đã trình bày về những kỹ thuật căn bản để xây dựng ứng dụng javaScript theo hướng đối tượng, cách tạo và sử dụng thuộc tính, phương thức của đối tượng. Để có thể xây dựng code javaScript có thể dùng lại bài này sẽ giới thiệu về kỹ thừa kế trong javaScript thông qua đối tượng prototype.

Khi bạn tạo phương thức hay thuộc tính public cho đối tượng thông qua đối tượng prototype, bạn có thể kế thừa lại nó thông qua một đối tượng khác. Ví dụ sau sẽ trình bày về kỹ thuật này:

// Create the constructor for a Person object
// Tạo cấu trúc cho đối tượng Person
function Person(nam​e, password) {
  this.name = name;
  this.password = password;
}

// Thêm phương thức mới cho đối tượng Person
Person.prototype.getName = function () {
  return this.name;
};
Person.prototype.getPassword = function () {
  return this.password;
};
Person.prototype.getLevel = function () {
  return this.level;
};

// Thêm thuộc tính cho đối tượng Person
Person.prototype.level = 'admin';

// Tạo cấu trúc cho đối tượng User
function User(name) {
  // Tạo thuộc tính cho User
  this.name = name;
};

// Đối tượng User thừa kế tất cả các phương thức,
// thuộc tính của đối tượng Person được tạo thông qua prototype
User.prototype = new Person();

// Tạo đối tượng
var person = new Person('Ti', '789');
var user = new User('Teo', '123456');

alert(user.getName()); // Teo
alert(user.getLevel()); // admin
alert(user.getPassword()); // Chưa định nghĩa(undefined)
alert(person.getName()); // Ti

Qua ví dụ trên bạn có thể thấy được đối tượng User đã kế thừa lại 3 phương thức của đối tượng Person được tạo thông qua prototype và nó cũng kế thừa luôn thuộc tính level của đối tượng Person. Đối tượng User kế thừa phương thức getName() từ đối tượng Person nhưng kết quả trả về là thuộc tính name của đối tượng User từ đây bạn chú ý một điều là nó không kế thừa lại thuộc tính được tạo bên trong đối tượng Person, mặc dù đối tượng User đã kế thừa phương thức getPassword() từ đối tượng Person nhưng trong phương thức getPassword() có trả về thuộc tính password mà nó chưa được định nghĩa ở đối tượng User nên bạn sẽ nhận được kết quả undefined.

Tham khảo Apress.pro.javascript.techniques _ 2006 John Resig