Bài viết này tôi viết với mục đích hoàn toàn đơn giản là để tập hợp các kiến thức về JS đặc biệt là các cách thức lập trình JS tiếp cận OOP, thật ra là để chuẩn bị chủ yếu cho phần giao diện của ứng dụng web với công nghệ hiện đang khá nổi hiện nay là Ajax. Trong thực tế, việc lập trình web trên một số nền tảng bạn có thể không phải sử dụng nhiều đến JS, vậy nên mục đích chúng ta tìm hiểu về JS không ngoài việc hiểu và nắm bắt được cách thức tạo và xây dựng nên các framework hoặc các thư viện lập trình web.

    Do vậy, bài viết này sẽ không phải là một bài trình bày chi tiết về JS, bởi điều đó đã có rất nhiều cuốn sách hay về JS mà các bạn có thể 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 :).

    Thực tế là JavaScript thật sự có thể làm được nhiều điều. 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 đọc hết bài viết này !!:D.

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 thực, 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 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 đó 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 kiểu 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 vui 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 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, vì vậy 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:D

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

    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:

//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);

    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.

3 – 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ụ:

    myArray = new Array();

    myLibrary.books = new Array();

    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:

    family=new Array(4);

    family[0] = "Tom";

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

    family["father"]="Tom";

    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 khá 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 [ ]:

    family=["Tom","Jery","Jack","Timy"];

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

    family={

        farther: "Tom",

        mother: "Jery",

        first_son: "Jack",

        second_son: "Timy"

    };

    Đâ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ụ:

    "first son": "Jack",

    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ụ:

        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:

        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

    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.