Return to Video

Object Inheritance (Video Version)

  • 0:01 - 0:03
    Ta cùng trở lại với chương trình tạo Winston
  • 0:03 - 0:08
    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
  • 0:08 - 0:12
    hơi lạc lõng. Bây giờ tôi sẽ định nghĩa Hopper tương tự như Winston,
  • 0:12 - 0:16
    bắt đầu với hàm tạo, mang cùng thuộc tính rồi đến thủ tục draw
  • 0:16 - 0:20
    rồi thủ tục talk, sau đó tôi sẽ thêm một thủ tục nữa được gọi là
  • 0:20 - 0:24
    Hooray vì Hopper rất thích tiệc tùng còn Winston
  • 0:24 - 0:28
    thì không. Hiện tại ở cuối hàm tôi đã tạo
  • 0:28 - 0:31
    hai đối tượng Hopper mới: Little Hopper và big Hopper
  • 0:31 - 0:35
    đã 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.
  • 0:35 - 0:38
    Thế là gọn gàng rồi.
  • 0:38 - 0:40
    Bây giờ, khi nhìn vào dòng mã trên này
  • 0:40 - 0:42
    ta sẽ thấy một thứ rất thú vị. Đó là
  • 0:42 - 0:52
    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.
  • 0:52 - 1:01
    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
  • 1:01 - 1:04
    và cả hai đều có hàm draw.
  • 1:04 - 1:08
    Như vậy hai loại đối tượng này có rất nhiều điểm chung
  • 1:08 - 1:11
    và điều đó khiến Hopper và Winston trở thành hai loại đối tượng rất tương đồng
  • 1:11 - 1:15
    trong thế giới của chúng ta. Thử nghĩ mà xem, hầu hết loại đối tượng trong
  • 1:15 - 1:20
    thế giới thực bên ngoài máy tính đều mang những điểm chung nhất định
  • 1:20 - 1:21
    với các loại đối tượng khác.
  • 1:21 - 1:24
    Giống như trong thế giới động vật. Tất cả các loài động vật
  • 1:24 - 1:27
    đều giống nhau theo cách nào đó. Và tiếp đó ta có các loài động vật khác nhau
  • 1:27 - 1:32
    như con người. Và con người cũng mang những điểm chung đó
  • 1:32 - 1:34
    đồng thời có những điểm tương đồng riêng của giống loài.
  • 1:34 - 1:36
    Như vậy ta có thể coi
  • 1:36 - 1:39
    độ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.
  • 1:39 - 1:47
    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.
  • 1:47 - 1:49
    Ví dụ các loài động vật đều phát ra tiếng kêu.
  • 1:49 - 1:51
    Nhưng con người còn sáng tạo ra ngôn ngữ.
  • 1:51 - 1:55
    Như vậy khái niệm đối tượng kế thừa này
  • 1:55 - 1:57
    cũng rất hữu ích trong lập trình.
  • 1:57 - 2:00
    Và ta có thể tạo một chuỗi đối tượng kế thừa trong Javascript.
  • 2:00 - 2:03
    Để làm được điều đó ta phải nghĩ về
  • 2:03 - 2:04
    những điểm chung giữa các loại đối tượng.
  • 2:04 - 2:07
    Và nghĩ ra một cái tên.
  • 2:07 - 2:09
    Vì ta sẽ tạo một loại đối tượng mới
  • 2:09 - 2:11
    đại diện cho đối tượng cơ sở,
  • 2:11 - 2:12
    nên ta sẽ gọi đó là creature’s.
  • 2:12 - 2:14
    Cả hai đều là sinh vật.
  • 2:14 - 2:18
    Như vậy ta nhập var creatures =. Bây giờ ta cần có hàm tạo.
  • 2:18 - 2:22
    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.
  • 2:22 - 2:24
    Được rồi.
  • 2:24 - 2:27
    Ta cùng xem nhé.
  • 2:27 - 2:28
    Bây giờ ta phải...
  • 2:28 - 2:30
    Ta phải làm gì tiếp theo?
  • 2:30 - 2:32
    Có thể ta sẽ muốn thêm hàm “talk”.
  • 2:32 - 2:39
    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.
  • 2:39 - 2:42
    Đã xong.
  • 2:42 - 2:45
    Vậy là ta đã xong loại đối tượng creature này.
  • 2:45 - 2:48
    Nhưng ta phải cho Hopper biết rằng Hopper nên
  • 2:48 - 2:51
    lấy chức năng của creature làm cơ sở.
  • 2:51 - 2:51
    Ta có thể làm điều đó bằng cách viết dòng này ở đây.
  • 2:54 - 2:59
    Ta sẽ nhập Hopper.prototype
  • 2:59 - 3:02
    equals object.create
  • 3:02 - 3:05
    creature.prototype
  • 3:05 - 3:14
    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.
  • 3:14 - 3:22
    Và điều đó có nghĩa là mỗi khi tìm hàm trên Hopper, nó sẽ tìm ở prototype Hopper
  • 3:22 - 3:26
    trước, nhưng nếu không tìm thấy nó sẽ tìm trên prototype creature’s.
  • 3:26 - 3:29
    Đây chính là cái ta gọi là chuỗi prototype.
  • 3:29 - 3:34
    Sau khi hoàn thành, ta sẽ có thể xóa hàm talk
  • 3:34 - 3:36
    trên Hopper.
  • 3:36 - 3:38
    Vì ta đã có hàm talk trên creature rồi,
  • 3:38 - 3:40
    và sẽ xuất hiện trong chuỗi prototype.
  • 3:40 - 3:43
    Sẵn sàng chưa? Da dun da...
  • 3:43 - 3:44
    Thành công rồi!
  • 3:44 - 3:47
    Đó là bởi hàm đã được tìm thấy trên prototype creature.
  • 3:47 - 3:51
    Vậy ta cùng thử xóa trên Winston nữa nhé.
  • 3:51 - 3:58
    OK. Chương trình không chạy vì đối tượng không có thủ tục talk.
  • 3:58 - 4:01
    Tại sao lại thế? Tại sao lại thế? Ta có hàm tạo Winston,
  • 4:01 - 4:04
    thủ tục draw và ta đã xóa thủ tục talk.
  • 4:04 - 4:08
    Các bạn có thể thấy ta đã quên lệnh cho prototype Winston kế thừa
  • 4:08 - 4:09
    từ prototype creature’s.
  • 4:09 - 4:11
    Vì vậy dòng đó rất quan trọng.
  • 4:11 - 4:13
    Winston.prototype=object.create
  • 4:13 - 4:15
    creature.portotype.
  • 4:15 - 4:19
    Ta Da!
  • 4:19 - 4:20
    Hãy chú ý một điều quan trọng.
  • 4:20 - 4:26
    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
  • 4:26 - 4:29
    construction prototype.
  • 4:29 - 4:29
    Thông thường đó sẽ là quy trình.
  • 4:29 - 4:31
    Ta muốn lệnh cho Javascript
  • 4:31 - 4:34
    ngay khi vừa bắt đầu rằng đây sẽ là cơ sở cho prototype ban đầu.
  • 4:34 - 4:37
    Nhưng sau đó ta tiếp tục thêm các thứ vào prototype.
  • 4:37 - 4:42
    Bởi có thể các Winston hoặc các Hopper có điều gì đó độc đáo
  • 4:42 - 4:44
    mà những sinh vật khác không có.
  • 4:44 - 4:45
    Ta hoàn toàn có thể chỉ định rõ những điều đó.
  • 4:45 - 4:50
    Đượ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.
  • 4:50 - 4:52
    Mã hàm tạo.
  • 4:52 - 4:53
    Đúng không? Tổng cộng lặp 3 lần.
  • 4:53 - 4:57
    Ta xóa có được không?
  • 4:57 - 4:58
    Cùng thử xem nhé.
  • 4:58 - 5:04
    OK. Trông có vẻ không ổn lắm.
  • 5:04 - 5:07
    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.
  • 5:07 - 5:15
    Đó 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.
  • 5:15 - 5:19
    Javascript để ta tự định nghĩa hàm tạo cho những đối tượng này.
  • 5:19 - 5:24
    Nhưng ta cũng có thể gọi hàm tạo từ đối tượng một cách dễ dàng.
  • 5:24 - 5:29
    Như cách ta vẫn làm
  • 5:29 - 5:35
    ta sẽ nhập creature.callthis,nickname,age,x,y
  • 5:35 - 5:41
    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à
  • 5:41 - 5:44
    gọi hàm creature, hàm tạo.
  • 5:44 - 5:50
    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ể
  • 5:50 - 5:54
    được gọi từ đối tượng Hopper
  • 5:54 - 5:57
    và như thể được gọi cùng những đối số này.
  • 5:57 - 5:59
    Đây là những đối số mà Hopper được gọi cùng.
  • 5:59 - 6:04
    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.
  • 6:04 - 6:05
    Đó chính xác là điều chúng ta muốn. Và ta đã thành công.
  • 6:05 - 6:10
    Sau đó ta có thể tiếp tục
  • 6:10 - 6:12
    sao chép dòng này vào
  • 6:12 - 6:14
    cả hàm tạo Winston nữa.
  • 6:14 - 6:17
    Thành công rồi. Yay!
  • 6:17 - 6:25
    Đượ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.
  • 6:25 - 6:28
    Và ta đã tạo 2 loại đối tượng mở rộng từ đối tượng cơ sở này.
  • 6:28 - 6:31
    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.
  • 6:31 - 6:36
    Điều thú vị là ta có thể thay đổi chức năng chung tại một vị trí duy nhất.
  • 6:36 - 6:40
    Ví dụ nếu ta muốn thay đổi tuổi thêm lần nữa ta có thể nhập + years old.
  • 6:40 - 6:44
    Giờ thì ai cũng có “years old” ở cuối cùng.
  • 6:44 - 6:50
    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”.
  • 6:50 - 6:57
    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 đó.
  • 6:57 - 7:01
    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.
  • 7:01 - 7:05
    Ví dụ, bạn có một trò chơi, trong đó có nhiều loại nhân vật
  • 7:05 - 7:08
    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.
  • 7:08 - 7:12
    Đó là ví dụ điển hình cho loại đối tượng và kế thừa.
  • 7:12 - 0:00
    Nhưng tôi cá các bạn có thể nghĩ ra còn nhiều cách hơn thế nữa.
Title:
Object Inheritance (Video Version)
Description:

more » « less
Video Language:
English
Duration:
07:17

Vietnamese subtitles

Incomplete

Revisions