tek4

Lớp trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8218 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-53.png" alt="Lớp trong JavaScript" width="753" height="440" /></p> <p>Lớp l&agrave; một trong những t&iacute;nh năng được giới thiệu trong phi&ecirc;n bản JavaScript ES6. Trong b&agrave;i viết n&agrave;y, ta sẽ t&igrave;m hiểu về lớp 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>Lớp trong JavaScript</h1> <p>Một lớp l&agrave; một bản thiết kế cho đối tượng. Ta c&oacute; thể tạo một đối tượng từ lớp. Ta c&oacute; thể coi lớp như một bản ph&aacute;c thảo của một ng&ocirc;i nh&agrave;. N&oacute; chứa tất cả c&aacute;c chi tiết về s&agrave;n nh&agrave;, cửa ra v&agrave;o, cửa sổ,... Dựa tr&ecirc;n những m&ocirc; tả n&agrave;y, ta sẽ x&acirc;y dựng ng&ocirc;i nh&agrave;. Như vậy, ng&ocirc;i nh&agrave; ch&iacute;nh l&agrave; đối tượng của một lớp (bản ph&aacute;c thảo). V&igrave; nhiều ng&ocirc;i nh&agrave; c&oacute; thể được tạo từ c&ugrave;ng một bản ph&aacute;c thảo, ch&uacute;ng ta c&oacute; thể tạo nhiều đối tượng từ một lớp.</p> <h2>Tạo lớp</h2> <p>Lớp trong JavaScript tương tự với h&agrave;m khởi tạo.</p> <p>V&iacute; dụ: Ta c&oacute; h&agrave;m khởi tạo được định nghĩa như sau:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function sinh_vien () { &nbsp;&nbsp;&nbsp; this.ten = 'Nam', &nbsp;&nbsp;&nbsp; this.ID = 100 } let sv = new sinh_vien();</pre> <p>Thay v&igrave; sử dụng từ kh&oacute;a <code class="EnlighterJSRAW" data-enlighter-language="generic">function</code>, ta sẽ sử dụng từ kh&oacute;a <code class="EnlighterJSRAW" data-enlighter-language="generic">class</code>để tạo c&aacute;c lớp trong JavaScript.</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; } }</pre> <p>C&aacute;c thuộc t&iacute;nh của lớp sẽ được g&aacute;n trong một h&agrave;m khởi tạo của lớp đ&oacute;.</p> <p>B&acirc;y giờ ta c&oacute; thể tạo một đối tượng như trong đoạn m&atilde; b&ecirc;n dưới.</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; } } const sv = new sinh_vien('Nam'); const sv2 = new sinh_vien('Thanh'); console.log(sv.ten); console.log(sv2.ten);</pre> <p>Kết quả:</p> <pre>Nam Thanh</pre> <p>Ở đ&acirc;y, sv v&agrave; sv2 l&agrave; c&aacute;c đối tượng của lớp sinh_vien.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Phương thức constructor() b&ecirc;n trong một lớp được gọi tự động mỗi khi một đối tượng được tạo từ lớp đ&oacute;.</span></strong></p> <h2>C&aacute;c phương thức của lớp</h2> <p>Trong khi sử dụng h&agrave;m khởi tạo, ta c&oacute; thể định nghĩa c&aacute;c phương thức kh&aacute;c. Rất dễ d&agrave;ng để định nghĩa c&aacute;c phương thức trong lớp. Ta chỉ cần cung cấp t&ecirc;n của phương thức v&agrave; theo sau l&agrave; ngoặc <code class="EnlighterJSRAW" data-enlighter-language="generic">()</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; } } const sv = new sinh_vien('Nam'); const sv2 = new sinh_vien('Thanh'); sv.in_thong_tin(); sv2.in_thong_tin();</pre> <p>Kết quả:</p> <pre>Nam Thanh</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Để truy cập phương thức của một đối tượng, ta cần gọi phương thức bằng c&aacute;ch sử dụng t&ecirc;n của n&oacute; v&agrave; theo sau l&agrave; dấu ngoặc đơn ().</span></strong></p> <h2>Phương thức getter v&agrave; setter</h2> <p>Trong JavaScript, c&aacute;c phương thức getter sẽ nhận gi&aacute; trị của một đối tượng v&agrave; c&aacute;c phương thức setter sẽ g&aacute;n gi&aacute; trị của một đối tượng.</p> <p>C&aacute;c lớp trong JavaScript c&oacute; thể bao gồm c&aacute;c h&agrave;m getters v&agrave; setters. Ta sử dụng từ kh&oacute;a <code class="EnlighterJSRAW" data-enlighter-language="generic">get</code>trong khi định nghĩa cho c&aacute;c phương thức getter v&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">set</code>cho c&aacute;c phương thức setter.</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; } &nbsp;&nbsp;&nbsp; get getProp() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return this.ten; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; set setProp(a) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.ten = a; &nbsp;&nbsp;&nbsp; } } const sv = new sinh_vien(); sv.setProp = 'Trang'; console.log(sv.getProp);</pre> <p>Kết quả:</p> <pre>Trang</pre> <h2>Cơ chế Hoisting</h2> <p>Một lớp n&ecirc;n được định nghĩa trước khi sử dụng n&oacute;. Kh&ocirc;ng giống như c&aacute;c h&agrave;m v&agrave; c&aacute;c khai b&aacute;o trong JavaScript kh&aacute;c, lớp kh&ocirc;ng c&oacute; được hỗ trợ cơ chế <code class="EnlighterJSRAW" data-enlighter-language="generic">hoisting</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sv = new sinh_vien(); 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; } &nbsp;&nbsp;&nbsp; get getProp() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return this.ten; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; set setProp(a) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.ten = a; &nbsp;&nbsp;&nbsp; } }</pre> <h2>Cụm từ kh&oacute;a 'use strict'</h2> <p>C&aacute;c lớp lu&ocirc;n tu&acirc;n theo <code class="EnlighterJSRAW" data-enlighter-language="generic">'use strict'</code>. Tất cả đoạn m&atilde; b&ecirc;n trong lớp được tự động tu&acirc;n theo chế độ nghi&ecirc;m ngặt. Ta sẽ t&igrave;m hiểu kỹ hơn về chế độ n&agrave;y trong c&aacute;c b&agrave;i sau về lập tr&igrave;nh JavaScript.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">class sinh_vien { &nbsp; constructor() { &nbsp;&nbsp;&nbsp; a = 'Nam'; &nbsp;&nbsp;&nbsp; this.ten = a; &nbsp; } &nbsp; in_thong_tin = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(this.ten); &nbsp; } } let sv = new sinh_vien();</pre> <p>Kết quả của chương tr&igrave;nh tr&ecirc;n sẽ l&agrave; một th&ocirc;ng b&aacute;o lỗi được đưa ra. Bởi biến a chưa được khai b&aacute;o trong h&agrave;m khởi tạo của lớp.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Lớp trong JavaScript l&agrave; một kiểu h&agrave;m đặc biệt. V&agrave; to&aacute;n tử typeof sẽ trả về kiểu function cho một lớp.</span></strong></p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">class sinh_vien { &nbsp; constructor() { &nbsp;&nbsp;&nbsp; a = 'Nam'; &nbsp;&nbsp;&nbsp; this.ten = a; &nbsp; } &nbsp; in_thong_tin = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(this.ten); &nbsp; } } console.log(typeof sinh_vien);</pre> <p>Kết quả:</p> <pre>Function</pre> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về 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 mới nhất 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>