Ba cách tạo class trong Javascript - Javascript nâng cao

Trước đây mình nói Javascript là ngôn ngữ không có hướng đối tượng nhưng cho tới bài này mới thấy sự sai lầm của câu nói đó. Javascript là một ngôn ngữ có hướng đối tượng rất linh hoạt về cú pháp, tuy nhiên đối tượng trong Javascript không thể hiện đầy đủ 4 tính chất quan trọng trong lập trình hướng đối tượng đó là tính kế thừa, tính đa hình, tính đóng gói và tính trừu tượng. À nói vui vậy thôi chứ một ngôn ngữ mà không có đầy đủ bốn tính chất kia thì làm sao mà xếp vào ngôn ngữ hướng đối tượng  được.

Lưu ý rằng trong Javascript không tồn tại class mà thay vào đó ta có thể sử dụng đối tượng hoặc function để thể hiện, và trong bài này mình sẽ hướng dẫn các bạn ba cách tạo class trong javascript khác nhau.

1. Sử dụng Function

Mỗi function trong Javascript sẽ tồn tại một biến cục bộ tên là this, biến này sẽ đại diện cho chính function đó. Lúc này bạn chỉ việc sử dụng biến this để khai báo các thuộc tính và phương thức của đối tượng, và cuối cùng là đừng quên return this để có thể sử dụng từ khóa new để khởi tạo mới một đối tượng nhé.

Ví dụ: Tạo hàm User như là một class.

XEM DEMO

function User()
{
    // Thuộc tính
    this.username = '';
    this.password = '';
    
    // Phương thức
    this.setInfo = function(username, password){
        this.username = username;
        this.password = password;
    };
    
    this.checkLogin = function(){
        return (this.username === 'admin' && this.password === '@123');
    };
    
    // Phải return this thì mới tạo mới được đối tượng
    return this;
}

Cách sử dụng:

// Cách sử dụng
var user = new User();
user.setInfo('admin', '@123');
if (user.checkLogin()){
    alert('Đăng nhập thành công');
}
else{
    alert('Đăng nhập thất bại');
}

Như ở ví dụ trên là mình thêm phương thức trực tiếp ngay trong hàm luôn, ngoài cách này ra thì bạn có thể sử dụng prototype để bổ sung phương thức cho đối tượng.

Ví dụ: Viết lại ví dụ trên bằng cách sử dụng prototype.

XEM DEMO

function User()
{
    // Thuộc tính
    this.username = '';
    this.password = '';
    
    // Phải return this thì mới tạo mới được đối tượng
    return this;
}

// Bổ sung phương thức
User.prototype.setInfo = function(username, password){
    this.username = username;
    this.password = password;
};

User.prototype.checkLogin = function(){
    return (this.username === 'admin' && this.password === '@123');
};

Cách sử dụng cũng không có gì khác:

// Cách sử dụng
var user = new User();
user.setInfo('admin', '@123');
if (user.checkLogin()){
    alert('Đăng nhập thành công');
}
else{
    alert('Đăng nhập thất bại');
}

2. Sử dụng Object

Với Object thì bạn dễ dàng khởi tạo các thuộc tính và phương thức, bạn có thể thêm ngay tại lúc khai báo đối tượng hoặc sau khi khởi tạo đều được.

Để khởi tạo đối tượng thì chúng ta có hai cách như sau:

var objectName = {};
// Hoặc
var objectName = new Object();

Ok bây giờ ta sẽ khởi tạo một đối tượng User và bổ sung thuộc tính + phương thức cho User.

Ví dụ: XEM DEMO

var User = {
    
    // Thuộc tính
    username : "",
    password : "",
    
    // Phương thức
    setInfo : function(username, password){
        this.username = username;
        this.password = password;
    },
    checkLogin : function(){
        return (this.username === 'admin' && this.password === '@123');
    }
    
};

Cách sử dụng:

// Cách sử dụng
User.setInfo('admin', '@123');
if (User.checkLogin()){
    alert('Đăng nhập thành công');
}
else{
    alert('Đăng nhập thất bại');
}

3. Sử dụng Singleton Object

Cách thứ ba này bạn có thể sử dụng một function để tạo một Singleton Object, nghĩa là bạn sử dụng từ khóa new để tạo mới một function.

Ví dụ:  XEM DEMO

var User = new function(){
    
     // Thuộc tính
    this.username = '';
    this.password = '';
    
    // Phương thức
    this.setInfo = function(username, password){
        this.username = username;
        this.password = password;
    };
    
    this.checkLogin = function(){
        return (this.username === 'admin' && this.password === '@123');
    };
    
};

Cách sử dụng:

// Cách sử dụng
User.setInfo('admin', '@123');
if (User.checkLogin()){
    alert('Đăng nhập thành công');
}
else{
    alert('Đăng nhập thất bại');
}

4. Lời kết

Nên sử dụng cách nào? Trong ba cách trên thì theo cá nhân mình thấy cách thứ nhất là hay nhất và thể hiện rõ đối tượng nhất bởi vì ta có thể khai báo một lần và tạo nhiều đối tượng khác nhau bằng từ khóa new. Còn hai cách còn lại thì mang tính toàn cục, nghĩa là bản chất nó chỉ là một đối tượng nên khi bạn thay đổi dữ liệu cho thuộc tính nó sẽ lưu lại cho các lần sử dụng tiếp theo.

Ok đây là bài mở đầu cho series học Javascript nâng cao nên rất hy vọng nhận được sự ủng hộ của các bạn.