0:00:01.342,0:00:05.959
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ị.

0:00:05.959,0:00:09.546
Đôi khi ta gọi là “chương trình hướng đối tượng”.

0:00:09.546,0:00:12.570
Nhưng trước hết ta phải hiểu được tại sao nó lại hữu ích.

0:00:12.570,0:00:17.668
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.

0:00:17.668,0:00:25.138
Đâ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.

0:00:25.138,0:00:30.448
Đố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,

0:00:30.448,0:00:34.409
sau đó ta đưa tất cả tên thuộc tính và giá trị vào bên trong.

0:00:34.409,0:00:39.241
Như vậy ta có 2 biến đối tượng literals, và ở dưới đây ta có hàm drawWinston này,

0:00:39.241,0:00:41.129
chỉ nhận một đối số đơn,

0:00:41.129,0:00:47.882
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,

0:00:47.882,0:00:53.107
rồi đến chú thích dựa trên các thuộc tính nickname và age của đối tượng đó.

0:00:53.107,0:00:58.164
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,

0:00:58.164,0:01:01.012
và đó chính là lúc hình ảnh xuất hiện.

0:01:01.012,0:01:06.366
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,

0:01:06.366,0:01:11.410
hãy chú ý một điều là nhìn chúng rất giống nhau.

0:01:11.410,0:01:17.842
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().

0:01:17.842,0:01:24.072
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?

0:01:24.072,0:01:28.796
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,

0:01:28.796,0:01:36.460
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,

0:01:36.460,0:01:42.162
và ở đây, ta vừa tạo 2 instance của một Winston

0:01:42.162,0:01:48.465
để 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.

0:01:48.465,0:01:54.762
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.

0:01:54.762,0:02:01.295
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,

0:02:01.295,0:02:05.958
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.

0:02:05.958,0:02:14.948
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

0:02:14.948,0:02:21.834
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.

0:02:21.834,0:02:27.974
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.

0:02:27.974,0:02:30.900
Và ta sẽ thực hiện bằng cách tạo một biến.

0:02:30.900,0:02:38.934
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,

0:02:38.934,0:02:42.196
và đặt nó bằng với một hàm.

0:02:42.196,0:02:47.030
Hàm này là một hàm đặc biệt mà ta gọi là “hàm tạo”

0:02:47.030,0:02:52.042
bởi đó sẽ là hàm được gọi mỗi khi ta muốn tạo một instance Winston mới.

0:02:52.042,0:02:57.860
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.

0:02:57.860,0:03:06.417
Đ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.

0:03:06.417,0:03:11.324
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.

0:03:11.324,0:03:15.063
Bây giờ, khi đã nhận được đối số cần thiết để xử lý,

0:03:15.063,0:03:21.483
ta phải gán thông tin vào đối tượng Winston.

0:03:21.483,0:03:28.672
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.

0:03:28.672,0:03:34.921
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

0:03:34.921,0:03:38.419
bất cứ thông tin nào được đưa vào hàm tạo này, OK?

0:03:38.419,0:03:45.728
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

0:03:45.728,0:03:48.385
bằng với y được nhập.

0:03:48.385,0:03:57.500
Đượ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.

0:03:57.500,0:04:00.327
Ta cùng thử nhé!

0:04:00.327,0:04:05.245
Ta sẽ tạo thêm một winstonTeen nữa, nhưng lần này ta sẽ nhập winstonTeen =,

0:04:05.245,0:04:10.376
và thay vì ngoặc nhọn, ta sẽ nhập “= new Winston”.

0:04:10.376,0:04:13.950
Như vậy “ta đang cố gắng tạo một instance Winston mới”,

0:04:13.950,0:04:22.305
sau đó ta sẽ đưa vào những thông tin cần thiết, vậy là “Winsteen”, 15, 20, 25, OK?

0:04:22.305,0:04:27.502
Ta có thể xóa cái cũ này vì nó không cần thiết nữa.

0:04:27.502,0:04:31.082
Được chứ? Vậy là ta đã tạo xong một Winsteen mới.

0:04:31.082,0:04:35.722
Bây giờ ta có thể nhập winstonAdult = new Winston()

0:04:35.722,0:04:39.960
và tất nhiên tên cậu ta sẽ là “Mr. Winst-a-lot”, quá hay,

0:04:39.960,0:04:47.410
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.

0:04:47.410,0:04:50.812
Và tada! Mã vẫn hoạt động bình thường.

0:04:50.812,0:04:58.094
Như vậy ở đây ta có loại dữ liệu trừu tượng Winston này

0:04:58.094,0:05:05.272
và ta có thể tạo các instance Winston mới mang những thuộc tính đặc trưng.

0:05:05.272,0:05:08.799
Và ta cũng sẽ chỉ nhớ thuộc tính trong các instance thôi.

0:05:08.799,0:05:14.379
Đó là việc cực kỳ quan trọng. Ở trong đây ta có this.nickname, this.age.

0:05:14.379,0:05:20.212
Nếu vô tình không có this.age, ta sẽ thấy thông báo “undefined”.

0:05:20.212,0:05:23.103
Đó là bởi ở dưới đây, hàm drawWinston này,

0:05:23.103,0:05:28.162
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.

0:05:28.162,0:05:30.894
Nếu ta không nhập this.age,

0:05:30.894,0:05:34.029
đ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

0:05:34.029,0:05:39.363
nhưng chưa xử lý gì cả, ta phải gán nó với đối tượng bằng khóa “this”.

0:05:39.363,0:05:41.444
Ta cùng thêm nhé.

0:05:41.444,0:05:46.361
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.

0:05:46.361,0:05:50.589
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.

0:05:50.589,0:05:55.996
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.

0:05:55.996,0:06:00.830
Vì vậy nếu muốn, ta có thể thay đổi thông tin về Winston...

0:06:00.830,0:06:06.059
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”.

0:06:06.059,0:06:12.804
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?

0:06:12.804,0:06:17.281
Như vậy chúng vừa mang nét đặc trưng, vừa có điểm chung với nhau.

0:06:17.281,0:06:20.968
Đây thực sự là một ý tưởng thú vị về chương trình hướng đối tượng:

0:06:20.968,0:06:26.632
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 đó,

0:06:26.632,0:06:29.925
giữa chúng có những điểm chung, ví dụ như thuộc tính,

0:06:29.925,0:06:35.528
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?

0:06:35.528,0:06:40.741
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,

0:06:40.741,0:06:45.829
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,

0:06:45.829,0:06:48.690
nhưng đó chưa phải là tất cả đâu.

0:06:48.690,0:00:00.000
Hãy tiếp tục theo dõi nhé!