Object Prototype

Xem thêm
Lập Trình JavaScript Cơ Bản | Basic JavaScript programming

Object Prototype?

Trong JavaScript, mọi đối tượng đều được tạo dựa trên một prototype. Mỗi đối tượng có một property ẩn gọi là __proto__ (hoặc [[Prototype]] trong một số trình duyệt), trỏ đến prototype của nó. Prototype đó chứa các thuộc tính và phương thức mà đối tượng đó có thể sử dụng.

Có một số cách để tạo object prototype trong JavaScript:

Sử dụng Object.create():

// Tạo một object prototype
var prototypeObject = {
  sayHello: function() {
    console.log("Hello!");
  }
};

// Tạo một đối tượng mới dựa trên prototypeObject
var myObject = Object.create(prototypeObject);

// Sử dụng phương thức từ prototype
myObject.sayHello(); // Xuất ra "Hello!"

Sử dụng Constructor Function:

// Tạo một constructor function
function PrototypeObject() {
  this.sayHello = function() {
    console.log("Hello!");
  };
}

// Tạo một đối tượng mới từ constructor function
var myObject = new PrototypeObject();

// Sử dụng phương thức từ prototype
myObject.sayHello(); // Xuất ra "Hello!"

Sử dụng class (ES6):

// Định nghĩa một lớp có prototype
class PrototypeClass {
  sayHello() {
    console.log("Hello!");
  }
}

// Tạo một đối tượng từ lớp
var myObject = new PrototypeClass();

// Sử dụng phương thức từ prototype
myObject.sayHello(); // Xuất ra "Hello!"

Lưu ý rằng từ ES6 trở đi, JavaScript hỗ trợ cú pháp class giúp làm việc với prototype trở nên dễ đọc và linh hoạt hơn. Tuy nhiên, bản chất của nó vẫn là sử dụng prototype để xây dựng kế thừa trong JavaScript.

Bạn cũng có thể sử dụng .prototype để thêm phương thức hoặc thuộc tính vào prototype của một constructor function. Dưới đây là ví dụ:

// Tạo một constructor function
function PrototypeObject() {
  // Thuộc tính trong constructor
  this.property1 = "Value 1";
}

// Thêm phương thức vào prototype
PrototypeObject.prototype.sayHello = function() {
  console.log("Hello!");
};

// Tạo một đối tượng từ constructor function
var myObject = new PrototypeObject();

// Truy cập thuộc tính và sử dụng phương thức từ prototype
console.log(myObject.property1); // Xuất ra "Value 1"
myObject.sayHello(); // Xuất ra "Hello!"

Như bạn thấy, sayHello được thêm vào prototype của PrototypeObject, điều này có nghĩa là mọi đối tượng tạo từ constructor này đều sẽ có khả năng sử dụng phương thức sayHello thông qua prototype của nó.

Lưu ý rằng việc thêm phương thức và thuộc tính vào prototype giúp tiết kiệm bộ nhớ, vì chúng được chia sẻ giữa tất cả các đối tượng được tạo từ constructor đó thay vì được tạo mới cho mỗi đối tượng.

Ví dụ

Thêm phương thức getFullName

Để vượt qua thử thách này, bạn hãy tạo một object constructor Student gồm: firstName, lastName. Sau đó, định nghĩa thêm phương thức là getFullName, phương thức này sẽ trả về tên đầy đủ của sinh viên.

Giữa firstName và lastName cần có 1 khoảng trắng (1 dấu space).

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

Student.prototype.getFullName = function(){
    return `${this.firstName} ${this.lastName}`;
}

// Ví dụ khi sử dụng
var student = new Student('Long', 'Bui');

console.log(student.firstName);  // 'Long'
console.log(student.lastName);  // 'Bui'
console.log(student.getFullName());  // 'Long Bui'

Object Prototype