Javascript – Objects

JavaScript là một ngôn ngữ lập trình hướng đối tượng (OOP). Một ngôn ngữ lập trình có thể được gọi là hướng đối tượng nếu nó cung cấp bốn khả năng cơ bản cho các nhà phát triển –

Đóng gói – khả năng lưu trữ thông tin liên quan, cho dù là dữ liệu hay phương thức, cùng nhau trong một đối tượng.

Tập hợp – khả năng lưu trữ một đối tượng bên trong một đối tượng khác.

Kế thừa – khả năng của một lớp dựa vào một lớp khác (hoặc một số lớp) cho một số thuộc tính và phương thức của nó.

Tính đa hình – khả năng viết một hàm hoặc phương thức hoạt động theo nhiều cách 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 chức năng, nó được coi là một phương thức của đối tượng, nếu không thì thuộc tính được coi là một thuộc tính.

Thuộc tính đối tượng

Các thuộc tính đối tượng có thể là bất kỳ kiểu dữ liệu nào trong ba kiểu dữ liệu nguyên thủy hoặc bất kỳ kiểu dữ liệu trừu tượng nào, chẳng hạn như một đối tượng khác. Các thuộc tính đối tượng thường là các biến được sử dụng nội bộ trong các phương thức của đối tượng, nhưng cũng có thể là các biến hiển thị trên toàn cầu được sử dụng trong toàn bộ trang.

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

objectName.objectProperty = propertyValue;

Ví dụ: Đoạn mã sau lấy tiêu đề tài liệu bằng cách sử dụng thuộc tính “title” của đối tượng tài liệu.

var str = document.title;

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

Các phương thức là các chức năng cho phép đối tượng làm điều gì đó hoặc để điều gì đó được thực hiện với nó. Có một sự khác biệt nhỏ giữa một hàm và một phương thức – tại một hàm là một đơn vị câu lệnh độc lập và một phương thức được gắn vào một đối tượng và có thể được tham chiếu bằng từ khóa this.

Các phương thức hữu ích cho mọi thứ, từ hiển thị nội dung của đối tượng ra màn hình đến 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ố cục bộ.

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

document.write("This is test");

Đối tượng do người dùng định nghĩa

Tất cả các đối tượng do người dùng định nghĩa và các đối tượng dựng sẵn đều là hậu duệ của một đối tượng được gọi là Đối tượng.

Toán tử new

Toán tử new được sử dụng để tạo một thể hiện của 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 khởi tạo.

Trong ví dụ sau, các phương thức khởi tạo là Object(), Array() và Date(). Các hàm tạo này là các hàm JavaScript tích hợp sẵn.

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

Object() Constructor

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

Biến chứa tham chiếu đến đối tượng mới. Các thuộc tính được gán cho đối tượng không phải là biến và không được xác định bằng từ khóa var.
Ví dụ 1

Hãy thử ví dụ sau; nó trình bày cách tạo một Đối tượng.

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

Output

Book name is : Perl 
Book author is : Mohtashim

Ví dụ 2

Ví dụ này trình bày cách tạo đối tượng bằng Hàm do người dùng xác định. Ở đây, từ khóa này được sử dụng để chỉ đối tượng đã được truyền cho 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>

Output

Book title is : Perl 
Book author is : Mohtashim

Tạo phương thức cho một đối tượng

Các ví dụ trước minh họa cách hàm tạo 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 cách gán các phương thức cho nó.
Ví dụ

Hãy thử ví dụ sau; nó chỉ ra cách thêm một chức năng 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>

Output

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ư một loại tốc ký để tham chiếu các thuộc tính hoặc phương thức của một đối tượng.

Đối tượng được chỉ định làm đối số với with trở thành đối tượng mặc định trong khoảng thời gian của khối tiếp theo. 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 cho đối tượng.
cú pháp

Cú pháp của đối tượng with như sau –

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

Ví dụ

Hãy 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>

Output

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