Javascript Object Prototypes - Javascript căn bản

Chúng ta đã tìm hiểu về Object và các thao tác với Object trong Javascript rồi nhưng đó cũng chỉ là một phần khá nhỏ liên quan đến đối tượng. Lý do nó chưa thể hiện được các tính chất căn bản của một đối tượng như tạo mới đối tượng, giá trị khởi tạo cho đối tượng, ... Vậy trong bài này mình sẽ trình bày về những khuyết điểm này và đó chính là Javascript Object Prototypes.

1. Prototypes trong Javascript

Prototypes dịch ra là các nguyên mẫu nhưng về phía lập trình Javascript thì bạn có thể hiểu nó giống như các thành phần phương thức và  thuộc tính của một đối tượng, vì vậy tất cả các đối tượng trong Javascript đều có một Prototype riêng để lưu trữ các thành phần đó. Lúc này khi bạn tạo mới một đối tượng thì đối tượng đó sẽ kế thừa tất cả các phương thức và thuộc tính chứa trong Prototype của đối tượng đó.

Ví dụ khi bạn tạo mới một đối tượng Number thì nó sẽ có tất cả các hàm (phương thức) xử lý riêng của đối tượng Number.

// Tạo mới đối tượng Number
var age = new Number(12);

// Lúc này sẽ sử dụng được các phương thức
age.toString();
age.toFixed();
age.toPrecision();
age.valueOf();

Bổ sung dữ liệu vào đối tượng

Vậy câu hỏi đặt ra là có thể thêm các thuộc tính và phương thức vào Prototype của một đối tượng nào đó hay không? Câu trả lời là bạn hoàn toàn có thể làm được bằng cú pháp sau:

Object.prototype.thuoc_tinh = "giá trị mặc định";
Object.prototype.phuong_thuc = function(){
    // some thing
};

Ví dụ: Thêm một hàm plus() cồng dồn vào giá trị hiện tại của đối tượng Number. Lưu ý bạn cần sử dụng hàm valueOf() để lấy giá trị hiện tại của đối tượng.

XEM DEMO

// Tạo đối tượng
Number.prototype.plus = function(value){
return this.valueOf() + parseInt(value);
};

// Tạo mới đối tượng
var age = Number(12);
document.write(age.plus(12) + "<br/>");

// Tạo đối tượng khác
var year = 2014;
document.write(year.plus(12));

Trong ví dụ này bạn thấy mình sử dụng hai cách để tạo đối tượng Number và cả hai đều sử dụng được hàm plus().

2. Tạo mới Object và thao tác với Prototype

Chúng ta đã được học cách tạo mới Object với từ khóa new Object và {} rồi nhưng khi tạo bằng hai cách này ta không thể sử dụng từ khóa new để khởi tạo mới một đối tượng được.

var Person = {};

// Sai, không hoạt động
var p = new Person();

Vậy có một cách khác có thể giải quyết được đó là thông qua hàm trong Javascript.

Ví dụ: Tạo đối tượng Person gồm các thuộc tính (name, email, address) và phương thức showInfo() để hiển thị thông tin.

XEM DEMO

function Person(){
    
    // Thuộc tính
    this.name = "";
    this.email = "";
    this.address = "";
    
    // Phương thức
    this.showInfo = function(){
        documenet.write("Tên là: " + this.name + "<br/>");
        documenet.write("Email là: " + this.email + "<br/>");
        documenet.write("Địa chỉ là: " + this.address + "<br/>");
    };
}

Lúc này muốn tạo mới đối tượng và sử dụng các thuộc tính, phương thức thì ta làm như sau.

// Tạo mới
var cuong = new Person();

// Gán thuộc tính
cuong.name = "Nguyễn Văn Cường";
cuong.email = "thehalfheart@gmail.com";
cuong.address = "Buôn Ma Thuột ĐăkLăk";

// Gọi phương thức
cuong.showInfo();

3. Thêm thuộc tính và phương thức vào Prototype

Để bổ sung thuộc tính hoặc phương thức vào một đối tượng thông qua Prototype thì bạn sử dụng cú pháp ở phần 1 mà mình đã giới thiệu.

Ví dụ: Bổ sung thuộc tính gender và phương thức showGender vào đối tượng Person.

XEM DEMO

// Tạo đối tượng
function Person(){
    
    // Thuộc tính
    // ...
    
    // Phương thức
    // ...
}

// Bổ sung thông tin
Person.prototype.gender = "";
Person.prototype.showGender = function(){
  document.write(this.gender);  
};


// Sử dụng
var cuong = new Person();
cuong.gender = "Nam";
cuong.showGender();

4. Lời kết

Prototype có vai trò rất quan trọng trong việc quản lý các phương thức và thuộc tính của đối tượng, chính vì vậy thông thường những bạn chỉ code ở mức độ đơn giản thì rất khi khi sử dụng, còn những bạn muốn code nâng cao thì chắc chắn phải biết đến đối tượng Prototype này.

Trong bài mình có đưa ra một số ví dụ rất trực quan và thể hiện được các thao tác liên quan đến Prototype trong Javascript, hy vọng qua bài này bạn sẽ hiểu và thấy được sức mạnh thực sự của Javascript.