Home Tutorial Javascript Javascript – Bài 12: Đối tượng (object)

Javascript – Bài 12: Đối tượng (object)

19 min read
0
193

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;

Các phương thức (hàm) của đố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 tích hợp sẵn đều là hậu duệ của một đối tượng được gọi là Đối tượng .

Từ khóa new

Từ khóa 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,  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");

Trình tạo đối tượng ()

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>

Kết quả

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>

Kết quả

Book title is : Perl 
Book author is : Mohtashim

Xác định 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>

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ư 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>
</html>

Kết quả

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100
Load More Related Articles
Load More By quangvu
  • Javascript – Bài 11: Cookie

    Cookie là gì? Trình duyệt web và Máy chủ sử dụng giao thức HTTP để giao tiếp và HTTP là gi…
  • Javascript – Bài 11: Sự kiện(Event)

    Sự kiện là gì? Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện, chúng x…
  • Javascript – Bài 10: hàm(function)

    Function là một nhóm mã có thể tái sử dụng có thể được gọi ở bất kỳ đâu trong chương trình…
Load More In Javascript

Check Also

Tự làm web chatGPT đơn giản cho phép dùng nhiều OpenAI key

Trong thời đại công nghệ phát triển như hiện nay, chatbot đang dần trở thành một giải pháp…