tek4

Kế thừa trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8220 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-54.png" alt="Kế thừa trong JavaScript" width="752" height="442" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ c&ugrave;ng t&igrave;m hiểu về t&iacute;nh kế thừa trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>Kế thừa trong JavaScript</h1> <p>Kế thừa cho ph&eacute;p một lớp c&oacute; thể thừa kế tất cả c&aacute;c h&agrave;m từ một lớp cha v&agrave; cho ph&eacute;p định nghĩa th&ecirc;m c&aacute;c h&agrave;m kh&aacute;c.</p> <p>Bằng c&aacute;ch tận dụng t&iacute;nh kế thừa lớp trong JavaScript, một lớp c&oacute; thể kế thừa tất cả c&aacute;c phương thức v&agrave; thuộc t&iacute;nh của lớp kh&aacute;c. Kế thừa l&agrave; một t&iacute;nh năng hữu &iacute;ch cho ph&eacute;p khả năng t&aacute;i sử dụng c&aacute;c đoạn m&atilde;.</p> <p>Để thực hiện việc kế thừa từ một lớp kh&aacute;c, ta sẽ sử dụng từ kh&oacute;a <code class="EnlighterJSRAW" data-enlighter-language="generic">extends</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">class sinh_vien { &nbsp; constructor(a) { &nbsp;&nbsp;&nbsp; this.ten = a; &nbsp; } &nbsp; in_thong_tin = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(this.ten); &nbsp; } } class sv_Luat extends sinh_vien { } let sv = new sv_Luat('Nam'); sv.in_thong_tin();</pre> <p>Kết quả:</p> <pre>Nam</pre> <p>Trong v&iacute; dụ tr&ecirc;n, lớp sv_Luat kế thừa tất cả c&aacute;c phương thức v&agrave; thuộc t&iacute;nh của lớp sinh_vien. Do đ&oacute;, lớp v_Luat b&acirc;y giờ sẽ c&oacute; thuộc t&iacute;nh ten v&agrave; phương thức in_thong_tin(). Sau đ&oacute;, ch&uacute;ng ta truy cập phương thức in_thong_tin() của lớp sinh_vien bằng c&aacute;ch tạo đối tượng sv.</p> <h2>Từ kh&oacute;a super trong JavaScript</h2> <p>Từ kh&oacute;a <code class="EnlighterJSRAW" data-enlighter-language="generic">super</code>được sử dụng b&ecirc;n trong lớp con để biểu thị lớp cha của n&oacute; (Lớp m&agrave; n&oacute; kế thừa).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">class sinh_vien { &nbsp; constructor(a) { &nbsp;&nbsp;&nbsp; this.ten = a; &nbsp; } &nbsp; in_thong_tin = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(this.ten); &nbsp; } } class sv_Luat extends sinh_vien { &nbsp;&nbsp;&nbsp; constructor(b) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("Gọi h&agrave;m cha"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super(b); &nbsp;&nbsp;&nbsp; } } let sv = new sv_Luat('Nam'); sv.in_thong_tin();</pre> <p>Kết quả:</p> <pre>Gọi h&agrave;m cha Nam</pre> <p>Ở đ&acirc;y, từ kh&oacute;a super b&ecirc;n trong lớp sv_Luat tham chiếu đến lớp sinh_vien. Do đ&oacute;, khi phương thức khởi tạo của lớp sinh_vien được gọi, n&oacute; cũng gọi phương thức khởi tạo của lớp sinh_vien.</p> <h2>Ghi đ&egrave; phương thức hoặc thuộc t&iacute;nh</h2> <p>Nếu một lớp con c&oacute; c&ugrave;ng t&ecirc;n của phương thức hoặc thuộc t&iacute;nh với t&ecirc;n của phương thức hoặc thuộc t&iacute;nh trong lớp cha, n&oacute; sẽ sử dụng phương thức v&agrave; thuộc t&iacute;nh của lớp con. Kh&aacute;i niệm n&agrave;y được gọi l&agrave; ghi đ&egrave; phương thức hoặc thuộc t&iacute;nh.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">class sinh_vien { &nbsp; constructor(a) { &nbsp;&nbsp;&nbsp; this.ten = a; &nbsp;&nbsp;&nbsp; this.ID = 100; &nbsp; } &nbsp; in_thong_tin = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(this.ten); &nbsp; } } class sv_Luat extends sinh_vien { &nbsp;&nbsp;&nbsp; constructor(b) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("Gọi h&agrave;m cha"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super(b); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.ID = 230; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; in_thong_tin = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(this.ten); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(this.ID); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("Ghi đ&egrave; h&agrave;m."); &nbsp;&nbsp;&nbsp; } } let sv = new sv_Luat('Nam'); sv.in_thong_tin();</pre> <p>Kết quả:</p> <pre>Gọi h&agrave;m cha Nam 230 Ghi đ&egrave; h&agrave;m.</pre> <p>Ở đ&acirc;y, thuộc t&iacute;nh ID v&agrave; phương thức in_thong_tin() c&oacute; tồn tại trong lớp cha sinh_vien v&agrave; lớp con sv_Luat. Như vậy, lớp sv_Luat sẽ ghi đ&egrave; thuộc t&iacute;nh ID v&agrave; phương thức in_thong_tin() trong lớp cha.</p> <h2>Lợi &iacute;ch của t&iacute;nh thừa kế</h2> <ul> <li>V&igrave; một lớp con c&oacute; thể thừa kế tất cả c&aacute;c phương thức của lớp cha, điều n&agrave;y cho ph&eacute;p đoạn m&atilde; c&oacute; thể t&aacute;i sử dụng trong lớp con.</li> <li>Khi một h&agrave;m được ph&aacute;t triển hoặc triển khai th&ecirc;m, ta c&oacute; thể kế thừa n&oacute; một c&aacute;ch đơn giản. Điều n&agrave;y cho ph&eacute;p đoạn m&atilde; tr&ocirc;ng dễ nh&igrave;n hơn v&agrave; dễ quản l&yacute; hơn.</li> <li>V&igrave; ta cũng c&oacute; thể th&ecirc;m c&aacute;c phương thức trong lớp con, n&ecirc;n ta chỉ c&oacute; thể kế thừa c&aacute;c phương thức hữu &iacute;ch v&agrave; c&aacute;c t&iacute;nh năng cần thiết kh&aacute;c từ lớp cha.</li> </ul> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về t&iacute;nh kế thừa lớp trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>