Đối tượng / object trong javascript

Bài 47: Cách dùng đối tượng screen trong Javascript

Trong bài này chúng ta sẽ tìm hiểu object trong javascript, qua đó sẽ giúp bạn hiểu được khái niệm đối tượng object là gì? Cách khởi tạo và các thêm thuộc tính / phương thức vào đối tượng.

Kể từ phiên bản ES6 - 2015 thì đã xuất hiện khái niệm lập trình hướng đối tượng trong javascript, bởi ta có thể tạo class, thêm phương thức và thuộc tính cho class, thậm chi là có thể tạo class kế thừa từ class khác. Tuy nhiên, vì các bạn đang học căn bản nên chúng ta hãy thảo luận về object javascript một cách đơn giản nhất nhé.

1. Đối tượng / object trong javascript là gì ?

Trong Javascript, object là một khái niệm trừu tượng, được dùng thể hiện cho các đối tượng mà qua đó ta có thể thêm các thuộc tính và phương thức cho đối tượng đó.

Chúng ta có sẵn một số đối tượng như Date, Number. Ngoài những đối tượng này thì lập trình viên có thể tự tạo một đối tượng theo ý của mình.

Ví dụ, mình đang xây dựng tính năng bình luận thì sẽ tạo một đối tượng Comment, đối tượng này sẽ có những thuộc tính và phương thức chuyên xử lý các bình luận trên website.

Cú pháp khởi tạo đối tượng như sau:

Cách 1: Sử dụng từ khóa new Object()

var Comment = new Object();

Cách 2: Sử dụng từ khóa {}

	
var Comment = {};

Khi chúng ta khai báo một object thì tức là chúng ta đang tạo một instance của đối tượng Object, tức là đối tượng Object bản thân nó là một constructor. Vì vậy, ta không thể sử dụng từ khóa new để tạo ra một instance từ một instance được.

var Comment = {};
 
// Sai, vì Comment là một instance và
// không phải là constructor
var comment = new Comment()

Để hiểu rõ hơn thì bạn nên tìm hiểu constructor và prototype nhé.

2. Thuộc tính / phương thức của object trong javasript

Mỗi đối tượ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
• email

Lúc này ta có thể khai báo bằng ba cách.

Cách 1: 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 = '';

Cách 2: 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 : ""
};

Cách 3: 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 = '';

Trong ba cách trên thì mình khuyến khích các bạn nên sử dụng cách thứ hai bởi vì nó mạch lạc và dễ quản lý code hơn.

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()

Lúc này ta sẽ có ba cách khai báo tương tự như cách khai báo thuộc tính.

Cách 1: 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
};

Cách 2: Sử dụng từ khóa {} và thêm phương thức ngay lúc khai báo

// Khởi tạo
var Comment = {
    addComment : function(){
        // do some thing
    },
    validateComment : function(){
        // do some thing
    }
};

Cách 3: Sử dụng từ khóa {} và thêm phương thức 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
};

Và mình cũng khuyến khích các bạn nên sử dụng cách 2.

Xem danh sách phương thức và thuộc tính

Cách nhanh nhất để xem và debug đối tượng thì bạn nên sử dụng Firebug. Ví dụ đối tượng Comment trên thì khi sử dụng Firebug kết hợp hàm console.log() thì sẽ có kết quả như hình sau:

3. Thao tác với thuộc tính và phương thức của object trong js

Sau khi tạo xong đối tượng thì ta có hai cách sử dụng căn bản, đó là gọi và gán dữ liệu cho thuộc tính và phương thức. Nhưng nếu xem xét mọi khía cạnh 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ị của 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 bằng cách sử dụng toán tử = giống như cách gán giá trị cho biến.

Comment.title = "Tiêu đề bình luận";

Nhưng nếu bạn gọi từ một 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ị của thuộc tính

Để lấy giá trị thuộc tính thì ta làm tương tự như thao tác với biến.

var title = Comment.title;

Nếu gọi từ một 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;
    }
};

Xóa thuộc tính

Nếu bạn muốn xóa thuộc tính nào đó thì sử dụng từ khóa delete.

var Comment = {
    title : "",
    addComment : function(){
        var title = this.title;
    }
};
 
// Xóa thuộc tính title, lúc này Comment chỉ còn 1 phương thức addComment
delete Comment.title;

Gọi phương thức

Tương tự như thuộc tính chúng ta gọi bình thường.

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. Mảng chứ

4. Mảng chứa object - object chứa object

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ũng có thể chứa các đối tượng.

object chứa object

Ví dụ 1: Gom các thuộc tính của Comment vào một đối tượng Info.

var Comment = {
    info : {
        title : "",
        content : "",
        email : "",
        fullname : ""
    }
};

Ví dụ 2: Gom các phương thức (hàm) của Comment vào đối tượng func.

var Comment = {
    func : {
        addComment : function(){
            // Something
        },
        validateComment : function(){
            // Something
        }
    },
};

Lúc này để truy xuất tới các thuộc tính và phương thức này ta chỉ việc sử dụng dấu chấm và bổ sung thêm một cấp nữa.

Comment.info.title = "Comment tại Sinitc.com";
Comment.func.addComment();

Mảng chứa object

Để 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 (xem mảng trong Javascript).

  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 đề bình luận";
  alert(Comments[0].title);

Hoặc

// Khởi tạo mảng
var Comment = [{
    title   : "",
    content : "",
    email   : "",
    fullname : "" 
}];
 
// Sử dụng
Comment[0].title = "Tiêu đề bình luận";
alert(Comment[0].title);

6. Lặp qua từng phần tử của object trong js

Muốn lặp qua từng phần tử của object thì ta sử dụng vòng lặp for .. in.

for (key in object) {
  // key chính là phần tử trong quá trình lặp
}

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};
 
for (let key in user) {
    console.log(`Key ${key} có giá trị là ${user[key]}`);
}

Kết quả:

Lời kết

Nói về đối tượng trong Javascript thì rất là nhiều nên mình không thể trình bày trong một bài được, vì vậy bài này mình xin dừng ở đây và ở các bài tiếp theo chúng ta sẽ thực hàm các ví dụ liên quan đến đối tượng tìm hiểu mối liên hệ giữa đối tượng và JSON trong Javascript.

Trong các phần trên thì ở phần 5 là hơi khó hiểu nhất vì nó liên quan tới mảng và có cấu trúc rườm rà. Nhưng bạn đừng lo lắng bởi vì các bài tiếp theo mình sẽ đề cập tới nó cũng khá nhiều.

Bài 49: Thao tác với đối tượng (Object) trong Javascript