new function trong javascript

Chào các bạn

Trong bài viết này mình sẽ hướng dẫn các bạn tạo một đối tượng bằng từ khóa new

Trong các baìa viết trước thì chúng ta hay tạo object như thế này

1let user = {
2    name: "User"
3}

Và trong bài viết này thì nó như thế này

1function User(name) {
2    this.name = name;
3}
4
5let user = new User("User"); // Tạo mới một user

Khi chúng ta new một chức năng. Nó thực hiện các bước như sau.

1. Tạo một đối tượng trống và gán cho this
2. Thêm thuộc tính tài sản vào this do chúng ta định nghĩa
3. Cuối cùng trả lại this

1function User(name) {
2    // this = {};     // Tạo đối tượng trống và gán vào this
3    this.name = name; // Thêm thuộc tính tài sản vào this
4    // return this
5}
6
7let user = new User("User"); // Tạo mới một user

Bây giờ chúng ta muốn tạo mới thêm một user khác thì chỉ cần làm như thế này.

1function User(name) {
2    this.name = name;  
3}
4
5let user = new User("User");        // Tạo mới một user
6let user1 = new User("User 1");     // Tạo mới thêm một user1 khác
7console.log(user.name);   // User
8console.log(user1.name); // User 1

Hoặc nếu thấy ít quá thì chúng ta có thể cho nó vào vòng lặp ...

1function User(name) {
2    this.name = name;
3}
4
5let arrUsers = []; // Tạo mảng chứa users
6for (let i = 0; i < 5; i++) {
7    arrUsers.push(new User(`User ${i}`));
8}
9
10console.log(arrUsers.length); // 5

Chúng ta có thể kiểm tra chức năng có được chạy bằng từ khóa new hay không bằng cách.

1function User(name) {
2    if(!new.target) {
3        console.log(new.target); // undefined
4    }
5    this.name = name;
6}
7
8let user = User("User");

Nếu mà chức năng không chạy với từ khóa new thì tài sản target sẽ là undefined

Nhờ vào đó mà chúng ta có thể tạo mới object chúng ta bằng new hoặc không có new.

1function User(name) {
2    if(!new.target) {
3        return new User(name);
4    }
5    this.name = name;
6}
7
8let user = User("User không có new");
9console.log(user.name);  // User không có new
10
11let user1 = new User("User có new");
12console.log(user1.name); // User có new

Lưu Ý: Nếu trong chức năng new mà trả về một object thì object đó được sử dụng thay cho this.

1function User(name) {
2    this.name = name;
3
4    return {
5        name: "Trả về object"
6    }
7}
8
9let user = new User("User");
10console.log(user.name);  // Trả về object

Còn nếu trả về không phải object thì this được sử dụng

1function User(name) {
2    this.name = name;
3
4    return "Trả về chuổi"
5}
6
7let user = new User("User");
8console.log(user.name);  // User

Còn cách thêm chức năng vào object thì như bài trước mình đã có nói.

1function User(name) {
2    this.name = name;
3    this.showName = function () {
4        console.log(this.name); // User
5    }
6}
7
8let user = new User("User");
9user.showName(); // Gọi chức năng

hoặc

1function User(name) {
2    this.name = name;
3}
4
5let user = new User("User");
6user.showName = function () { // Thêm chức năng vào đối tượng có tên biến là user
7    console.log(this.name); // User
8}
9
10user.showName(); // Gọi chức năng

Đó chỉ là ví dụ nhỏ. Vì có rất rất là nhiều cách. Từ từ lên cao các bạn sẽ thấy. Nhiều cái hay lắm

Tổng kết

Trong bài viết này mình đã nói thêm về cách tạo đối tượng mới bằng từ khóa new.

Các bạn có thể tham khảo thêm về nó tại đây new