Constructor trong JavaScript

Posted on Updated on by adminChuyên mục:Kiến thức Internet

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

Constructor trong JavaScript

Object trong JavaScriptTrong hướng dẫn về những, bạn đã học cách sử dụng cú pháp ( theo nghĩa đen ) của đối tượng người dùng để tạo một đối tượng người dùng mới :

// Tạo một đối tượng

Bạn đang đọc: Constructor trong JavaScript

let student = {

    name: ‘ Ngọc Anh ‘,

    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 khởi đầu bằng một vần âm viết HOA như 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 ES6

Ví dụ sau định nghĩa một hàm khởi tạo được gọi là Student:Ví dụ sau định nghĩa một hàm khởi tạo được gọi là


/ / Hàm constructor

function Student(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:


let student = new Student(‘ Ngọc Anh ‘, 18);
 

Về cơ bản, nhà quản lý mới thực thi 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à 18 cho các thuộc tính name và age

  • Trả lại giá trị this.

Nó tương tự về mặt tính năng như sau :


/ / Hàm constructor

function Student(name, age) {

    / / this = { } ;

    / / Thêm thuộc tính cho this

    this.name = name;

    this.age = age;

    / / return this ;

}
 

Và câu lệnh này :


/ / Tạo một đối tượng người tiêu dùng mới từ Student

/ / và gán giá trị khởi tạo cho nó

let student = new Student(‘ Ngọc Anh ‘, 18);
 

Thì tương tự với :


let student = {

    name: ‘ Ngọc Anh ‘,

    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ạo mới đối tượng người tiêu dùng 1

let student1 = new Student(‘ Ngọc Anh ‘, 18);

/ / Tạo mới đối tượng người dùng 2

let student2 = new Student(‘ Vũ Hà ‘, 20);
 

Constructor trong Java> Tham khảo :

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àm constructor

function Student(name, age) {

    / / Thêm thuộc tính cho this

    this.name = name;

    this.age = age;

    / / Thêm phương pháp

    this.getInfor = function () {

        return this.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():


let student = new Student(‘ Ngọc Anh ‘, 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:


let student = Student(‘ Ngọc Anh ‘, 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àm constructor

function Student(name, age) {

    console.log(new.target);

    / / Thêm thuộc tính cho this

    this.name = name;

    this.age = age;

    / / Thêm phương pháp

    this.getInfor = function () {

        return this.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.


let student = Student(‘ Ngọc Anh ‘, 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:


let student = new Student(‘ Ngọc Anh ‘, 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àm constructor

function Student(name, age) {

    if (!new.target) {

        throw Error(” Không thể gọi mà thiếu ‘ new ‘ “);

}

    / / Thêm thuộc tính cho this

    this.name = name;

    this.age = age;

    / / Thêm phương pháp

    this.getInfor = function () {

        return this.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àm constructor

function Student(name, age) {

    if (!new.target) {

        return new Student(name, age);

}

    / / Thêm thuộc tính cho this

    this.name = name;

    this.age = age;

    / / Thêm phương pháp

    this.getInfor = function () {

        return this.name + ” ” + this.age + ” tuổi “;

} ;
}

/ / Tạo đối tượng người tiêu dùng mà không có từ khóa new

let student = Student(‘ Ngọc Anh ‘, 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 tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP.HN

SĐT : 02435574074 – 0383.180086

E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

# niit # icthanoi # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp # java # php # python

admin