Đối tượng trong JavaScript

Lê Quyên

JavaScript là một Ngôn ngữ chương trình hướng đối tượng (Object Oriented Programming). Một Ngôn ngữ chương trình có thể được gọi là hướng đối tượng nếu nó cung cấp 4 khả năng cơ bản tới nhà lập trình:

Encapsulation − Khả năng lưu giữ thông tin liên quan, là dữ liệu hoặc các phương thức, cùng với nhau trong một đối tượng.
Aggregation − Khả năng lưu giữ một đối tượng bên trong một đối tượng khác.
Inheritance − Khả năng của một lớp dựa trên lớp khác (hoặc một số lớp) đối với một số thuộc tính và phương thức của nó.
Polymorphism − Khả năng để viết một hàm hoặc phương thức mà làm việc trong nhiều cách đa dạng khác nhau.

Các đối tượng bao gồm các thuộc tính. Nếu một thuộc tính chứa một hàm, nó được cho là một phương thức của đối tượng, nếu không thì thuộc tính được xem là một thuộc tính.

Các thuộc tính của đối tượng

Các thuộc tính của đối tượng có thể là bất kỳ loại nào trong 3 kiểu dữ liệu gốc (primitive), hoặc trong các kiểu dữ liệu trừu tượng (abstract), ví dụ như đối tượng khác. Các thuộc tính đối tượng thường là các biến mà được sử dụng bên trong các phương thức của đối tượng, nhưng cũng có thể là các biến global có thể nhìn thấy mà được sử dụng xuyên suốt trang web.

Cú pháp để thêm một thuộc tính tới một đối tượng là:

objectName.objectProperty = propertyValue;

Ví dụ − Code sau nhận title tài liệu bởi sử dụng thuộc tính "title" của đối tượng Document:

var str = document.title;

Phương thức đối tượng

Các phương thức là các hàm mà chỉ dẫn đối tượng thực hiện việc gì đó hoặc chỉ dẫn việc gì đó được thực hiện tới nó. Có một sự khác nhau nhỏ giữa một hàm và một phương thức: ở một hàm là một đơn vị đứng độc lập của các lệnh và một phương thức được đính kèm tới một đối tượng và có thể được tham chiếu bởi từ khóa this.

Các phương thức là hữu dụng cho mọi thứ từ hiển thị nội dung của đối tượng trên màn hình tới thực hiện các phép toán phức tạp trên một nhóm các thuộc tính và tham số nội bộ.

Ví dụ − Sau đây là ví dụ đơn giản để chỉ cách sử dụng phương thức write() của đối tượng document để viết bất kỳ nội dung nào trên tài liệu.

document.write("This is test");

Các đối tượng người dùng tự định nghĩa

Tất cả đối tượng người dùng tự định nghĩa (User-defined Objects) và đối tượng có sẵn là đối tượng con của một đối tượng được gọi là Object.

Toán tử new

Toán tử new được sử dụng để tạo một đối tượng. Để tạo một đối tượng, toán tử new được theo sau bởi phương thức constructor.

Trong ví dụ sau, các phương thức constructor là Object(), Array(), và Date(). Những constructor này là các hàm có sẵn trong JavaScript.

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

Object() Constructor

Một constructor là một hàm mà tạo và khởi tạo một đối tượng. JavaScript cung cấp một hàm constructor đặc biệt là Object() để xây dựng một đối tượng. Giá trị trả về của Object() constructor được gán tới một biến.

Biến này chứa một tham chiếu tới đối tượng mới. Các thuộc tính được gán tới đối tượng không là các biến và không được định nghĩa với từ khóa var.

Ví dụ 1

Bạn thử ví dụ sau. Nó minh họa cách tạo một Object.

<html>
   <head>
      <title>User-defined objects</title>
      
      <script type="text/javascript">
         var book = new Object();   // Create the object
         book.subject = "Perl"; // Assign properties to the object
         book.author  = "Mohtashim";
      </script>
      
   </head>
   
   <body>
   
      <script type="text/javascript">
         document.write("Book name is : " + book.subject + "<br>");
         document.write("Book author is : " + book.author + "<br>");
      </script>
   
   </body>
</html>

Kết quả

Book name is : Perl 
Book author is : Mohtashim

Ví dụ 2

Ví dụ này minh họa cách tạo một đối tượng với một User-Defined Function (hàm người dùng tự định nghĩa). Ở đây, từ khóa this được sử dụng để tham chiếu tới đối tượng mà đã được truyền tới một hàm.

<html>
   <head>
   
   <title>User-defined objects</title>
   
      <script type="text/javascript">
         function book(title, author){
            this.title = title; 
            this.author  = author;
         }
      </script>
      
   </head>
   <body>
   
      <script type="text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>
      
   </body>
</html>

Kết quả

Book title is : Perl 
Book author is : Mohtashim

Định nghĩa phương thức cho một đối tượng

Ví dụ trước minh họa cách constructor tạo đối tượng và gán các thuộc tính. Nhưng chúng ta cần hoàn thành việc định nghĩa một đối tượng bằng việc gán các phương thức cho nó.

Ví dụ

Bạn thử ví dụ sau. Nó chỉ cách thêm một hàm cùng với một đối tượng.

<html>
   <head>
   <title>User-defined objects</title>
   
      <script type="text/javascript">
         // Define a function which will work as a method
         function addPrice(amount){
            this.price = amount; 
         }
         
         function book(title, author){
            this.title = title;
            this.author  = author;
            this.addPrice = addPrice; // Assign that method as property.
         }
      </script>
      
   </head>
   <body>
   
      <script type="text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
      
   </body>
</html>

Kết quả

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

Từ khóa 'with'

Từ khóa 'with' được sử dụng như là một loại tốc ký (shorthand) để tham chiếu các thuộc tính hoặc phương thức của đối tượng.

Đối tượng được xác định như là một tham số tới with trở thành đối tượng mặc định cho quãng thời gian (duration) của khối mà theo sau. Các thuộc tính và phương thức cho đối tượng có thể được sử dụng mà không cần đặt tên đối tượng đó.

Cú pháp

Cú pháp cho đối tượng with như sau:

with (object){
   properties used without the object name and dot
}

Ví dụ

Bạn thử ví dụ sau:

<html>
   <head>
   <title>User-defined objects</title>
   
      <script type="text/javascript">
         // Define a function which will work as a method
         function addPrice(amount){
            with(this){
               price = amount;
            }
         }
         
         function book(title, author){
            this.title = title;
            this.author  = author;
            this.price = 0;
            this.addPrice = addPrice; // Assign that method as property.
         }
      </script>
      
   </head>
   <body>
   
      <script type="text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
      
   </body>
</html>

Kết quả

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

Các đối tượng JavaScript có sẵn

JavaScript có một số đối tượng có sẵn (built-in hoặc native objects). Những đối tượng này là có thể truy cập từ bất cứ đâu trong chương trình của bạn và sẽ làm việc theo cách tương tự với bất kỳ đối tượng nào đang chạy trên bất kỳ Hệ điều hành nào.

Dưới đây là danh sách tất cả các JavaScript Native Objects:

Theo Tutorialspoint

Bài trước: In trang trong JavaScript

Bài tiếp: Đối tượng Number trong JavaScript

Thứ Ba, 31/07/2018 10:43

5 ★ 2 👨 1.702

#JavaScript