Road to LIFE

Lập trình hướng đối tượng trong javascript với Prototype.js framework

Javascript là một ngôn ngữ hướng đối tượng nhưng không thật hoàn chỉnh, nó không có các từ khóa như class hay private,..., không có overloading, thừa kế,... Javascript (mà đúng ra là ECMAScript) vẫn đang trong quá trình phát triển, phiên bản mới nhất của nó là Javascript 1.7, những điểm yếu đó có thể sẽ được khắc phục ở những phiên bản sau này. Nhưng mà, tại sao bạn lại phải chờ khi mà chỉ cần Prototype.js framework, bạn vẫn có thể dùng OOP với javascript một cách thoải mái như dưới đây.

Bạn có thể tải về Prototype version 1.5.0_rc1 ở đây: download Prototype

Tạo một lớp (class) mới

//khai báo lớp mới Point var Point = Class.create(); //định nghĩa các thuộc tính và phương thức Point.prototype = { __x__: 0, __y__: 0, initialize: function(x,y){ this.__x__ = x; this.__y__ = y; }, getPos: function(){ return this.__x__+"_"+this.__y__; } };
Đối tượng Class là một đối tượng được định nghĩa mới trong Prototype.js, nó chỉ có một phương thức create(); và phương thức này được dùng để tạo ra một class mới (mà thật ra là một function nhưng mang ý nghĩa hoàn toàn như một class) là Point. Sau đó, bạn thêm vào các thuộc tính và phương thức cho class bằng cách thêm chúng vào đối tượng prototype của đối tượng Point (chú ý Point thật ra là một function nên cũng là một đối tượng). Đồng thời cũng lưu ý rằng phương thức initialize() là bắt buộc phải có và nó đóng vai trò là phương thức khởi tạo (constructor) của class mới tạo.
Ví dụ trên tạo ra một class mới có tên là Point, nó có constructor nhận 2 giá trị là x, y; có một phương thức là getPos() trả về một chuỗi biểu thị tọa độ của điểm; và có 2 thuộc tính __x__, __y__ chứa tọa độ x, y của điểm cần biểu diễn (hai dấu gạch dưới là cách viết được quy ước để các lập trình viên khác biết 2 biến đó là private).
Cách sử dụng class này là hoàn toàn bình thường
var p = new Point(2,3); p.getPos(); //trả về chuỗi "2_3"

Thừa kế (Inheritance)

var ColorPoint = Class.create(); Object.extend(ColorPoint.prototype,Point.prototype); Object.extend(ColorPoint.prototype,{ __color__: null, initialize: function(x,y,color){ this.__x__ = x; this.__y__ = y; this.__color__ = color; }, getColor: function(){ return this.__color__; } });
extend(des,src) cũng là một phương thức mới được thêm vào đối tượng Object trong Prototype.js, nó chỉ đơn thuần nhận 2 đối tượng des (destination), src (source) và sao chép tất cả các phương thức + thuộc tính từ src vào des. Trong trường hợp này, phương thức này được sử dụng để tạo ra sự thừa kế giữa class ColorPoint với class Point như trên. Để thuận tiện và tạo sự tương đồng với các ngôn ngữ khác, bạn nên theo đúng như thứ tự trên, tạo class, xác định sự thừa kế và cuối cùng là thêm vào các thuộc tính và phương thức cần thiết khác. Chú ý là lúc này bạn không được dùng ColorPoint.prototype = {...}; như trên mà phải dùng Object.extend(ColorPoint.prototype,{...});. Tuy nhiên ở đây vẫn còn một số vấn đề mà mình vẫn chưa giải quyết được: phải viết lại toàn bộ constructor, không dùng được super; aColorPoint instanceof Point sẽ trả về false. À, còn một điều mà bạn có thể đã nhận ra là, với cách thừa kế như trên, Javascript có hỗ trợ đa thừa kế chứ không như Java (không cho phép đa thừa kế); một class con trong javascript có thể thừa kế nhiều class cha tùy thích.
Ví dụ trên tạo ra một class mới là ColorPoint thừa kế class Point, có constructor nhận các giá trị là tọa độ x, y và màu; có thêm một phương thức so với class Point là getColor() và thuộc tính private __color__
Sử dụng class ColorPoint:
var cp = new ColorPoint(2,3,"red"); p.getPos(); //trả về chuỗi "2_3" p.getColor(); //trả về "red"

Phương thức và thuộc tính tĩnh (Static method and property)

Phương thức tĩnh là phương thức được gọi trực tiếp thông qua tên lớp, trong Javascript, việc tạo một phương thức tĩnh là vô cùng đơn giản:
//tạo một đối tượng ColorPoint từ đối tượng Point ColorPoint.fromPoint = new function(aPoint){ return new ColorPoint(aPoint.__x__, aPoint.__y__, "no color"); } var p2 = new Point(2,3); var cp2 = ColorPoint.fromPoint(p2);
Nếu bạn muốn tạo một lớp chỉ chứa toàn các phương thức hay thuộc tính tĩnh tương tự như lớp java.lang.Math trong Java thì lại càng đơn giản hơn, không cần phải dùng phương thức Class.create(); nữa. Mọi việc chỉ đơn giản là tạo ra một đối tượng và gán đủ thứ lên nó:
var MyMath = { myPI: 3.14, radianToDegree: function(rad){ return rad/Math.PI*180; }, degreeToRadian: function(deg){ return deg/180*Math.PI; } }; MyMath.radianToDegree(MyMath.myPI*2);
Nếu bạn không muốn tạo một class mới, hãy thêm các phương thức của bạn vào class Math sẵn có, chỉ cần dùng phương thức Object.extend(); đã nói ở trên:
Object.extend(Math,{ radianToDegree: function(rad){ return rad/Math.PI*180; }, degreeToRadian: function(deg){ return deg/180*Math.PI; } });

StringBuilder class

Bạn đã học Java? Bạn đã biết lý do tại sao cần phải có class StringBuilder (trước đây là StringBuffer)? Cũng như trong Java, đối tượng thuộc lớp String trong Javascript là bất biến, một khi đã được tạo ra thì ta không thể thay đổi giá trị của nó nữa. Câu lệnh var aStr = "abc"+aVar+"edf"; với aVar = 123 khi thực thi sẽ tạo ra một đối tượng String chứa chuỗi "abc123" trước khi tạo ra một đối tượng khác (chiếm một vùng bộ nhớ khác) chứa chuỗi "abc123edf" rồi mới gán đối tượng sau vào biến aStr. Nếu chương trình của chúng ta có nhiều lệnh kiểu như vậy thì sẽ gây ra sự hao phí tài nguyên không cần thiết, ảnh hưởng hiệu quả chương trình. Biện pháp khắc phục cũng tương tự như trong Java, hãy sử dụng mảng. Mảng là một đối tượng đặc biệt, kích thước của nó thay đổi được, và sẽ được tự động cấp thêm bộ nhớ khi cần thiết. Class StringBuilder trong Java chứa chuỗi nhận được trong 1 mảng các ký tự (char), ta có thể thêm một số, một chuỗi,... vào đối tượng thuộc class StringBuilder bằng cách dùng phương thức append(); để sử dụng chuỗi ta dùng phương thức toString(). Class StringBuilder cũng chúng ta cũng tương tự như vậy, chứa dữ liệu trong một mảng và có 2 phương thức chính là append() và toString().
var StringBuilder = Class.create(); StringBuilder.prototype = { __strs__: null, initialize: function(str){ this.__strs__ = new Array(); if(str){ this.__strs__.push(str.toString()); } }, append: function(str){ this.__strs__.push(str.toString()); }, toString: function(){ return this.__strs__.join(""); } } // câu lệnh // var aStr = "abc" + aVar + "edf" // có thể được viết lại như sau var sb = new StringBuilder("abc"); sb.append(aVar); sb.append("edf"); var aStr = sb.toString();