Javascript Object là gì mà khó hiểu thế? - Bài tập Javascript

Dạo này trên group facebook có rất nhiều bạn hỏi về Object trong Javascript, có bạn hỏi nó có ứng dụng gì trong thực tế không, có bạn thì lại bảo object qua khó để tìm hiểu. Ok mọi thứ rất đơn giản và giải đáp thông qua kiến thức về lập trình hướng đối tượng nhé, nên trước tiên hãy đọc bài đó để hiểu sơ lược. Thực tế đối tượng giúp chương trình nhìn sáng hơn, bạn sẽ không phải thấy một mớ hổn độn bên trong một chương trình được viết bằng Javascript.

1. Hiểu cơ bản Object là gom nhóm

Phần này sẽ gây ra nhiều tranh cãi bởi câu nói "object là gom nhóm" là hoàn toàn sai nhé các bạn, tuy nhiên vì muốn các bạn dễ tiếp thu thì mình xin phép được tự tin phát biểu câu đó.

Gom nhóm biến

Trước đây khi khai báo danh sách các biến thì ta làm như sau:

// Khai báo
var name = "Nguyễn Văn Cường";
var email = "TheHalfHeart@gmail.com";
var blog = "Zaidap.com.net";

// Sử dụng
console.log(name);
console.log(email);
console.log(blog);

Nhưng nếu sử dụng object thì ta sẽ gom nhóm lại và truy xuất các biến thông qua dấu chấm ..

// Khai báo
var profile = {
    name    : "Nguyễn Văn Cường",
    email   : "TheHalfHeart@gmail.com",
    blog    : "Zaidap.com.net"
};

// Sử dụng
console.log(profile.name);
console.log(profile.email);
console.log(profile.blog);

Gom nhóm hàm

Và dưới đây là cách khai báo nhiều hàm.

// Khai báo
function a(){
    
}

function b(){
    
}

// Sử dụng
a();
b();
     

Nhưng sử dụng object thì ta làm như sau:

var obj = {
    a : function(){
        
    },
    b : function(){
        
    }
};
// Sử dụng
obj.a();
obj.b();

Các bạn hãy so sánh hai chương trình để suy luận ra sự khác nhau nhé :)

2. Chương trình không sử dụng Object

Giả sử mình cần viết một chương trình quản lý học sinh, lúc này mình sẽ định nghĩa một số hàm như sau:

function addStudent(id, name){
    document.write("Thêm sinh viên " + name + " có ID là " + id);
}

function removeStudent(id){

    document.write("Xóa sinh viên có ID là " + id);
}

function editStudent(id, name)
{
    document.write("Sửa tên sinh viên có ID là " + id + " sang tên " + name);
}

Lúc này bạn sẽ sử dụng như sau:

// Thêm
addStudent("1", "Nguyễn Văn Cường");

// Sửa
editStudent("1", "Nguyễn Văn Cường - Zaidap.com.net");

// Xóa
removeStudent("1");

Nhìn có vẻ rất gọn phải không các bạn, tuy nhiên sẽ không chuyên nghiệp bằng chương trình dưới đây.

3. Chương trình có sử dụng Object

Nếu bạn để kỹ thì sẽ thấy tất cả các thao tác thêm, xóa, sửa đều tác động đến đối tượng sinh viên phải không nhỉ? Chính xác là như vậy, khi quan lý đối tượng sinh viên này chúng ta hay thực hiện các thao tác đó là thêm, xóa và sửa sinh viên, ba thao tác này chính là ba hàm mà mình đã định nghĩa ở trên. Mỗi sinh viên sẽ quản lý ID và tên của sinh viên đó, có nghĩa khi thực hiện ba thao tác đó ta phải truyền các thông tin vào ở dạng tham số của hàm..

Xét chương trình dưới đây:

var Student = {
 
    id : "",
    name : "",
 
    add : function(){
        document.write("Thêm sinh viên " + this.name + " có ID là " + this.id);
    },
    remove : function(){
        document.write("Xóa sinh viên có ID là " + this.id);
    },
    edit : function(){
        document.write("Sửa tên sinh viên có ID là " + this.id + " sang tên " + this.name);
    }
};
 

 
// Gán gái trị cho các thuộc tính
Student.name = "Nguyễn Văn Cường";
Student.id = "1";
 
// Thực hiện một số hành động
Student.add();
Student.edit();
Student.remove();

Cả hai chương trình đều có chức năng tương tự nhau, tuy nhiên nếu xét về code thì chương trình này dài hơn ở trên, nhưng xét về tính hiệu quả trong việc quản lý code thì chương trình trên không bằng.

4. Lời kết

Như vậy object chính là cách chúng ta sử dụng lập trình hướng đối tượng trong Javascript. Các bạn phải hiểu và sử dụng thành thạo Object bởi vì hầu hết cá JS Framework hiện nay đều sử dụng Object làm nền tảng.

Qua bài này mình chỉ muốn trình bày sơ lược qua về Object trong Javascript, và vì mình có trình bày nó ở trong series học Javascript căn bản rồi nên mình không muốn giải thích gì thêm, nếu bạn vẫn chưa hiểu thì hãy đến series đó để tìm hiểu nhé.