Từ khoá new trong JavaScript là gì?

Từ khoá new trong JavaScript là gì?

Anh NguyễnBạn nghĩ gì về bài viết này?

NỘI DUNG BÀI VIẾT

Trong bài viết này, chúng ta sẽ tìm hiểu về từ khoá new trong JavaScript.

Chúng ta đã thấy trong phần Đối tượng rằng một đối tượng có thể được tạo bằng từ khóa new trong JavaScript. Tại đây, bạn sẽ tìm hiểu về các bước mà nó thực hiện trong khi tạo một đối tượng.

Ví dụ

function MyFunc() {
    this.x = 100;
}

var obj1 = new MyFunc();
obj1.x;Code language: JavaScript (javascript)

Trong ví dụ trên, chúng ta đã tạo một đối tượng của MyFunc bằng cách sử dụng từ khóa new. MyFunc() này được gọi là một hàm khởi tạo. Vậy từ khoá new trong JavaScript là gì?

Từ khoá new trong JavaScript

Từ khóa new trong JavaScript tạo và trả về một đối tượng (instance) của một hàm tạo.

Từ khóa new trong JavaScript thực hiện bốn nhiệm vụ sau:

  1. Nó tạo ra đối tượng trống mới, ví dụ: obj = {};
  2. Nó đặt thuộc tính ‘prototype’ vô hình của đối tượng trống mới thành thuộc tính ‘prototype’ có thể nhìn thấy và có thể truy cập của hàm khởi tạo.
  3. Nó liên kết thuộc tính hoặc chức năng được khai báo với từ khóa này với đối tượng mới.
  4. Nó trả về đối tượng mới được tạo trừ khi hàm khởi tạo trả về giá trị không phải nguyên thủy (đối tượng JavaScript tùy chỉnh). Nếu hàm khởi tạo không bao gồm câu lệnh return thì trình biên dịch sẽ chèn ‘return this;’ ngầm định ở cuối hàm. Nếu hàm khởi tạo trả về một giá trị nguyên thủy thì nó sẽ bị bỏ qua.

Hãy xem cách từ khóa new trong JavaScript tạo một đối tượng bằng cách sử dụng ví dụ sau.

function MyFunc() {
    var myVar = 1;
    this.x = 100;
}

MyFunc.prototype.y = 200;

var obj1 = new MyFunc();
obj1.x; // 100
obj1.y; // 200Code language: JavaScript (javascript)

Hãy hiểu điều gì sẽ xảy ra khi bạn tạo một đối tượng (instance) của MyFunc() bằng cách sử dụng từ khóa new.

Trước hết, từ khóa new trong JavaScript tạo một đối tượng trống – {}.

Thứ hai, nó đặt thuộc tính (hoặc thuộc tính) ‘prototype’ vô hình của đối tượng trống này thành thuộc tính prototype của myFunc. Như bạn có thể thấy trong ví dụ trên, chúng tôi đã gán thuộc tính mới ‘y’ bằng MyFunc.prototype.y. Vì vậy, đối tượng rỗng mới cũng sẽ có thuộc tính prototype giống như MyFunc bao gồm thuộc tính y.

Trong bước thứ ba, nó liên kết tất cả các thuộc tính và chức năng được khai báo với từ khóa này với đối tượng rỗng mới. Ở đây, MyFunc chỉ bao gồm một thuộc tính x được khai báo với từ khóa này. Vì vậy, đối tượng rỗng mới bây giờ sẽ bao gồm thuộc tính x. MyFunc cũng bao gồm biến myVar không được khai báo với từ khóa này. Vì vậy, myVar sẽ không được đưa vào đối tượng mới.

Trong bước thứ tư và cuối cùng, nó sẽ trả về đối tượng mới được tạo này. MyFunc không bao gồm câu lệnh return nhưng trình biên dịch sẽ ngầm chèn ‘return this’ vào cuối.

Vì vậy, đối tượng của MyFunc sẽ được trả về bằng cách sử dụng từ khóa new trong JavaScript.

Hình sau minh họa quá trình trên.

Từ khoá new trong JavaScript là gì?

Từ khóa new bỏ qua câu lệnh trả về giá trị nguyên thủy.

function MyFunc() {
    this.x = 100;
    
    return 200;
}

var obj = new MyFunc();
alert(obj.x); // 100Code language: JavaScript (javascript)

Nếu hàm trả về giá trị không phải nguyên thủy thì từ khóa new không thực hiện 4 tác vụ trên.

function MyFunc() {
    this.x = 100;
               
    return { a: 123 };
}

var obj1 = new MyFunc();

alert(obj1.x); // undefinedCode language: JavaScript (javascript)

Do đó, từ khóa new trong JavaScript sẽ tạo ra một đối tượng của một hàm trong JavaScript.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận