Sau khi đã nắm được những kiến thức cơ bản về Javascript, tôi muốn hướng dẫn các bạn một cách sử dụng Javascript thú vị.
Đôi khi ta gọi là “chương trình hướng đối tượng”.
Nhưng trước hết ta phải hiểu được tại sao nó lại hữu ích.
Tôi đã viết một chương trình, nó sẽ hiệu quả hơn khi ta đưa chương trình hướng đối tượng nhiều hơn.
Đây là một chương trình khá thú vị. Ở trên cùng, tôi có 2 biến lưu trữ những đối tượng literals đơn giản.
Đối tượng literals là loại đối tượng ta đã tìm hiểu từ trước, được tạo với 2 dấu ngoặc nhọn,
sau đó ta đưa tất cả tên thuộc tính và giá trị vào bên trong.
Như vậy ta có 2 biến đối tượng literals, và ở dưới đây ta có hàm drawWinston này,
chỉ nhận một đối số đơn,
sau đó hàm sẽ vẽ đối số, vẽ hình ảnh dựa trên các thuộc tính x và y của đối tượng,
rồi đến chú thích dựa trên các thuộc tính nickname và age của đối tượng đó.
Và cuối cùng, ở dưới cùng, ta gọi drawWinston() cho cả tuổi thiếu niên và trưởng thành,
và đó chính là lúc hình ảnh xuất hiện.
Thú vị thật. Bây giờ, nếu ta đi tới đây, và quan sát những đối tượng literals này,
hãy chú ý một điều là nhìn chúng rất giống nhau.
Cả hai đều có cùng một bộ thuộc tính, và đều có thể được sử dụng với cùng hàm drawWinston().
Trên thực tế, bạn biết đấy, thử nghĩ mà xem, chúng đều mô tả một kiểu Winston nào đó, đúng không?
Ta có thể nghĩ rằng có lẽ thực sự tồn tại kiểu Winston trừu tượng này trên đời,
và mỗi Winston đều có một bộ thuộc tính riêng như nickname, age, một x và một y,
và ở đây, ta vừa tạo 2 instance của một Winston
để mô tả một Winston cụ thể. Như vậy đây là Winston thiếu niên và đây là Winston trưởng thành.
Nhưng thực sự cả hai đều rất giống nhau và có rất rất nhiều điểm tương đồng.
Và thử nghĩ mà xem, thế giới vận hành theo nhiều cách khác nhau, có nhiều loại dữ liệu trừu tượng, ví dụ con người,
và chúng ta chỉ là những instance riêng biệt trong số những thuộc tính nhỏ bé của chính chúng ta mà thôi.
Bây giờ ta có thể sử dụng phương pháp hướng đối tượng này trong Javascript để những biến Winston này
là các instance chính thức của một đối tượng Winston, để chúng biết rằng mình mang những điểm chung này.
Như vậy, để làm được điều đó, điều đầu tiên ta cần làm là mô tả loại dữ liệu trừu tượng Winston này.
Và ta sẽ thực hiện bằng cách tạo một biến.
Ta sẽ lưu trữ loại dữ liệu trên trong một biến. Như vậy var Winston, ta sẽ viết hoa W vì ta luôn bắt đầu các loại đối tượng với chữ cái viết hoa,
và đặt nó bằng với một hàm.
Hàm này là một hàm đặc biệt mà ta gọi là “hàm tạo”
bởi đó sẽ là hàm được gọi mỗi khi ta muốn tạo một instance Winston mới.
Nếu ta muốn tạo một teenageWinston, ta sẽ gọi hàm này, hoặc tạo một adultWinston, ta cũng sẽ gọi hàm này.
Điều đó có nghĩa là hàm tạo sẽ nhận bất cứ đối số nào nó cần để có thể tạo một Winston hoàn chỉnh.
Trong trường hợp này, hàm cần phải biết biệt danh, tuổi tác, một x và một y.
Bây giờ, khi đã nhận được đối số cần thiết để xử lý,
ta phải gán thông tin vào đối tượng Winston.
Vì vậy ta sẽ sử dụng một khóa đặc biệt mới, gọi là “this”. Và “this” sẽ tham chiếu tới instance đối tượng hiện tại.
Ta nhập this.nickname, được rồi, thuộc tính nickname của đối tượng này sẽ bằng với
bất cứ thông tin nào được đưa vào hàm tạo này, OK?
Và this.age bằng với tuổi được nhập, this.x bằng với x được nhập, và this.y
bằng với y được nhập.
Được rồi, hiện tại ta có loại dữ liệu trừu tượng có tên Winston, và nó có một hàm tạo mà ta có thể sử dụng để tạo một Winston mới.
Ta cùng thử nhé!
Ta sẽ tạo thêm một winstonTeen nữa, nhưng lần này ta sẽ nhập winstonTeen =,
và thay vì ngoặc nhọn, ta sẽ nhập “= new Winston”.
Như vậy “ta đang cố gắng tạo một instance Winston mới”,
sau đó ta sẽ đưa vào những thông tin cần thiết, vậy là “Winsteen”, 15, 20, 25, OK?
Ta có thể xóa cái cũ này vì nó không cần thiết nữa.
Được chứ? Vậy là ta đã tạo xong một Winsteen mới.
Bây giờ ta có thể nhập winstonAdult = new Winston()
và tất nhiên tên cậu ta sẽ là “Mr. Winst-a-lot”, quá hay,
cậu ta sẽ 30 tuổi, ở vị trí 229 và 50. Được chứ? Sau đó ta có thể xóa đối tượng literal này.
Và tada! Mã vẫn hoạt động bình thường.
Như vậy ở đây ta có loại dữ liệu trừu tượng Winston này
và ta có thể tạo các instance Winston mới mang những thuộc tính đặc trưng.
Và ta cũng sẽ chỉ nhớ thuộc tính trong các instance thôi.
Đó là việc cực kỳ quan trọng. Ở trong đây ta có this.nickname, this.age.
Nếu vô tình không có this.age, ta sẽ thấy thông báo “undefined”.
Đó là bởi ở dưới đây, hàm drawWinston này,
sẽ nhận bất cứ đối tượng nào được đưa vào, và nó cần có một thuộc tính age.
Nếu ta không nhập this.age,
điều đó có nghĩa là sẽ không có thuộc tính age, phải không? Ta đã đưa vào hàm tạo
nhưng chưa xử lý gì cả, ta phải gán nó với đối tượng bằng khóa “this”.
Ta cùng thêm nhé.
Hẳn các bạn sẽ nghĩ hẳn rồi, mã thì chạy rồi, làm màu thì cũng làm rồi.
Tuy nhiên, tất cả những gì ta vừa làm chỉ là thực hiện lại những cái đã đạt được từ trước.
Nhưng cái này mới hay ho này. Tất cả các Winston của chúng ta đều đi qua cùng một hàm tạo.
Vì vậy nếu muốn, ta có thể thay đổi thông tin về Winston...
tất cả các Winston, ở trong này. Lấy tuổi làm ví dụ, có thể ta muốn thêm “years old”.
Ta hoàn toàn có thể nhập vào, và bây giờ tất cả các Winston đều nói “15 years old”, “30 years old”, đúng không?
Như vậy chúng vừa mang nét đặc trưng, vừa có điểm chung với nhau.
Đây thực sự là một ý tưởng thú vị về chương trình hướng đối tượng:
ta có nhiều loại đối tượng, và ta có thể tạo các instance của những đối tượng đó,
giữa chúng có những điểm chung, ví dụ như thuộc tính,
và cũng có những điểm khác biệt, kiểu như thuộc tính này của ông này lại mang giá trị khác với thuộc tính này của ông kia, đúng không?
Nhưng các bạn biết đấy, ta có thể thực hiện cùng một thao tác với chúng,
ví dụ như cách gọi và sử dụng hàm. Như vậy ta vừa tìm hiểu qua một số điều thú vị về chương trình hướng đối tượng,
nhưng đó chưa phải là tất cả đâu.
Hãy tiếp tục theo dõi nhé!