03/08/2018, 10:01

Javascript Object Prototypes

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ý ...

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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

[Fundamental] Insights Javascript Object

I can bet that all of us have already known about Javascript and at least one time we heard about Object of Javascript. However, how much do we know about Object ? I don’t think my post bellow contains adequate information about it but I can guarantee that you will never miss any basic ...

Trịnh Tiến Mạnh viết 13:09 ngày 12/08/2018

Ký hiệu đối tượng JavaScript (JavaScript Object Notation)

JSON (JavaSript Object Notation) là biểu mẫu dữ liệu dùng để kí hiệu đối tượng trong JavaScript. Dữ liệu kiểu JSON được đọc một cách dễ dàng chỉ bằng cách chạy mã trên JavaScript. Trong JSON, toàn bộ dữ liệu đều được coi là một mảng (array) hoặc là một đối tượng (object)(là cấu trúc dữ liệu dựa ...

Trịnh Tiến Mạnh viết 00:43 ngày 12/08/2018

JAVASCRIPT OBJECT – LAST BUT NOT LEAST

Nếu bạn theo dõi các bài viết của tôi từ đầu tới giờ thì có thể thấy tôi đã giới thiệu với các bạn về number, string, boolean và array. Hôm nay, tôi sẽ tiếp tục với thành phần cơ bản cuối cùng, đó là object (đối tượng). Tiêu đề của bài viết: last but not least , tức là cuối cùng nhưng không kém ...

Trịnh Tiến Mạnh viết 20:33 ngày 11/08/2018

[JavaScript] Khi Object được tạo từ hư vô

Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :-) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm tra thuộc tính của 1 object trước khi thực hiện một vài thao tác khác. Theo thói quen từ lúc đi học, cú pháp rất thông dụng obj.hasOwnProperty(tê ...

Bùi Văn Nam viết 20:26 ngày 11/08/2018

Javascript Object dưới con mắt của Java Developer

Một trong những thách thức lớn nhất đối với Java developer khi tìm hiểu và áp dụng Javascript chính là sự khác biệt giữa việc cách giải thích khác nhau về object giữa hai ngôn ngữ. Nhìn qua thì Javascript có syntax khá tương tự Java, nhưng về cách tiếp cận lập trình hướng đối tượng của ...

Tạ Quốc Bảo viết 20:11 ngày 11/08/2018
0