Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6

Lập trình hướng đối tượng với JavaScript

by
Length:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Final product image
What You'll Be Creating

Bạn có quen thuộc với cụm từ "spaghetti code"? Đây là một ví von có lẽ bạn nghe từ những người phát triển không chuyên về JavaScript khi phê bình về ngôn ngữ này. Đó là code không có cấu trúc trật tự. Nó sẽ gồm có các dòng code nối tiếp nhau thôi. Vài dòng có thể được đặt trong các hàm, một số khác thì hoàn toàn không như thế. Vá nếu bạn may mắn, tất cả 9000 dòng code sẽ nằm trong một file. Cấu trúc "spaghetti" này có thể là kết quả của procedural programming (lập trình thủ tục).

Trong procedural programming, hàm được dùng để thực hiện các nhiệm vụ. Chúng ta cần các hàm, nhưng cũng cần một thiết kế chúng ta có thể làm việc được. Và spaghetti thì hợp với bữa ăn tối, nhưng với code thì không. Thuốc giải chính là object-oriented programming - lập trình hướng đối tượng. Để hiểu về lâp trình hướng đối tượng, chúng ta sẽ thiết kế một chương trình, đĩnh nghĩa các class, và tạo ra object.

Thiết kế một chương trình

Hãy tưởng tượng bạn đã được giao nhiệm vụ để làm một ứng dụng cho một hiệu sách. Chỉ cho vui thôi, hãy gọi hiệu sách tên là Amazonia. Amazonia sẽ có nhiều cuốn sách. Có nhiều đánh giá nhận xét cho các cuốn sách. Và chúng ta muốn tìm cuốn sách bằng tên tác giả. Sẽ cóo nhiều tính năng chúng ta muốn triển khai cho ứng dụng của chúng ta, nhưng hiện giờ thế là đủ.

Lập trình hướng đối tượng tập trung vào việc tạo đối tượng. Vì thế làm thế nào chúng ta có thể chuyển những yêu cầu này thành đối tượng? Một kỹ thuật là tạo một danh sách của các danh từ từ mô tả của chúng ta và sau đó điều chỉnh lại danh sách thành những thứ có liên quan đến vấn đề. Chúng tôi đã đề cập những danh từ này trong vấn đề của chúng tôi:

  • Application - Ứng dụng
  • Bookstore - Hiệu sách
  • Books - Các cuốn sách
  • Reviews - Nhận xét
  • Author - Tác giả

Ứng dụng là danh từ không liên quan, ví thế có thể bỏ qua. Chúng ta cũng có thể loại hiệu sách bởi vì tương tự với ứng dụng. Nếu chúng cần phải làm vài thứ với nhiều hiệu sách, chúng ta cũng có thể giữ nó lại. Còn lại books, reviews, và authors. (authors đã được để ở dạng danh từ số nhiều, bởi vì chúng ta sẽ có nhiều author trong ứng dụng này.)

Giờ hãy xem chúng ta sẽ thiết kế mỗi class như thế nào. Class là một bản thiết kế để tạo ra object (đối tượng). Class của book sẽ cho ta một bản thiết kế để tạo ra các object book.

Nó tương tự với cách một kiến trúc sư sử dụng một bản thiết kế để xây dựng những ngôi nhà. Bản thiết kế sẽ thể hiện các phòng ngủ, phòng tắm, nhà bếp và phòng khách. Nhiều ngôi nhà có thể được dựng nên từ bản vẽ thiết kế. Tuy nhiên, chúng không giống nhau. Mỗi ngôi nhà có thể được thay đổi bằng cách đổi màu sơn, sàn nhà, hoặc các vật dùng, đại loại như thế.

Task - Nhiệm vụ

Viếc các class bạn sẽ dùng cho chương trình giỏ hàng mua sắm. Giò hàng nên có những chức năng sau:

  1. Chứa danh sách những món hàng
  2. Thêm và bỏ hàng ra khỏi giỏ hàng
  3. Tính tổng tiền cho giỏ hàng
  4. Lấy thông tin khách hàng
  5. Tạo hoá đơn mua hàng

Classes

Để thiết kế class của book, chúng ta cần xem xét class chịu trách nhiệm gì và có trách nhiềm làm gì. Với book, chúng ta cần biết title (tựa đề sách), author (tên tác giả) và ISBN (số hiệu quốc tế của sách). Đó là những thuộc tính dữ liệu.

Một vài điều mà class sẽ cần để có thể thực hiện là get (lấy dữ liệu) và set (xét giá trị) của title, get và set của author, và get và set của ISBN. Đó là những phương thức của class. Đây là kết quả class book của chúng ta trông giống thế này dựa theo yêu cầu:

Theo quy tắc, tên class được viết hoa chữ cái đầu. Constructor là một hàm đặc biệt để khai báo và khởi tạo các thuộc tính dữ liệu. bên trong của hàm constructor, các thuộc tính được thêm vào sử dụng từ khoá this. Tiếp theo, bất kỳ phương thức nào của class được liệt kê không cần có bất kỳ separator nào.

Phương thức bắt đầu với get được biết đến là phương thức accessor bởi vì nó trả về một giá trị. Phương thức bắt đầu với set gọi là phương thức mutator bởi vì nó lưu lại một giá trị hoặc thay đổi giá trị của một thuộc tính.

Đây là cách chung để định nghĩa một class:

Class cũng có thể được khai báo theo cú pháp này:

Class có thể có phương thức static (tĩnh). Một phương thức static là một thuộc tính của một class, không phải của object. Hãy nói rằng chúng ta tạo ra một phương thức static cho class book để sinh ra ids: đây là cú pháp:

Để gọi phương thức:

Một câu hỏi tự nhiên sẽ là khi nào và tại sao bạn sẽ dùng một phương thức static? Tôi không thể nói tôi có một lý do tốt để dùng các phương thức static. Nó tuỳ thuộc vào cách bạn thiết kế class của bạn. Một phương thức static có thể được dùng như một phương thức helper cho object của bạn, nhưng sau đó những hàm này có thể được lưu trong class của riêng chúng. Nếu bạn biết một tình huống thực tế tốt, thì hãy cho biết bạn nghĩ gì ở phần bình luận.

Cuối cùng, cho viêc tổ chức, bạn nên lưu một class thành một module. Module chỉ là một file chứa code của bạn. Để làm cho class của book thành một module, chúng ta thêm export vào trước nó.

để dùng class Book trong file khác, chúng ta import nó vào:

Chỗ mà { } chứa các giá trị, đó là nơi được export từ module, và from Book là tham chiếu đến file Book.js

Nhiệm vụ

Xác định một class cho Authors và Reviews.

Objects - Đối tượng

Bản thân class vô dụng với chúng ta trừ phi chúng ta làm gì đó với nó. Chúng tôi muốn tạo ra books, để làm điều đó, chúng ta phải khởi tạo class. Instantiate (khởi tạo) là một từ kỹ thuật để tạo ra các object mới. Chúng ta gọi object được tạo ra từ class là một instance. Đây là cách chúng ta 

Object cần được khởi tạo với operator new. Data truyền vào object là các tham số chúng ta đĩnh nghĩ trong constructor. Đây là hình thức quen thuộc của việc khởi tạo một class:

Giả sử chúng ta muốn thêm thuộc tính vào class book như một ID, price (giá) và number in stock (số lượng đang có). Chúng ta có 6 tham số trong constructor, và điều này không hay lắm, chỉ tạm được khi trông như thế. Nó làm nhà phát triển phải tốn sức thêm vì sử dụng class bởi vì họ phải nhớ thứ tự của các tham số. Một giải pháp tốt hơn là đưa tham số vào là một object: Ví dụ như:

Để khởi tạo một object:

Trong ví dụ, chúng ta có thể truy xuất tiêu đề của sách với book.title bởi vì tất cả thuộc tính của class đều public (công khai). Bây giờ chúng tôi tự hỏi tại sao tôi đã tạo ra tất cả những phương thức này nếu chúng tôi có thể truy cập những thuộc tính một cách trực tiếp. Có phải nó chỉ cho bạn thấy cú pháp? Vâng. Đồng thời, tôi cũng muốn cho thấy lợi ích của việc tổ chức code theo cách này.

Đóng gói các code liên quan nhau thành đối tượng object được gọi là encapsulation. Một trong số các lợi ích của encapsulation là data hiding. Data hiding nghĩa là một thuộc tính của object không thể được truy xuất từ bên ngoài của class.

Trong những ngôn ngữ khác như Java và Python, chúng ta có thể có những thuộc tính private và phương thức private. Bởi vì tất cả data của chúng ta được public theo mặc định trong một class của JavaScript, chúng ta không thể tận dụng lợi thế của đặc tính này. Tuy vậy, chúng ta nên truy xuất data của chúng ta với getters và setters. Một quy luật để thêm vào phía trước tên một thuộc tính là dùng underscore (dấu _ ) để cho biết là private.

Nhiệm vụ

Tạo một đối tượng book, đối tượng này sử dụng object của author để xét thuộc tính author.

Suy nghĩ tổng kết

Chúng ta đã biết được rằng một class là bản thiết kế để tạo ra các object, và một object là một giá trị của một class. Lợi ích của việc xây dựng phần mềm thành object là nó cho chương trình một cấu trúc và làm chương trình có thể dễ quản lý hơn.

Khi chúng ta có một chương trình lớn, hãy chia nhỏ nó thành từng object, cho phép những phần đó được phát triển và bảo trì độc lập với các phần khác. Với loại hình mo-đun này có thể dùng lại được. Bởi vì code của chúng ta là encapsulate, các object có thể dược dùng lại nhiều lần trong những phần khác của chương trình. Thêm vào đó chúng ta có một đơn vị code có thể kiểm tra được. Code càng được kiểm thử tốt, thì nó càng ít lỗi.

Tham khảo thêm

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.