Constructor Function trong JavaScript

Constructor Function trong JavaScript

Tóm tắt: trong hướng dẫn này, bạn sẽ tìm hiểu về hàm tạo JavaScript và cách sử dụng từ khóa mới để tạo đối tượng.

Các bài viết liên quan:

Constructor Function trong JavaScript

Trong hướng dẫn về các đối tượng 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:

let person = {
    firstName: 'John',// properties firstName
    lastName: 'Doe'// properties lastName
};

Trong thực tế, bạn thường cần tạo nhiều đối tượng giống nhau như danh sách người.

Để làm điều này, bạn có thể sử dụng một hàm Constructor để 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 là một hàm thông thường với quy ước sau:

Tên của một hàm Constructor bắt đầu bằng một chữ cái viết hoa như Person, Document, v.v.

Một hàm Constructor chỉ nên được gọi với toán tử mới.

Lưu ý rằng ES6 giới thiệu từ khóa lớp cho phép bạn xác định một kiểu tùy chỉnh. Và các lớp chỉ là đường cú pháp trên các hàm Constructor với một số cải tiến.

Ví dụ sau định nghĩa một hàm Constructor được gọi là Person:

function Person(firstName, lastName) {
    this.firstName = firstName;// setter
    this.lastName = lastName;// setter
}

Như bạn có thể thấy, Person 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ữ P viết hoa.

Để tạo một phiên bản mới của Person, bạn sử dụng toán tử mới:

let person = new Person('John','Doe');

Về cơ bản, nhà operator new 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 đối tượng này.
  • Gán các đối số ‘John’ và ‘Doe’ cho các thuộc tính firstName và lastName.
  • Trả lại giá trị này.

Nó tương đương về mặt chức năng như sau:

function Person(firstName, lastName) {
    // con trỏ this

    // set giá trị properties
    this.firstName = firstName;
    this.lastName = lastName;

    // return this;
}

Do đó, câu lệnh sau:

let person = new Person('John','Doe'); // gọi hàm constructor

Hoặc đoạn code sau:

let person = {
    firstName: 'John',//
    lastName: 'Doe'//
};

Tuy nhiên, hàm Constructor Person cho phép bạn tạo nhiều đối tượng giống nhau. Ví dụ:

let person1 = new Person('Jane','Doe')// tạo persion1
let person2 = new Person('James','Smith')// tạo persion2

Thêm phương thức vào các hàm Constructor JavaScript

Một đối tượng có thể có các phương thức thao tác 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 hàm Constructor, bạn có thể sử dụng từ khóa this. Ví dụ:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    this.getFullName = function () { // thêm function 
        return this.firstName + " " + this.lastName; // function trả về tên đầy đủ
    };
}

Bây giờ, bạn có thể tạo một đối tượng Person mới và gọi phương thức getFullName ():

let person = new Person("John", "Doe"); // tạo đối tượng person
console.log(person.getFullName()); // gọi hàm tên đầy đủ

Vấn đề với hàm Constructor là khi bạn tạo nhiều trường hợp của Person, this.getFullName () sẽ bị trùng lặp trong mọi trường hợp. Đây không phải là bộ nhớ hiệu quả.

Để giải quyết vấn đề này, bạn có thể sử dụng nguyên mẫu để tất cả các phiên bản của một loại tùy chỉnh có thể chia sẻ cùng một phương pháp.

Return các hàm Constructor

Thông thường, một hàm Constructor trả về ngầm định giá trị này đượ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:

  • 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 này.
  • 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.

Gọi một hàm tạo mà không có từ khóa mới

Có thể gọi một hàm tạo mà không có từ dùng toán tử New như sau:

let person = Person('John','Doe');

Trong trường hợp này, Person chỉ thực thi giống như một hàm thông thường. Do đó, hàm this bên trong hàm Person không liên kết với biến người mà là đối tượng toàn cục.

Nếu bạn cố gắng truy cập thuộc tính firstName hoặc lastName, bạn sẽ gặp lỗi:

console.log(person.firstName);

Lỗi:

TypeError: Cannot read property 'firstName' of undefined

Tương tự, bạn không thể truy cập phương thức getFullName () vì nó bị ràng buộc với đối tượng toàn cục.

person.getFullName();

Lỗi:

TypeError: Cannot read property 'getFullName' of undefined

Để ngăn một hàm Constructor được gọi mà không có toán tử 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ề không xác định.

Hãy thể hiện giá trị của new.target vào console bên trong object Person:

function Person(firstName, lastName) {
    console.log(new.target);

    this.firstName = firstName;
    this.lastName = lastName;

    this.getFullName = function () {
        return this.firstName + " " + this.lastName;
    };
}

Phần sau trả về không xác định vì hàm Constructor Person được gọi giống như một hàm thông thường:

let person = Person("John", "Doe");

Đầu ra:

undefined

Tuy nhiên, phần sau trả về một tham chiếu đến hàm Person vì nó được gọi với toán tử new:

let person = new Person("John", "Doe");

Đầu ra:

[Function: Person]

Bằng cách tận dụng new.target, bạn có thể buộc người dùng của hàm Constructor gọi nó bằng từ khóa mới. Và bạn có thể gặp lỗi nếu họ không làm như vậy:

function Person(firstName, lastName) {
    if (!new.target) {
      // quang lỗi nếu ko dùng từ new
        throw Error("Cannot be called without the new keyword");
    }
	// setter
    this.firstName = firstName;
    this.lastName = lastName;
}

Ngoài ra, bạn có thể làm cho cú pháp linh hoạt hơn bằng cách tạo một đối tượng Person mới nếu người dùng của hàm tạo không sử dụng từ khóa mới:

function Person(firstName, lastName) {
    if (!new.target) {
      // nếu không gọi new thì tạo đối tượng giúp người dùng
        return new Person(firstName, lastName);
    }
	//setter
    this.firstName = firstName;
    this.lastName = lastName;
}

let person = Person("John", "Doe");

console.log(person.firstName);

Mẫu này thường được sử dụng trong các thư viện và khuôn khổ JavaScript để làm cho cú pháp linh hoạt hơn.

Kết luận

Hàm Constructor JavaScript là một hàm thông thường được sử dụng để tạo nhiều đối tượng giống nhau.

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply