Object Trong JavaScript
Đối tượng trong javascrip Như bạn đã biết, JavaScript không phải là một ngôn ngữ lập trình hướng đối tượng, tuy nhiên bạn hoàn toàn có thể lập trình hướng đối tượng thông qua kiểu dữ liệu Object mà JavaScript cung cấp. Trong JavaScript, đối tượng (object) là một khái niệm trừu tượng thể hiện cho ...
Đối tượng trong javascrip Như bạn đã biết, JavaScript không phải là một ngôn ngữ lập trình hướng đối tượng, tuy nhiên bạn hoàn toàn có thể lập trình hướng đối tượng thông qua kiểu dữ liệu Object mà JavaScript cung cấp.
Trong JavaScript, đối tượng (object) là một khái niệm trừu tượng thể hiện cho một đối tượng cụ thể và JavaScript có sẵn một số đối tượng như Date, Number. Ngoài các đối tượng này, người lập trình có thể tự tạo một đối tượng theo ý của mình dựa vào yêu cầu của ứng dụng.
1, Khởi tạo đối tượng Có 2 cách để tạo 1 đối tượng
C1: Sử dụng từ khóa new Object()
var Comment = new Object();
C2: Sử dụng từ khóa {}
var Comment = {};
2, Thuộc tính và phương thức của đối tượng
Mỗi đối thượng sẽ có các thuộc tính và phương thức
Thuộc tính
Thuộc tính là những đặc điểm (có thể hiểu là biến) cần lưu trữ trong đối tượng. Ví dụ với đối tượng Comment thì mình cần các thuộc tính sau:
- title
- content
- fullname
Khai báo thuộc tính có 3 cách:
C1: Sử dụng từ khóa new Object();
// Khởi tạo var Comment = new Object(); // Thêm thuộc tính Comment.title = '; Comment.content = '; Comment.fullname = '; Comment.email = ';
C2: Sử dụng từ khóa {} và thêm thuộc tính ngay lúc khai báo
// Khởi tạo var Comment = { title : "", content : "", fullname : "", email : "" };
C3: Sử dụng từ khóa {} và thêm thuộc tính sau đó
// Khởi tạo var Comment = {}; // Thêm thuộc tính Comment.title = '; Comment.content = '; Comment.fullname = '; Comment.email = ';
Phương Thức Phương thức là những hành động (có thể hiểu là hàm) của đối tượng. Ví dụ trong đối tượng Comment thì mình cần hai phương thức là:
- addComment()
- validateComment()
Khai báo phương thức cũng có 3 cách tương tự như cách khai báo thuộc tính:
C1: Sử dụng từ khóa new Object();
// Khởi tạo var Comment = new Object(); // Thêm phương thức Comment.addComment = function(){ // do some thing }; Comment.validateComment = function(){ // do some thing };
C2: Sử dụng từ khóa {} và thêm thuộc tính ngay lúc khai báo
// Khởi tạo var Comment = { addComment : function(){ // do some thing }, validateComment : function(){ // do some thing } };
C3: Sử dụng từ khóa {} và thêm thuộc tính sau đó
// Khởi tạo var Comment = {}; // Thêm phương thức Comment.addComment = function(){ // do some thing }; Comment.validateComment = function(){ // do some thing };
Note: Trong 3 cách trên, mình thường hay dùng cách 2 để khai báo thuộc tính và phương thức vì nó dễ dàng quản lý code hơn.
3, Thao tác với thuộc tính và phương thức của đối tượng
Sau khi tạo xong đối tượng, để sử dụng đối tượng đó thì chúng ta có các thao tác thông thường như sau:
- Gán giá trị cho thuộc tính
- Lấy giá trị cho thuộc tính
- Gọi phương thức
Gán giá trị cho thuộc tính
Để gán giá trị cho thuộc tính, chúng ta chỉ việc thực hiện sử dụng toán tử = giống như cách gán giá trị cho biến.
Comment.title = "Tiêu đề Comment"
Nhưng nếu bạn gọi từ 1 hàm trong đối tượng thì bạn có thể sử dụng từ khóa this
var Comment = { title : "", addComment : function(){ this.title = "Tiêu đề bình luận"; } };
Lấy giá trị cho thuộc tính
Để lấy giá trị cho thuộc tính, chúng ta làm tương tự như thao tác với biến.
var title = Comment.title;
Nếu bạn gọi từ 1 hàm trong đối tượng thì bạn có thể sử dụng từ khóa this
var Comment = { title : "", addComment : function(){ var title = this.title; } };
Gọi phương thức
Chúng ta gọi phương thức tương tự như thuộc tính.
comment.addComment();
Gọi trong hàm của đối tượng.
var Comment = { title : "", addComment : function(){ this.validateComment(); }, validateComment : function(){ // do some thing } };
4, Đối tượng chứa đối tượng – Mảng chứa đối tượng
Mỗi đối tượng (object) trong JavaScript có thể chứa các đối tượng khác hoặc một mảng có thể chứa các đối tượng.
Đối tượng chứa đối tượng
- Gom các thuộc tính của Comment vào 1 đối tượng Info
var Comment = { info : { title : "", content : "", email : "", fullname : "" } };
- Gom các phương thức của Comment vào đối tượng func
var Comment = { func : { addComment : function(){ // Something }, validateComment : function(){ // Something } }, };
Như vậy ta có thể truy xuất tới các thuộc tính và phương thức đó :
Comment.info.title = "Comment tại nhatdesign.com";
Comment.func.addComment();
Mảng chứa đối tượng
Việc gán giá trị là một đối tượng vào mảng cũng tương tự như gán các giá trị bình thường khác.
// Đối tượng Comment var Comment = { title : "", content : "", email : "", fullname : "" }; // Khởi tạo mảng var Comments = []; // Gán giá trị cho phần tử mảng Comments[0] = Comment; // Gọi tới thuộc tính Comments[0].title = "Tiêu đề Comment"; alert(Comments[0].title);
// Khởi tạo mảng var Comment = [{ title : "", content : "", email : "", fullname : "" }]; // Sử dụng Comment[0].title = "Tiêu đề Comment"; alert(Comment[0].title);
5, Prototype trong JavaScript
Prototype trong JavaScript 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 đó và 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 phương thức xử lý riêng của đối tượng Number.
var age = new Number(24); //tạo đổi tượng number age.toString(); age.toFixed(); age.toPrecision(); age.valueOf(); // gọi các phương thức
Bổ sung dữ liệu vào đối tượng vậy làm sao để thêm thuộc tính và phương thức vào prototype của 1 đối tượng?
Object.prototype.thuoc_tinh = "giá trị mặc định"; Object.prototype.phuong_thuc = function() { // something };
Ở trên chúng ta đã khởi tạo đối tượng với từ khóa new Object và {}. Nhưng chúng ta không thể sử dụng từ khóa new để khởi tạo 1 đối tượng được, như vậy để tạo mới 1 đối tượng chúng ta có cú pháp:
function Comment(){ // thuộc tính this.title = ""; this.comment = ""; this.email = ""; this.fullname = ""; // phương thức this.showInfor = function(){ document.write( this.title ); document.write( this.comment ); document.write( this.email ); document.write( this.fullname ); }; }
sau khi tạo xong các thuộc tính và phương thức, chúng ta tạo mới 1 đối tượng và sử dụng thuộc tính và phương thức cho nó
// tạo mới đối tượng var comment = new Comment(); // gán thuộc tính comment.title = "Object trong JavaScript" comment.comment = "rất hay" comment.email = "email@email.com" comment.fullname = "do tuan minh" // gọi phương thức comment.showInfor();
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. Thông thường những bạn chỉ code ở mức độ đơn giản rất ít khi sử dụng prototype, 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.