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

Một phần của tài liệu JS advanced (Trang 79 - 84)

Trong JavaScript có rất nhiều các đối tượng được định nghĩa 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ự xây dựng 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ệnhnew bạn sẽ tạo ra được một đối tượng theo cách đơn giản nhất:

1. //Tạo object Quả táo của Newton

2. apple = new Object(); 3.

4. //Khai báo thuộc tính cho object

5. apple.color = "green"; 6. apple.mass = "90g"; 7.

8. //Khai báo các phương thức cho object

9. apple.ripe = function(){

10. this.color='red';

11. this.status='This apple has ripen'; 12. }

13. apple.fall=function(){

14. this.status='Fall on Newton's nose' 15. } 16. 17. //Test object 18. alert(apple.color); 19. apple.ripe(); 20. alert(apple.status); 21. apple.fall(); 22. 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ụ:

1. myArray = new Array(); 2.

3. 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:

1. family=new Array(4); 2.

3. 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: 1. 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 [ ]:

1. 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: 1. family={

2.

3. farther: "Tom", 4.

5. mother: "Jery", 6. 7. first_son: "Jack", 8. 9. second_son: "Timy" 10. 11. };

Đây chính là cách mô tả đối tượng kiểu JSON. (adsbygoogle = window.adsbygoogle || []).push({});

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ụ: 1. "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ụ: 1. <font face="Courier New, monospace"><font size="2">var

2. rectangle={</font></font>

3. </p><p><font face="Courier New, monospace"><font size="2"><span> topleft:</span></font></font><font face="Courier New, monospace"><font size="2"><b>{

4. x:1, y:2}</b></font></font><font face="Courier New, monospace"><font size="2"><span>,</span></font></font></p>

5. <p><font face="Courier New, monospace"><font size="2"> width: 6. 5,</font></font></p>

7. <p><font face="Courier New, monospace"><font size="2"> height: 8. 10</font></font></p>

9. <p><font face="Courier New, monospace"><font size="2"> };</font></font></p> 10. <p><font face="Courier New, monospace"><font size="2"> //Khi

11. đó</font></font></p>

12. <p><font face="Courier New, monospace"><font size="2"> alert(rectangle.topleft.x); 13. // sẽ đưa ra giá trị 1</font></font></p><p class="javascript">

Để 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: 1. var rectangle={

2.

4. 5. topleft:{ x:1, y:2}, 6. 7. width: 5, 8. 9. height: 10, 10. 11. //Phương thức 12. 13. area:function() 14. 15. { 16.

17. returnthis.width*this.height; 18. 19. } 20. 21. }; 22. 23. //Khi đó 24.

25. alert(rectangle.topleft.x); // sẽ đưa ra giá trị 1 26.

27. 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.

Một phần của tài liệu JS advanced (Trang 79 - 84)