Trong hướng dẫn này, mình sẽ giúp bạn tìm hiểu về Constructor trong JavaScript và cách sử dụng từ khóa new để tạo một đối tượng. [Và cả cách không sử dụng từ khóa new]
1. Giới thiệu về hàm Constructor trong JavaScript
Trong hướng dẫn về các Object trong JavaScript, bạn đã học cách sử dụng cú pháp [theo nghĩa đen] của đối tượng để tạo một đối tượng mới:
//Tạomộtđốitượng letstudent={ name:'NgọcAnh', age:18 }
Trong thực tế, bạn thường cần tạo nhiều đối tượng giống nhau như một danh sách sinh viên.
Để làm điều này, bạn có thể sử dụng một hàm constructor [hàm khởi tạo] để xác định một kiểu tùy chỉnh và toán tử mới để tạo nhiều đối tượng từ kiểu này.
Về mặt kỹ thuật, một hàm constructor trong JavaScript là một hàm thông thường với quy ước sau:
- Tên của một hàm khởi tạo bắt đầu bằng một chữ cái viết HOAnhư Student, Document, v.v.
- Một hàm khởi tạo chỉ nên được gọi với toán tử new.
> Lưu ý: Phiển bản ES6của JavaScript giới thiệu từ khóa class cho phép bạn định nghĩa một kiểu tùy chỉnh. Tuy nhiên, class cũng chỉ là cú pháp trên các hàm khởi tạo với một số cải tiến.
Ví dụ sau định nghĩa một hàm khởi tạo được gọi là Student:
//Hàmconstructor functionStudent[name,age]{ this.name=name; this.age=age; }
Như bạn có thể thấy, Student giống như một hàm thông thường ngoại trừ tên của nó bắt đầu bằng chữ S viết hoa.
Để tạo một phiên bản mới của Student, bạn sử dụng toán tử new:
letstudent=newStudent['NgọcAnh',18];
Về cơ bản, nhà điều hành mới thực hiện những việc sau: - Tạo một đối tượng trống mới và gán nó cho this.
- Gán các đối số 'Ngọc Anh' và 18cho các thuộc tính name và age
- Trả lại giá trị this.
Nó tương đương về mặt chức năng như sau:
//Hàmconstructor functionStudent[name,age]{
//this={};
//Thêmthuộctínhchothis this.name=name; this.age=age;
//returnthis; }
Và câu lệnh này:
//TạomộtđốitượngmớitừStudent //vàgángiátrịkhởitạochonó letstudent=newStudent['NgọcAnh',18];
Thì tương đương với:
letstudent={ name:'NgọcAnh', age:18 }
Tuy nhiên, hàm hàm constructor Student này cho phép bạn tạo nhiều đối tượng giống nhau. Ví dụ:
//Tạomớiđốitượng1 letstudent1=newStudent['NgọcAnh',18]; //Tạomớiđốitượng2 letstudent2=newStudent['VũHà',20];
> Tham khảo: Constructor trong Java
2. Thêm phương thức vào hàm constructor trong JavaScript
Một đối tượng có thể có các phương thức thao tác với dữ liệu của nó. Để thêm một phương thức vào một đối tượng được tạo thông qua constructor, bạn có thể sử dụng từ khóa this. Ví dụ:
//Hàmconstructor functionStudent[name,age]{
//Thêmthuộctínhchothis this.name=name; this.age=age;
//Thêmphươngthức this.getInfor=function[]{ returnthis.name+""+this.age+"tuổi"; }; }
Bây giờ, bạn có thể tạo một đối tượng mới từ Student và gọi phương thức getInfor[]:
letstudent=newStudent['NgọcAnh',18]; console.log[student.getInfor[]];
Kết quả:
Ngọc Anh 18 tuổi
Vấn đề ở đây là khi bạn tạo nhiều đối tượng từ Student, this.getInfor[] sẽ bị lặp lại nhiều lần.
Do đó, đây không phải là cách quản lý bộ nhớ hiệu quả.
Để giải quyết vấn đề này, bạn có thể sử dụng Prototype để tất cả các đối tượng của một kiểu tùy chỉnh có thể chia sẻ cùng một phương thức.
return từ hàm Constructor
Thông thường, một hàm constructor được return ngầm định giá trị this được thiết lập cho đối tượng mới được tạo.
Nhưng nếu nó có câu lệnh trả về, thì đây là quy tắc của nó:
- Nếu return được gọi với một đối tượng, hàm constructor sẽ trả về đối tượng đó thay vì đối tượng this.
- Nếu return được gọi với một giá trị khác với một đối tượng, nó sẽ bị bỏ qua.
3. Gọi constructor mà không có từ khóa new
Có thể gọi một hàm tạo mà không có từ khóa new như sau:
letstudent=Student['NgọcAnh',18];
Trong trường hợp này, Student chỉ thực thi giống như một hàm thông thường. Do đó, hàm this bên trong hàm Student không liên kết với biến student mà là đối tượng toàn cục.
Nếu bạn cố gắng truy cập thuộc tính name hoặc age, bạn sẽ gặp lỗi:
console.log[student.name];
Kết quả:
error: Cannot read property 'name' of undefined
Tương tự, bạn không thể truy cập phương thức getInfor[] vì nó bị ràng buộc với đối tượng toàn cục.
student.getInfor[];
Lỗi:
error: Cannot read property 'getInfor' of undefined
Vì thế, để ngăn một hàm constructor được gọi mà không có từ khóa new, ES6 đã giới thiệu thuộc tính new.target.
Nếu một hàm constructor được gọi với từ khóa new, new.target trả về một tham chiếu đến hàm. Nếu không, nó trả về undefined.
Hãy hiển thị giá trị của new.target cho console bên trong hàm Student:
//Hàmconstructor functionStudent[name,age]{
console.log[new.target];
//Thêmthuộctínhchothis this.name=name; this.age=age;
//Thêmphươngthức this.getInfor=function[]{ returnthis.name+""+this.age+"tuổi"; }; }
Bây giờ, chúng ta lại thử tạo một đối tượng mới từ Student nhưng không sử dụng từ khóa new.
letstudent=Student['NgọcAnh',18];
Kết quả nhận được trong console:
undefined
Tuy nhiên, nếu sử dụng new thì nó trả về một tham chiếu đến hàm Student:
letstudent=newStudent['NgọcAnh',18];
Trong console:
function Student....
Và bằng cách tận dụng new.target, bạn có thể buộc người dùng sử dụng constructor phải gọi nó bằng từ khóa new.
Nếu không, hãy ném ra một lỗi:
//Hàmconstructor functionStudent[name,age]{
if[!new.target]{ throwError["Khôngthểgọimàthiếu'new'"]; }
//Thêmthuộctínhchothis this.name=name; this.age=age;
//Thêmphươngthức this.getInfor=function[]{ returnthis.name+""+this.age+"tuổi"; }; }
Ngoài ra, bạn có thể làm cho cú pháp linh hoạt hơn bằng cách tự tạo một đối tượng Student mới nếu người dùng không sử dụng từ khóa new:
//Hàmconstructor functionStudent[name,age]{
if[!new.target]{ returnnewStudent[name,age]; }
//Thêmthuộctínhchothis this.name=name; this.age=age;
//Thêmphươngthức this.getInfor=function[]{ returnthis.name+""+this.age+"tuổi"; }; }
//Tạođốitượngmàkhôngcótừkhóanew letstudent=Student['NgọcAnh',18];
//Lấy thông tin console.log[student.getInfor[]];
Kết quả:
Ngọc Anh 18 tuổi
Cách này thường được sử dụng trong các thư viện hoặc framework bạn sẽ thường gặp nếu như học React / Angular / Vue bởi vì nólàm cho cú pháp linh hoạt hơn.
Tổng kết
Như vậy là trong bài viết này mình đã giúp bạn tìm hiểu về hàm Constructor trong JavaScript và biết cách sử dụng nó để tạo ra nhiều đối tượng khác nhau.
Hi vọng giúp được bạn trong quá trình học JavaScript của bạn.
> Nếu bạn yêu thích JS và muốn đi chuyên sâu về nó thì đừng quên tham gia KHÓA HỌC FRONT END [với React.js] tại NIIT - ICT Hà Nội nhé. Học với dự án + Cam kết hỗ trợ giới thiệu việc làm / địa chỉ thực tập.
--- HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI Học Lập trình chất lượng cao [Since 2002]. Học thực tế + Tuyển dụng ngay! Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội SĐT: 02435574074 - 0383.180086 Email: Website://niithanoi.edu.vn Fanpage: //facebook.com/NIIT.ICT/ #niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python