OOP Structure dành cho JavaScript (ES5 trở xuống)

OOP Structure dành cho JavaScript (ES5 trở xuống)

Hi các bạn,

Nay mình sẽ share cho các bạn 1 cách viết OOP tại JS khá là đơn giản và dễ hiểu.

Với lợi ích của OOP đem lại thì ta biết rồi nhỉ. Với ES6 thì đã hỗ trợ class, nhưng với ES5 trở xuống ta sẽ viết theo kiểu khác (kiểu mà mình sẽ hướng dẫn ngay sau đây)

1/ OOP Structure

Chúng ta sẽ follow theo structure như sau:

var UserAction = function()
{
	var ins = {};
	
	// public properties
	ins.user_number = "100";
	
	// private properties
	var user_id = 1;
	var user_name = "ABC XYZ";
	var obj = {
		a: "a"
	};
	
	// private method
	function update()
	{
		
	}
	
	var deleteRecord = function()
	{
		
	}
	
	// public method
	ins.getUserName = function()
	{
		// access private properties
		return user_name;
	}
	
	ins.updateUser = function()
	{
		// access private method
		update();
		
		// access public method
		return ins.getUserName();
	}
	
	return ins;
}();

Với mẫu trên, bạn sẽ thấy rõ ta đã có 1 cấu trúc tương tự như OOP của các ngôn ngữ khác, có điều nó sẽ ko có protected. Nhưng mà vậy là đủ dùng rồi nhỉ? 😀

2/ Extends – Kế thừa

Để kế thừa ví dụ 1 class như bên dưới:

var BaseAction = function()
{
	var ins = {};
	
	// do something
	
	return ins;
}

Lưu ý class parent để kế thừa ta không nên run luôn (kèm ()) ở cuối.

Và để kế thừa, đơn giản là:

var UserAction = function()
{
	var ins = BaseAction();
...
}();

Và từ đó, ta có thể access toàn bộ public methods/properties của class cha tại biến ins.

3/ Kết luận – OOP Structure dành cho JavaScript

Rất đơn giản phải không nào các bạn? 😀

Đây là 1 step nhỏ để ta có thể improve dc code JS một chút

Cám ơn các bạn đã quan tâm theo dõi nhé!!