WEBVTT

00:00:01.187 --> 00:00:03.173
Ta cùng trở lại với chương trình tạo Winston

00:00:03.173 --> 00:00:07.589
nhưng tôi đã thêm vào một loại đối tượng mới Hopper vì Hopper đang cảm thấy

00:00:07.589 --> 00:00:11.924
hơi lạc lõng. Bây giờ tôi sẽ định nghĩa Hopper tương tự như Winston,

00:00:11.924 --> 00:00:15.843
bắt đầu với hàm tạo, mang cùng thuộc tính rồi đến thủ tục draw

00:00:15.843 --> 00:00:20.498
rồi thủ tục talk, sau đó tôi sẽ thêm một thủ tục nữa được gọi là

00:00:20.498 --> 00:00:23.808
Hooray vì Hopper rất thích tiệc tùng còn Winston

00:00:23.808 --> 00:00:27.924
thì không. Hiện tại ở cuối hàm tôi đã tạo

00:00:27.924 --> 00:00:31.174
hai đối tượng Hopper mới: Little Hopper và big Hopper

00:00:31.174 --> 00:00:35.347
đã vẽ cả hai, và gọi thủ tục talk cho đối tượng này và thủ tục Hooray cho đối tượng kia.

00:00:35.347 --> 00:00:37.508
Thế là gọn gàng rồi.

00:00:37.508 --> 00:00:39.928
Bây giờ, khi nhìn vào dòng mã trên này

00:00:39.928 --> 00:00:41.823
ta sẽ thấy một thứ rất thú vị. Đó là

00:00:41.973 --> 00:00:52.324
dòng mã này của Hopper rát giống với mã của Winston. Đặc biệt hãy nhìn vào hàm tạo. Không biết các bạn có nhớ không nhưng về cơ bản giống y đúc với hàm tạo của Winston.

00:00:52.324 --> 00:01:00.748
Tiếp theo hàm talk này cũng giống y hệt với mã trong hàm talk của Winston

00:01:00.763 --> 00:01:03.897
và cả hai đều có hàm draw.

00:01:03.897 --> 00:01:07.922
Như vậy hai loại đối tượng này có rất nhiều điểm chung

00:01:07.922 --> 00:01:11.341
và điều đó khiến Hopper và Winston trở thành hai loại đối tượng rất tương đồng

00:01:11.341 --> 00:01:15.299
trong thế giới của chúng ta. Thử nghĩ mà xem, hầu hết loại đối tượng trong

00:01:15.299 --> 00:01:20.009
thế giới thực bên ngoài máy tính đều mang những điểm chung nhất định

00:01:20.009 --> 00:01:21.423
với các loại đối tượng khác.

00:01:21.423 --> 00:01:23.643
Giống như trong thế giới động vật. Tất cả các loài động vật

00:01:23.643 --> 00:01:26.812
đều giống nhau theo cách nào đó. Và tiếp đó ta có các loài động vật khác nhau

00:01:26.812 --> 00:01:31.588
như con người. Và con người cũng mang những điểm chung đó

00:01:31.588 --> 00:01:34.331
đồng thời có những điểm tương đồng riêng của giống loài.

00:01:34.331 --> 00:01:35.820
Như vậy ta có thể coi

00:01:36.205 --> 00:01:38.967
động vật là một loại đối tượng mang chức năng cho loại đối tượng con người kế thừa.

00:01:38.967 --> 00:01:46.864
Ta không hoàn toàn bắt đầu từ con số 0 mà ta tích lũy chức năng từ khi còn là động vật.

00:01:46.864 --> 00:01:49.196
Ví dụ các loài động vật đều phát ra tiếng kêu.

00:01:49.196 --> 00:01:51.407
Nhưng con người còn sáng tạo ra ngôn ngữ.

00:01:51.407 --> 00:01:54.673
Như vậy khái niệm đối tượng kế thừa này

00:01:54.673 --> 00:01:56.695
cũng rất hữu ích trong lập trình.

00:01:56.695 --> 00:01:59.865
Và ta có thể tạo một chuỗi đối tượng kế thừa trong Javascript.

00:01:59.865 --> 00:02:02.529
Để làm được điều đó ta phải nghĩ về

00:02:02.529 --> 00:02:04.425
những điểm chung giữa các loại đối tượng.

00:02:04.425 --> 00:02:06.633
Và nghĩ ra một cái tên.

00:02:06.633 --> 00:02:08.675
Vì ta sẽ tạo một loại đối tượng mới

00:02:08.675 --> 00:02:10.576
đại diện cho đối tượng cơ sở,

00:02:10.576 --> 00:02:12.094
nên ta sẽ gọi đó là creature’s.

00:02:12.094 --> 00:02:13.873
Cả hai đều là sinh vật.

00:02:13.873 --> 00:02:17.831
Như vậy ta nhập var creatures =. Bây giờ ta cần có hàm tạo.

00:02:17.831 --> 00:02:22.342
Vậy thì ta chỉ việc chôm hàm tạo của Hopper, cũng giống như của Winston thôi.

00:02:22.342 --> 00:02:23.762
Được rồi.

00:02:23.762 --> 00:02:27.172
Ta cùng xem nhé.

00:02:27.172 --> 00:02:28.135
Bây giờ ta phải...

00:02:28.135 --> 00:02:29.506
Ta phải làm gì tiếp theo?

00:02:29.506 --> 00:02:31.966
Có thể ta sẽ muốn thêm hàm “talk”.

00:02:31.966 --> 00:02:39.303
Vậy, với hàm “talk”, ta lại chôm của Hopper. Nhưng tất nhiên thay vào đó ta phải đưa vào prototypre của creature.

00:02:39.303 --> 00:02:41.683
Đã xong.

00:02:41.683 --> 00:02:45.300
Vậy là ta đã xong loại đối tượng creature này.

00:02:45.300 --> 00:02:47.810
Nhưng ta phải cho Hopper biết rằng Hopper nên

00:02:47.810 --> 00:02:51.141
lấy chức năng của creature làm cơ sở.

00:02:51.248 --> 00:02:51.249
Ta có thể làm điều đó bằng cách viết dòng này ở đây.

00:02:53.816 --> 00:02:58.595
Ta sẽ nhập Hopper.prototype

00:02:58.595 --> 00:03:01.967
equals object.create

00:03:01.967 --> 00:03:04.977
creature.prototype

00:03:04.977 --> 00:03:14.197
Tác dụng của dòng này là lệnh cho Javascript lấy chức năng từ prototype creature’s làm cơ sở cho prototype Hopper, nói cách khác, làm cơ sở cho tất cả các Hopper.

00:03:14.197 --> 00:03:22.342
Và điều đó có nghĩa là mỗi khi tìm hàm trên Hopper, nó sẽ tìm ở prototype Hopper

00:03:22.342 --> 00:03:26.429
trước, nhưng nếu không tìm thấy nó sẽ tìm trên prototype creature’s.

00:03:26.429 --> 00:03:29.196
Đây chính là cái ta gọi là chuỗi prototype.

00:03:29.196 --> 00:03:34.032
Sau khi hoàn thành, ta sẽ có thể xóa hàm talk

00:03:34.032 --> 00:03:35.634
trên Hopper.

00:03:35.634 --> 00:03:38.302
Vì ta đã có hàm talk trên creature rồi,

00:03:38.302 --> 00:03:40.231
và sẽ xuất hiện trong chuỗi prototype.

00:03:40.231 --> 00:03:42.541
Sẵn sàng chưa? Da dun da...

00:03:42.541 --> 00:03:43.924
Thành công rồi!

00:03:43.924 --> 00:03:46.804
Đó là bởi hàm đã được tìm thấy trên prototype creature.

00:03:46.804 --> 00:03:51.234
Vậy ta cùng thử xóa trên Winston nữa nhé.

00:03:51.234 --> 00:03:57.680
OK. Chương trình không chạy vì đối tượng không có thủ tục talk.

00:03:57.680 --> 00:04:01.263
Tại sao lại thế? Tại sao lại thế? Ta có hàm tạo Winston,

00:04:01.263 --> 00:04:03.517
thủ tục draw và ta đã xóa thủ tục talk.

00:04:03.517 --> 00:04:07.924
Các bạn có thể thấy ta đã quên lệnh cho prototype Winston kế thừa

00:04:07.924 --> 00:04:09.409
từ prototype creature’s.

00:04:09.409 --> 00:04:10.711
Vì vậy dòng đó rất quan trọng.

00:04:10.711 --> 00:04:13.043
Winston.prototype=object.create

00:04:13.043 --> 00:04:15.194
creature.portotype.

00:04:15.194 --> 00:04:19.290
Ta Da!

00:04:19.290 --> 00:04:20.426
Hãy chú ý một điều quan trọng.

00:04:20.426 --> 00:04:26.097
Tôi nhập dòng này sau khi nhập hàm tạo nhưng trước khi thêm bất kỳ thứ gì khác vào

00:04:26.097 --> 00:04:28.638
construction prototype.

00:04:28.638 --> 00:04:29.334
Thông thường đó sẽ là quy trình.

00:04:29.334 --> 00:04:31.230
Ta muốn lệnh cho Javascript

00:04:31.230 --> 00:04:33.860
ngay khi vừa bắt đầu rằng đây sẽ là cơ sở cho prototype ban đầu.

00:04:33.860 --> 00:04:36.804
Nhưng sau đó ta tiếp tục thêm các thứ vào prototype.

00:04:36.804 --> 00:04:41.673
Bởi có thể các Winston hoặc các Hopper có điều gì đó độc đáo

00:04:41.673 --> 00:04:43.909
mà những sinh vật khác không có.

00:04:43.909 --> 00:04:45.405
Ta hoàn toàn có thể chỉ định rõ những điều đó.

00:04:45.405 --> 00:04:50.256
Được rồi. Hiện tại, nhìn vào đây ta vẫn thấy có một số mã bị lặp.

00:04:50.256 --> 00:04:51.524
Mã hàm tạo.

00:04:51.524 --> 00:04:53.366
Đúng không? Tổng cộng lặp 3 lần.

00:04:53.366 --> 00:04:56.638
Ta xóa có được không?

00:04:56.638 --> 00:04:57.840
Cùng thử xem nhé.

00:04:57.840 --> 00:05:03.509
OK. Trông có vẻ không ổn lắm.

00:05:03.509 --> 00:05:07.340
Vì Hopper xuất hiện ở góc trên bên trái, gần như quên mọi thứ về bản thân.

00:05:07.340 --> 00:05:15.264
Đó là bởi Javascript không giả định ta cần cùng một hàm tạo ngay cả khi nó được làm cơ sở cho prototype.

00:05:15.264 --> 00:05:19.359
Javascript để ta tự định nghĩa hàm tạo cho những đối tượng này.

00:05:19.359 --> 00:05:23.978
Nhưng ta cũng có thể gọi hàm tạo từ đối tượng một cách dễ dàng.

00:05:23.978 --> 00:05:28.926
Như cách ta vẫn làm

00:05:28.926 --> 00:05:35.470
ta sẽ nhập creature.callthis,nickname,age,x,y

00:05:35.470 --> 00:05:40.598
Tác dụng của dòng này (Nhìn kìa, thành công rồi. Yay). Tác dụng của nó là

00:05:40.598 --> 00:05:43.679
gọi hàm creature, hàm tạo.

00:05:43.679 --> 00:05:50.339
Nó gọi hàm nhưng lại đưa hàm vào và nói rằng ta nên gọi hàm tạo này như thể

00:05:50.339 --> 00:05:53.764
được gọi từ đối tượng Hopper

00:05:53.764 --> 00:05:56.968
và như thể được gọi cùng những đối số này.

00:05:56.968 --> 00:05:59.427
Đây là những đối số mà Hopper được gọi cùng.

00:05:59.427 --> 00:06:03.589
Và cuối cùng dòng mã này sẽ được thực hiện như thể nó vẫn ở đây ngay từ đầu.

00:06:03.589 --> 00:06:05.397
Đó chính xác là điều chúng ta muốn. Và ta đã thành công.

00:06:05.397 --> 00:06:09.709
Sau đó ta có thể tiếp tục

00:06:09.709 --> 00:06:11.515
sao chép dòng này vào

00:06:11.515 --> 00:06:13.757
cả hàm tạo Winston nữa.

00:06:13.757 --> 00:06:16.531
Thành công rồi. Yay!

00:06:16.531 --> 00:06:24.901
Được rồi. Hãy xem nhé. Ta đã gói gọn tất cả những thuộc tính và chức năng chung trong một loại đối tượng cơ sở duy nhất, creature.

00:06:24.901 --> 00:06:28.207
Và ta đã tạo 2 loại đối tượng mở rộng từ đối tượng cơ sở này.

00:06:28.207 --> 00:06:30.981
Chúng kế thừa một sô schức năng nhưng cũng tự thêm chức năng của riêng mình.

00:06:30.981 --> 00:06:36.339
Điều thú vị là ta có thể thay đổi chức năng chung tại một vị trí duy nhất.

00:06:36.339 --> 00:06:40.302
Ví dụ nếu ta muốn thay đổi tuổi thêm lần nữa ta có thể nhập + years old.

00:06:40.302 --> 00:06:43.908
Giờ thì ai cũng có “years old” ở cuối cùng.

00:06:43.908 --> 00:06:49.871
Hoặc ta có thể đổi hàm “talk” thành “woo”. Giờ thì tất cả các Winston và Hopper đều đang nói “sup”.

00:06:49.871 --> 00:06:57.174
Hiện tại ta đã tìm hiểu cách tạo các loại đối tượng và kế thừa từ những loại đối tượng đó.

00:06:57.174 --> 00:07:01.348
Các bạn có thể bắt đầu nghĩ đến công dụng của chúng trong các bản vẽ, hoạt hình, mô phỏng và trò chơi.

00:07:01.348 --> 00:07:05.257
Ví dụ, bạn có một trò chơi, trong đó có nhiều loại nhân vật

00:07:05.257 --> 00:07:07.683
và tất cả nhân vật đều có thể chạy nhưng chỉ một số có thể nhảy thôi.

00:07:07.683 --> 00:07:11.970
Đó là ví dụ điển hình cho loại đối tượng và kế thừa.

00:07:11.970 --> 00:00:00.000
Nhưng tôi cá các bạn có thể nghĩ ra còn nhiều cách hơn thế nữa.