Chủ đề nổi bật
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
Mới nhất

Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>. Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử ...

Tài liệu tham khảo & Framework cho Javascript

Dưới đây chúng tôi liệt kê tất cả các nguồn tài liệu hữu ích và Framework cho JavaScript. Bạn nên sử dụng chúng để thực hành cũng như hiểu sâu hơn những chủ đề đã được đề cập trong loạt bài này. Các JavaScript Framework hàng đầu: Follow fanpage của ...

Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error). Syntax Error Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch ...

Đa phương tiện (Multimedia) trong JavaScript

Đối tượng navigator trong JavaScript bao gồm một đối tượng con gọi là plugins . Đối tượng này là một mảng, với một cổng vào (entry) cho mỗi plug-in được cài đặt trên trình duyệt. Đối tượng navigator.plugins chỉ được hỗ trợ bởi Netscape, Firefox và Mozilla. Ví dụ Dưới đây là ví dụ minh ...

Các hàm có sẵn trong JavaScript

Đối tượng Number chỉ chứa các phương thức mặc định mà là một phần của sự định nghĩa của mỗi đối tượng. Phương thức Miêu tả constructor() Trả về hàm mà tạo sự instance của đối tượng này. Theo mặc định, nó là đối tượng Number. toExponential() Làm một số hiển thị ở dạng số mũ, ...

Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug . Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công ...

Document Object Model (DOM) trong JavaScript

Mỗi trang web cư ngụ bên trong một cửa sổ trình duyệt mà có thể xem như là một đối tượng. Một đối tượng Document biểu diễn tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính đa dạng như các đối tượng khác mà cho phép truy cập và chỉnh sửa nội dung tài liệu. ...

Đối tượng Boolean trong JavaScript

Miêu tả Đối tượng Boolean biểu diễn hai giá trị, hoặc "true" hoặc "false". Nếu tham số value bị bỏ qua hoặc là 0, -0, null, false, NaN , undefined, hoặc một chuỗi trống (""), đối tượng có một giá trị khởi tạo là false. Cú pháp Sử dụng cú pháp sau để tạo một đối tượng Boolean . ...

Đối tượng String trong JavaScript

Đối tượng String giúp bạn làm việc với một dãy các ký tự; nó giúp xử lý các kiểu dữ liệu chuỗi gốc trong JavaScript với một số phương thức giúp đỡ. Khi JavaScript tự động biến đổi giữa chuỗi gốc và các đối tượng String, bạn có thể gọi bất kỳ phương thức giúp đỡ nào của đối tượng String ...

Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì? Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang . Khái niệm này khác với: JavaScript – Refresh trang. Có nhiều lý do khác nhau để tại sao bạn muốn ...