THÔNG DỤNG
OOP
ES6
ES(X)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Ba cách tạo class trong Javascript

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.

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

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.

Cùng chuyên mục:

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

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

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

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 nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top