JavaScript và lập trình hướng đối tượng [1]

Tại sao lại là JavaScript?

Nếu như theo dõi các xu hướng phát triển ứng dụng nói chung cũng như các nền tảng phát triển ứng dụng có giao diện người dùng nói riêng hẳn các bạn cũng có thể nhận ra một xu thế khá nổi bật và gần như sẽ hội tụ về một mối:

🙂

Tại sạo lại là OOP?

OOP là cách thức lập trình rất tự nhiên, nếu tiếp cận theo OOP chương trình của bạn có khả năng tái sử dụng cũng như bảo trì dễ dàng hơn trong quá trình phát triển.

Tại sao lại là OOP và JavaScript?

Chúng ta thường nghe nói JavaScript là một ngôn ngữ không mạnh về hướng đối tượng.  Nhưng thực tế, JavaScript là ngôn ngữ tuyệt vời để viết các ứng dụng theo phong cách hướng đối tượng. Thông qua cơ chế nguyên mẫu (prototype) JavaScript có thể đem lại những đặc tính cơ bản của lập trình hướng đối tượng (như tính kế thừa, tính đa hình, tính bao gói, tính trừu tượng), tuy không thực sự đầy đủ. Cách lập trình hướng đối tượng trên JavaScript khác với các ngôn ngữ lập trình khác như C#,Java… bởi JavaScript là một ngôn ngữ kịch bản được thực thi bởi các trình thông dịch. Với tất cả các lý do đó chuỗi bài viết về OOP và JavaScript sẽ giúp người đọc, những người mong muốn có thể viết được các ứng dụng hữu ích dựa trên ngôn ngữ này, có một cách nhìn tổng quan, căn bản về lập trình hướng đối tượng với JavaScript. Chuỗi bài viết này sẽ không phải là một bài trình bày chi tiết về JavaScript, bởi điều đó đã có rất nhiều cuốn sách hay về JavaScript mà các bạn có thể tham khảo và tìm đọc. Hầu hết những gì đề cập trong bài viết này đều dựa trên kinh nghiệm của cá nhân cũng như những kinh nghiệm mà tôi đã thu lượm được từ nhiều nguồn, vậy nên không có gì ngạc nhiên nếu các bạn thấy nó không có gì là mới mẻ, tuy nhiên, hi vọng không phải là toàn bộ bài viết này :). Một sự so sánh khập khiễng nhưng thực tế là JavaScript thật sự có thể làm được nhiều điều mà ngay cả các ngôn ngữ như C# hay Java không thể làm. Nếu bạn không tin, hãy bắt đầu với một cuốn sách về JS trên tay hoặc đơn giản chỉ cần theo dõi hết tài liệu này!:D.

JavaScript và lập trình hường đối tượng – Phần 1 JavaScript không phải là Java! Đúng vậy! Nhưng các bạn có thể hỏi: Tại sao cả hai đều có chữ Java? Thật dễ hình dung điều này nếu chúng ta quan sát các nhãn hiệu, các sản phẩm trên thị trường ví dụ như Windows, Lindows, hay Bindows… Cái tên JavaScript đã được đổi tên từ LiveScript vào phút chót bởi phòng marketing của hãng Netscape. Trái ngược với nhận thức của mọi người, JavaScript không phải là ngôn ngữ theo dòng C/C++, nhưng thật không may cho nó vì ra đời sau Java và có tên gần giống cũng như một số cú pháp có kiểu tương tự Java nên khó tránh sự hiểu lầm. Dưới đây là một số đặc điểm về JavaScript mà phần nào sẽ giúp bạn có thể hiểu hơn về JavaScript cũng như hiểu đúng về nó:

– Code của JS được phiên dịch động (thông dịch): điều này có nghĩa là tại thời điểm chạy, code được lưu dưới dạng text và dịch thẳng sang các chỉ thị máy khi chương chình thực thi, không giống như các ngôn ngữ khác như C hay Java là code phải được biên dịch trước khi chạy.

– Các hàm (function) trong JavaScript là lớp đối tượng đầu tiên: Các hàm trong JavaScript có thể gắn thêm vào các đối tượng như là các phương thức của đối tượng đó, tuy nhiên chúng có thể được gọi trong một ngữ cảnh khác hoặc có thể gắn vào cho một đối tượng khác trong thời điểm chạy thật. Khác với các ngôn ngữ khác như Java chẳng hạn, các phương thức của mỗi đối tượng đều chỉ được gọi bởi đối tượng thuộc lớp và chỉ thuộc về đối tượng đó.

– Đối tượng trong JavaScript là prototype-base: Điều này nghĩa là bất cứ một đối tượng nào trong JavaScript được mô tả như là một đối tượng, cái thực ra là các mảng kết hợp dưới vỏ bọc như là các object. Sử dụng các prototype có thể giả lập các đối tượng tương tự như các đối tượng trong Java nhưng đó thực sự chỉ là bề ngoài mà thôi. Có thể những điều nêu trên đây xem ra có vẻ khó hiểu, do vậy nếu không hiểu các bạn có thể xem nó như là đọc cho biết vậy!. Tuy nhiên trong các phần sau của bài viết, các bạn sẽ được hiểu rõ hơn qua các minh họa cụ thể. Còn bây giờ, chúng ta sẽ đi ngay vào chủ đề chính: JavaScript và lập trình hướng đối tượng (OOP).

Tạo một Object trong JavaScript.

1- Tại sao lại phải là Object? Như các bạn đã biết, lập trình với các object thực sự tiện lợi, thứ nhất chúng có thể tương tác như các đối tượng trong thực tế, tiếp đến là khả năng tái sử dụng và bảo trì code dễ dàng hơn rất nhiều so với cách lập trình chỉ sử dụng các hàm (tất nhiên là chúng ta có thể sử dụng kết hợp cả hai phương pháp bởi hầu hết các đoạn mã viết bằng JavaScript thường không quá lớn). Một đặc điểm đặc trưng khi làm việc với các object là chúng ta làm việc với các thuộc tính và các phương thức của chúng. Có thể hiểu một cách đơn giản:

Đối tượng (Object) = Dữ liệu (Data) + Hành động (Action)

Ví dụ nếu như chúng ta có một đối tượng là quả táo chẳng hạn thì thuộc tính có thể là màu sắc, giống táo, kích thước, và phương thức của quả táo có thể là “chín” và “rụng”. Khi chín thuộc tính màu sắc và khối lượng có thể bị thay đổi, cũng như khi rụng quả táo có thể bị phân hủy. Như vậy việc lập trình với các đối tượng sẽ trở nên thật sự thú vị, giống như    công việc mà chúa trời đã tạo ra mọi vật trên thế giới này vậy! Sau đây chúng ta sẽ cùng nhau tìm hiểu một số cách mà JavaScript giúp chúa tạo ra thế giới 😀

Tạo object sử dụng đối tượng được định nghĩa sẵn: Object

Trong JavaScript có rất nhiều các đối tượng được định nghĩa trước trong nó như String object, Array object, Function object, Object object .v.v… Tuy nhiên JavaScript không cung cấp cho chúng ta một quy tắc chuẩn để tự tạo một object như các ngôn ngữ hướng đối tượng khác, vì vậy việc tạo ra các object cho riêng mình sẽ dựa trên các object cơ bản đó. Và vì lí do này mà các bạn sẽ thấy có khá nhiều cách để khai báo một object trong JavaScript. Sau đây, chúng ta sẽ xây dựng một đối tượng dựa trên đối tượng có sẵn Object. Với câu lệnh new bạn sẽ tạo ra được một đối tượng theo cách đơn giản nhất:

<script type=”text/javascript” language=”javascript”>
<![CDATA[

[sourcecode language=”javascript”]
//Tạo object Quả táo của Newton
apple = new Object();

//Khai báo thuộc tính cho object
apple.color = "green";
apple.mass = "90g";

//Khai báo các phương thức cho object
apple.ripe = function() {
this.color=’red’;
this.status=’This apple has ripen’;
}

apple.fall=function(){
this.status=’Fall on Newton’s nose’
}

//Test object
alert(apple.color);
apple.ripe();
alert(apple.status);
apple.fall();
alert(apple.status);
[/sourcecode]

// ]]

</script>

Như các bạn thấy trong ví dụ trên, ta vừa tạo ra một đối tượng sử dụng new Object(). Nếu để ý các bạn sẽ thấy với cách này, các thuộc tính cũng như phương thức của đối tượng được tạo ra bất cứ khi nào ta muốn với các giá trị được gán trước. Nhưng cũng với cách này các bạn sẽ nhanh chóng nhận ra rằng các đối tượng gần như không thể kiểm soát khi số lượng thuộc tính và phương thức tăng lên. Vì vậy, JavaScript đã cung cấp thêm một phương pháp cài đặt đối tượng tiện lợi hơn mà chúng ta sẽ tìm hiểu sau đây.

Tạo đối tượng sử dụng JavaScript Object Notation (JSON):

JSON là một nét đặc trưng của ngôn ngữ này. Nó cung cấp cho lập trình viên một khả năng tạo các mảng cũng như phác thảo ra các đối tượng một cách đơn giản và ngắn gọn. Để hiểu được JSON, trước hết ta tìm hiểu xem cách thức mà mảng trong JavaScript hoạt động. JavaScript cung cấp cho chúng ta một đối tượng Array. Cách cài đặt một mảng mới khá đơn giản, ví dụ:

[sourcecode language=”javascript”]
myArray = new Array();
myLibrary.books = new Array();
[/sourcecode]

Khá giống với các ngôn ngữ như Java hay C, JavaScript cho phép khai báo trước số phần tử của mảng cũng như gán một giá trị cho một phần tử của mảng:

[sourcecode language=”javascript”]
family=new Array(4);
family[0] = "Tom";
[/sourcecode]

hoặc thậm trí ta có thể kết hợp với một giá trị khóa như sau:

[sourcecode language=”javascript”]
family["father"]="Tom";
[/sourcecode]

Tất nhiên bạn có thể gán bất cứ giá trị nào cho mảng thậm trí là một object, bởi JavaScript là một ngôn ngữ có kiểu lỏng lẻo. Cách khởi tạo giá trị mảng như trên có vẻ nhanh gọn, nhưng nếu như mảng của chúng ta khá lớn và phức tạp thì việc khai báo như vậy sẽ rất tẻ nhạt. Một cách khác để để khởi tạo các giá trị ban đầu cho mảng là sử dụng cặp ngoặc vuông [ ]:

[sourcecode language=”javascript”]
family=["Tom","Jery","Jack","Timy"];
[/sourcecode]

Hoặc nếu dùng cặp đấu { } kết hợp với giá trị khóa như sau:

[sourcecode language=”javascript”]
family={ farther: "Tom",
mother: "Jery",
first_son: "Jack",
second_son: "Timy"
};
[/sourcecode]

Đây chính là cách mô tả đối tượng kiểu JSON. Nếu muốn sử dụng dấu cách trống cho các khóa ta có thể dùng cặp dấu “” ví dụ:

[sourcecode language=”javascript”]
"first son": "Jack",
[/sourcecode]

Chúng ta cũng có thể lồng các JSON vào nhau để khai báo các đối tượng phức tạp hơn, ví dụ:

[sourcecode language=”javascript”]
var rectangle={
topleft:{ x:1, y:2 },
width: 5,
height: 10
};
//Khi đó
alert(rectangle.topleft.x); // sẽ đưa ra giá trị 1
——————-

Để thêm vào một phương thức cho đối tượng khai báo theo kiểu JSON ta làm khá đơn giản như sau:

[sourcecode language="javascript"]
var rectangle={ //Thuộc tính
topleft:{ x:1, y:2 },
width: 5,
height: 10,
//Phương thức
area:function()
{
return this.width*this.height;
}
};
//Khi đó
alert(rectangle.topleft.x); // sẽ đưa ra giá trị 1
alert(rectangle.area()); // sẽ đưa ra giá trị 50
[/sourcecode]

Trong ví dụ trên, ta sử dụng từ khóa this để truy cập vào các thuộc tính vừa khai báo của bản thân đối tượng. Đây là một từ khóa đặc biệt và khá mạnh, ta sẽ có dịp đề cập đến nó nhiều hơn trong các phần sau. Như vậy, bây giờ các bạn có thể sử dụng đối tượng Object hoặc JSON để khai báo một đối tượng trong JavaScript hoặc thậm trí sử dụng kết hợp cả hai phương pháp trên. Tuy nhiên, nếu bạn thường xuyên phải sử dụng, cũng như tạo mới rất nhiều đối tượng trong chương trình thì cả hai phương pháp trên tỏ ra kém hiệu quả, bởi lẽ với mỗi lần các thuộc tính thay đổi bạn lại phải thực hiện các khai báo khá phức tạp do vậy tính tái sử dụng của code không được đảm bảo. Thật may mắn, JavaScript cung cấp một cách thức khác hiệu quả hơn rất nhiều để đáp ứng nhu cầu đó của những lập trình viên, cái mà chúng ta sẽ xem xét trong phần tiếp theo đây và cũng như phần còn lại của bài viết này.

1 – 2 – 3

(Còn nữa)

Tài nguyên: [link] http://www.w3schools.com/js/

[eBook] Head First JavaScript by Michael Morrison

[eBook] JavaScript Bible by Danny Goodman