Javascript Object là gì mà khó hiểu thế?

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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Lưu ý: Bài này mang tính chất giải trí nên không sử dụng định nghĩa đúng, có nghĩa là mình sử dụng ngôn từ bình thường để giải thích.

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:

Bài viết này được đăng tại [free tuts .net]

Code

// Khai báo
var name = "Nguyễn Văn Cường";
var email = "TheHalfHeart@gmail.com";
var blog = "freetuts.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 ..

Code

// Khai báo
var profile = {
    name    : "Nguyễn Văn Cường",
    email   : "TheHalfHeart@gmail.com",
    blog    : "freetuts.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.

Code

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

function b(){
    
}

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

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

Code

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:

Code

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:

Code

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

// Sửa
editStudent("1", "Nguyễn Văn Cường - Freetuts.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:

Code

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

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Javascript Object là gì mà khó hiểu thế?

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

Gom nhóm biến

Gom nhóm hàm

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

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

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Javascript Object là gì mà khó hiểu thế?

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

Gom nhóm biến

Gom nhóm hàm

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

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

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript