Prototype là gì? Hướng dẫn cách thiết lập Prototype

Prototype là khái niệm cốt lõi trong JavaScript, nhưng đối với lập trình viên mới thì khái niệm này vẫn rất xa lạ. Tuy nhiên, những kiến thức này là kiến thức cốt lõi trong lập trình. Vậy prototype là gì và cách thiết lập như thế nào? Bài viết dưới đây sẽ giải đáp câu hỏi này cũng như các thông tin liên quan đến ngôn ngữ này nhé.

Prototype là gì?

Prototype là cơ chế để thực hiện mô hình OOP của ngôn ngữ lập trình JavaScript, mà các object (đối tượng) kế thừa các tính năng từ nhau. Mỗi một object trong Javascript đều có một thuộc tính nội bộ (internal property) gọi là prototype.

Ngôn ngữ này được liên kết với mọi hàm và object theo mặc định, trong đó thuộc tính prototype của hàm (function) có thể truy cập và sửa đổi được. Còn thuộc tính prototype của object thì invisible.

Đó là loại object đặc biệt có thể thể gắn các thuộc tính bổ sung vào, object này sẽ được chia sẻ trên tất cả các phiên bản của hàm khởi tạo.

Nói cách khác, prototype là một object trong JavaScript.

Prototype của object

Thuộc tính prototype của object là invisible. Để truy cập prototype object thì sử dụng phương thức Object.getPrototypeOf (obj) thay vì proto.

Prototype object bao gồm các thuộc tính và phương thức sau:

Phương thức của Prototype Object

Prototype chain

Cơ chế prototype chain rất đơn giản: Khi truy cập một thuộc tính p trên Object obj, JavaScript sẽ tìm kiếm thuộc tính này bên trong đối tượng obj. Nếu engine không tìm kiếm được, thì sẽ tiếp tục tìm kiếm trong nguyên mẫu của đối tượng obj,… cho đến khi đạt đến Object.Prototype. Nếu sau khi tìm kiếm kết thúc, và không có gì đã được tìm thấy kết quả sẽ không xác định. Ví dụ:

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

Trong đoạn code trên, câu lệnh var obj2 = object.create(obj1) sẽ tạo đối tượng obj2 với đối tượng Prototype obj1. Nói cách khác, obj1 trở thành prototype của obj2 thay vì Object.Prototype theo mặc định. Như vậy, b không phải là thuộc tính của obj2, vì vậy vẫn có thể truy cập thông qua prototype chain. Tuy nhiên, đối với thuộc tính c, sẽ có giá trị không xác định vì không thể tìm thấy trong obj1 và Object.Prototype.

Cách thiết lập Prototype

Có nhiều cách khác nhau để thiết lập prototype của một object trong JavaScript. Có hai cách phổ biến sau: Object.create() và constructor.

Sử dụng Object.create

Phương thức Object.create() tạo một object mới và cho phép chỉ định một object sẽ được sử dụng làm nguyên mẫu của đối tượng mới.

Ví dụ:

const personPrototype = {
  greet() {
    console.log('hello!');
  }
}

const carl = Object.create(personPrototype);
carl.greet();  // hello!

Khi tạo một object personPrototype, có phương thức great(). Sau đó, khi sử dụng Object.create() để tạo một đối tượng mới với personPrototype làm prototype của nó. Bây giờ có thể gọi great() trên đối tượng mới và prototype cung cấp việc triển khai nó.

Sử dụng constructor

Trong JavaScript, tất cả các hàm đều có thuộc tính có tên là prototype. Khi gọi một hàm như một constructor, thuộc tính này được đặt làm prototype của object mới được tạo (theo quy ước, trong thuộc tính có tên proto).

Vì vậy, nếu đặt prototype của một consrtructor, chúng ta có thể đảm bảo rằng tất cả các object được tạo bằng constructor tạo đó đều được cung cấp cho prototype đó:

const personPrototype = {
  greet() {
    console.log(`hello, my name is ${this.name}!`);
  }
}

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

Person.prototype = personPrototype;
Person.prototype.constructor = Person;

Ở đây chúng ta tạo:

• Một object personProtortype có phương thức great().
• Một hàm khởi tạo person(), khởi tạo tên của người cần tạo.

Sau đó, đặt thuộc tính prototype của hàm Person trỏ tới personPrototype.

Dòng cuối cùng (Person.prototype.constructor = Person;) đặt thuộc tính constructor của prototype cho hàm được sử dụng để tạo đối tượng Person. Đây là điều bắt buộc vì sau khi đặt Person.prototype = personPrototype;. Thuộc tính này trỏ đến constructor cho personPrototype là Object chứ không phải là Person ( vì personPrtotype được xây dựng như một object literal).

Sau code này, các object được tạo bằng Person() sẽ lấy personPrototype là prototype của mình.

Prototype và sự kế thừa

Đó là một tính năng mạnh mẽ và rất linh hoạt của JavaScript, tính năng này có thể giúp tái sử dụng code và kết hợp các object với nhau.

Đặc biệt, prototype còn hỗ trợ một phiên bản kế thừa. Tính kế thừa là một trong những đặc điểm nổi bật của Prototype.

Kế thừa là một tính năng của ngôn ngữ lập trình hướng đối tượng (OOP), cho phép người lập trình chứng minh ý tưởng “một số object trong hệ thống là phiên bản chuyên biệt hơn của các object khác”.

Ví dụ: Nếu bạn đang lập trình mô hình một trường học, trong trường học có giáo sư và học sinh. Cả hai đều là người, vì vậy đều có những đặc điểm giống nhau như cả hai đều có tên. Tuy nhiên, mỗi người sẽ có thêm các đặc điểm bổ sung như giáo sư thì có thêm bộ môn họ dạy. Trong hệ thống lập trình hướng đối tượng (OOP), chúng ta có thể nói rằng cả giáo sư và học sinh đều có những thuộc tính kế thừa từ mọi người.

Trong JavaScript, nếu các đối tượng Giáo sư và học sinh có thể có prototype Người (Person), thì chúng có thể kế thừa các thuộc tính chung. Đồng thời, thêm và xác định lại những thuộc tính cần khác nhau.

Hướng dẫn sử dụng Prototype trong JavaScript

Ngôn ngữ này cho phép người dùng dễ dàng xác định các phương thức cho tất cả các trường hợp của một object. Cái hay ở đây là phương thức được áp dụng cho prototype, vì vậy chỉ được lưu trữ trong bộ nhớ một lần, Tuy nhiên, mọi instance của object đều có quyền truy cập vào.

Ví dụ:

function Pet(name, species){
    this.name = name;
    this.species = species;
}
function view(){
    return this.name + " is a " + this.species + "!";
}
Pet.prototype.view = view;
var pet1 = new Pet('Gabriella', 'Dog');
alert(pet1.view()); //Outputs "Gabriella is a Dog!"

Trong hàm trên, chỉ bằng cách sử dụng prototype khi đính kèm phương thức xem, chúng ta đã đảm bảo rằng tất cả các object Pet đều có quyền truy cập vào phương thức xem. Bên cạnh đó, chúng ta có thể sử dụng phương pháp prototype để tạo ra nhiều hiệu ứng hơn.

Ví dụ: Chúng ta muốn có thêm object Dog, và object này kế thừa từng phương thức và thuộc tính được sử dụng tromg object Pet. Đồng thời, thiết lập một tính năng đặc biệt chỉ có object Dog mới có quyền truy cập.

function Pet(name, species){
    this.name = name;
    this.species = species;
}
function view(){
    return this.name + " is a " + this.species + "!";
}
Pet.prototype.view = view;
function Dog(name){
    Pet.call(this, name, "dog");
}
Dog.prototype = new Pet();
Dog.prototype.bark = function(){
    alert("Woof!");
}

Trong hàm này, chúng ta đã thiết lập object Dog và gọi hàm Pet bằng phương thức call (). Phương thức call cho phép gọi một hàm đích cụ thể bên trong một đối tượng bằng cách truyền vào đối tượng muốn chạy hàm (được tham chiếu bởi ‘this’ ở dòng 10) theo sau là các đối số.

Sau đó, cấp cho object Dog một phương thức là bark (chỉ có các object Dog mới có quyền truy cập).

var pet1 = new Pet('Trudy', 'Bird');
var pet2 = new Dog('Gabriella');
alert(pet2.view()); // Outputs "Gabriella is a Dog!"
pet2.bark(); // Outputs "Woof!"
pet1.bark(); // Error

Ngôn ngữ này hoạt động theo một chuỗi. Khi gọi pet2.view(), trước tiên phải kiểm tra đối tượng Dog và Pet đã có phương thức xem nào hay chưa. Vì Dog kế thừa Pet, Pet kế thừa từ Object.prototype.

Object.prototype.whoAmI = function(){
    alert("I am an object!");
}
pet1.whoAmI(); //Outputs 'I am an object!'
pet2.whoAmI(); //Outputs 'I am an object!'

Lời kết

Bài viết trên là những thông tin tổng hợp về prototype. Hy vọng với bài viêt này giúp bạn hiểu hơn về Prototype là gì? Cũng như hiểu rõ tầm quan trọng của prototype trong Javacript. Nếu có bất kỳ thắc mắc nào hãy để lại bình luận bên dưới để được hỗ trợ nhé.