tek4

Hàm tạo trong JavaScript

by - September. 25, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8302 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-96.png" alt="H&agrave;m tạo trong JavaScript" width="748" height="445" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ c&ugrave;ng t&igrave;m hiểu về h&agrave;m tạo trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng dẫn chứng.</p> <h1>H&agrave;m tạo trong JavaScript</h1> <p>Trong JavaScript, một h&agrave;m khởi tạo được sử dụng để tạo c&aacute;c đối tượng.</p> <p>V&iacute; dụ: Định nghĩa một h&agrave;m tạo v&agrave; sử dụng h&agrave;m tạo để tạo đối tượng.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function Sinh_vien () { &nbsp;&nbsp;&nbsp; this.ID = 23 } const sv = new Sinh_vien();</pre> <p>Trong v&iacute; dụ tr&ecirc;n, h&agrave;m sinh_vien() l&agrave; một h&agrave;m tạo đối tượng.</p> <p>Để tạo một đối tượng từ một h&agrave;m khởi tạo, ch&uacute;ng ta sử dụng từ kh&oacute;a <code class="EnlighterJSRAW" data-enlighter-language="generic">new</code>.</p> <h2>Tạo nhiều đối tượng với h&agrave;m tạo</h2> <p>Trong JavaScript, ta c&oacute; thể tạo nhiều đối tượng từ một h&agrave;m khởi tạo.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function sinh_vien () { &nbsp;&nbsp;&nbsp; this.ID = 23, &nbsp;&nbsp;&nbsp; this.phuong_thuc = function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ocirc;i l&agrave; sinh vi&ecirc;n"); &nbsp;&nbsp;&nbsp; } } const sv = new sinh_vien(); const sv2 = new sinh_vien(); sv.phuong_thuc(); sv2.phuong_thuc();</pre> <p>Kết quả:</p> <pre>T&ocirc;i l&agrave; sinh vi&ecirc;n T&ocirc;i l&agrave; sinh vi&ecirc;n</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, hai đối tượng được tạo bằng c&aacute;ch sử dụng c&ugrave;ng một h&agrave;m khởi tạo.</p> <h2>Từ kh&oacute;a this</h2> <p>Trong JavaScript, khi từ kh&oacute;a this được sử dụng trong một h&agrave;m khởi tạo, từ kh&oacute;a this sẽ tham chiếu đến đối tượng m&agrave; được tạo bởi h&agrave;m tạo đ&oacute;.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function sinh_vien () { &nbsp;&nbsp;&nbsp; this.ID = 23, &nbsp;&nbsp;&nbsp; this.phuong_thuc = function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ocirc;i l&agrave; sinh vi&ecirc;n"); &nbsp;&nbsp;&nbsp; } } const sv = new sinh_vien(); console.log(sv.ID);</pre> <p>Kết quả:</p> <pre>23</pre> <p>Do đ&oacute;, khi một đối tượng truy cập c&aacute;c thuộc t&iacute;nh, n&oacute; c&oacute; thể truy cập trực tiếp v&agrave;o thuộc t&iacute;nh dưới dạng</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">t&ecirc;n_đối_tượng.t&ecirc;n_thuộc_t&iacute;nh.</pre> <h2>Tham số của h&agrave;m tạo</h2> <p>Ta cũng c&oacute; thể định nghĩa một h&agrave;m khởi tạo với c&aacute;c tham số.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function sinh_vien (ten, ID) { &nbsp;&nbsp;&nbsp; this.ID = ID, &nbsp;&nbsp;&nbsp; this.ten = ten, &nbsp;&nbsp;&nbsp; this.phuong_thuc = function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ocirc;i l&agrave; sinh vi&ecirc;n"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ecirc;n t&ocirc;i l&agrave;: " + this.ten); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("ID của t&ocirc;i l&agrave;: " + this.ID); &nbsp;&nbsp; &nbsp;} } const sv = new sinh_vien("Nam", 100); const sv2 = new sinh_vien("Trang", 20); sv.phuong_thuc(); sv2.phuong_thuc();</pre> <p>Kết quả:</p> <pre>T&ocirc;i l&agrave; sinh vi&ecirc;n T&ecirc;n t&ocirc;i l&agrave;: Nam ID của t&ocirc;i l&agrave;: 100 T&ocirc;i l&agrave; sinh vi&ecirc;n T&ecirc;n t&ocirc;i l&agrave;: Trang ID của t&ocirc;i l&agrave;: 20</pre> <p>Trong v&iacute; dụ tr&ecirc;n, ch&uacute;ng ta đ&atilde; truyền c&aacute;c đối số kh&aacute;c nhau cho h&agrave;m khởi tạo trong qu&aacute; tr&igrave;nh tạo c&aacute;c đối tượng.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sv = new sinh_vien("Nam", 100); const sv2 = new sinh_vien("Trang", 20);</pre> <p>Điều n&agrave;y cho ph&eacute;p mỗi đối tượng c&oacute; c&aacute;c thuộc t&iacute;nh l&agrave; kh&aacute;c nhau.</p> <h2>Tạo đối tượng: H&agrave;m tạo với Hằng đối tượng</h2> <p>Hằng đối tượng thường được sử dụng để tạo một đối tượng duy nhất. H&agrave;m khởi tạo sẽ rất hữu &iacute;ch trong việc tạo nhiều đối tượng.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sv3 = { &nbsp;&nbsp;&nbsp; ten: 'Thanh', &nbsp;&nbsp;&nbsp; ID: 30, &nbsp;&nbsp;&nbsp; phuong_thuc: function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ocirc;i l&agrave; sinh vi&ecirc;n"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ecirc;n t&ocirc;i l&agrave;: " + this.ten); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("ID của t&ocirc;i l&agrave;: " + this.ID); &nbsp;&nbsp;&nbsp; } }</pre> <p>Mỗi đối tượng được tạo từ h&agrave;m khởi tạo l&agrave; duy nhất. Ta c&oacute; thể c&oacute; c&aacute;c thuộc t&iacute;nh giống như h&agrave;m khởi tạo hoặc th&ecirc;m một thuộc t&iacute;nh mới v&agrave;o một đối tượng cụ thể.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function sinh_vien (ten, ID) { &nbsp;&nbsp;&nbsp; this.ID = ID, &nbsp;&nbsp;&nbsp; this.ten = ten, &nbsp;&nbsp;&nbsp; this.phuong_thuc = function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ocirc;i l&agrave; sinh vi&ecirc;n"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ecirc;n t&ocirc;i l&agrave;: " + this.ten); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("ID của t&ocirc;i l&agrave;: " + this.ID); &nbsp;&nbsp;&nbsp; } } const sv = new sinh_vien("Nam", 100); const sv2 = new sinh_vien("Trang", 20); sv2.dia_chi = "Ba Đ&igrave;nh, H&agrave; Nội";</pre> <p>B&acirc;y giờ thuộc t&iacute;nh dia_chia l&agrave; duy nhất cho đối tượng sv2 v&agrave; kh&ocirc;ng c&oacute; trong đối tượng sv.</p> <p>Tuy nhi&ecirc;n, nếu một đối tượng được tạo bằng hằng đối tượng v&agrave; nếu một biến được x&aacute;c định với gi&aacute; trị đối tượng đ&oacute;, th&igrave; bất kỳ thay đổi n&agrave;o trong gi&aacute; trị biến sẽ thay đổi đối tượng ban đầu.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sv3 = { &nbsp;&nbsp;&nbsp; ten: 'Thanh', &nbsp;&nbsp;&nbsp; ID: 30, &nbsp;&nbsp;&nbsp; phuong_thuc: function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ocirc;i l&agrave; sinh vi&ecirc;n"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("T&ecirc;n t&ocirc;i l&agrave;: " + this.ten); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("ID của t&ocirc;i l&agrave;: " + this.ID); &nbsp;&nbsp;&nbsp; } } console.log(sv3.ten); let sv2 = sv3; sv2.ten = "Nam"; console.log(sv3.ten);</pre> <p>Kết quả:</p> <pre>Thanh Nam</pre> <p>Khi một đối tượng được tạo với một hằng đối tượng, bất kỳ biến đối tượng n&agrave;o tr&iacute;ch xuất từ đối tượng đ&oacute; sẽ hoạt động như một bản sao của đối tượng ban đầu. Do đ&oacute;, bất kỳ thay đổi n&agrave;o ta thực hiện tr&ecirc;n đối tượng n&agrave;y cũng sẽ phản &aacute;nh lại trong đối tượng kia.</p> <h2>Th&ecirc;m thuộc t&iacute;nh v&agrave; phương thức v&agrave;o trong một đối tượng</h2> <p>Ta c&oacute; thể th&ecirc;m thuộc t&iacute;nh hoặc phương thức trong một đối tượng như sau.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function sinh_vien () { &nbsp;&nbsp;&nbsp; this.ID = 23 } let sv1 = new sinh_vien(); let sv2 = new sinh_vien(); sv1.ten = 'Nam'; sv2.ten = 'Thanh'; console.log(sv1.ten); console.log(sv2.ten);</pre> <p>Kết quả:</p> <pre>Nam Thanh</pre> <p>Trong v&iacute; dụ tr&ecirc;n, một thuộc t&iacute;nh mới được th&ecirc;m v&agrave;o đối tượng sv1 v&agrave; sv2.</p> <h2>Prototype của đối tượng</h2> <p>Ta cũng c&oacute; thể th&ecirc;m c&aacute;c thuộc t&iacute;nh v&agrave; phương thức v&agrave;o một h&agrave;m khởi tạo bằng c&aacute;ch sử dụng <code class="EnlighterJSRAW" data-enlighter-language="generic">prototype</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function sinh_vien () { &nbsp;&nbsp;&nbsp; this.age = 23 } let sv1 = new sinh_vien(); let sv2 = new sinh_vien(); sinh_vien.prototype.truong_hoc = 'Dai hoc Luat'; console.log(sv1.truong_hoc); console.log(sv2.truong_hoc);</pre> <p>Kết quả:</p> <pre>Dai hoc Luat Dai hoc Luat</pre> <h2>C&aacute;c h&agrave;m tạo được t&iacute;ch hợp sẵn trong JavaScript</h2> <p>JavaScript bao gồm c&aacute;c h&agrave;m tạo được x&acirc;y dựng sẵn.</p> <p>Một số trong số đ&oacute; bao gồm như sau.</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">let doi_tuong = new Object(); let chuoi_ky_tu = new String(); let gia_tri = new Number(); let bool = new Boolean();</pre> <p>Trong JavaScript, chuỗi k&yacute; tự cũng c&oacute; thể được tạo dưới dạng đối tượng bằng c&aacute;ch như sau.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const ten = new String ('Nam'); console.log(ten);</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: N&ecirc;n sử dụng c&aacute;c kiểu dữ liệu căn bản v&agrave; tạo ch&uacute;ng theo c&aacute;ch b&igrave;nh thường, chẳng hạn như const ten = 'Nam' ; const ID = 23;</span></strong></p> <p>Ta kh&ocirc;ng n&ecirc;n khai b&aacute;o chuỗi, số v&agrave; gi&aacute; trị boolean ở dạng c&aacute;c đối tượng v&igrave; ch&uacute;ng sẽ l&agrave;m chậm chương tr&igrave;nh.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Trong JavaScript, từ kh&oacute;a class được giới thiệu trong ES6 (ES2015) cũng cho ph&eacute;p tạo c&aacute;c đối tượng. C&aacute;c lớp tương tự như c&aacute;c h&agrave;m khởi tạo trong Javascript.</span></strong></p> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về h&agrave;m tạo 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>