Từ khóa new trong JavaScript

Từ khóa new trong JavaScript

Chúng ta đã thấy trong bài viết về Object, một đối tượng có thể được tạo với từ khóa new. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về các bước nó thực hiện để tạo một đối tượng.

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

var myObj = new myFunc();
myObj.x;

– Trong ví dụ trên, chúng ta đã tạo ra một đối tượng myObj từ myFunc bằng từ khóa new. myFunc() này được gọi là một hàm dựng/hàm tạo (constructor function). Từ khóa new xây dựng và trả về một đối tượng (instance) của constructor function.

– Từ khóa new thực hiện 4 nhiệm vụ sau:

1. Nó tạo ra đối tượng rỗng (empty object) mới, ví dụ: obj = {};
2. Nó set thuộc tính invisible “prototype” của empty object mới đó là thuộc tính “prototype” có thể nhìn thấy (visible) và truy cập được (accessible) cho constructor function. (Mỗi function đều có thuộc tính “prototype” có thể nhìn thấy (visible), trong khi mọi object đều có thuộc tính “prototype” không thể nhìn thấy (invisible)).
3. Nó liên kết (binds) property hoặc function được khai báo với từ khóa this cho đối tượng mới.
4. Nó trả về đối tượng mới được tạo ra, trừ khi constructor function trả về một non-primitive value (custom JavaScript object). Nếu constructor function không có câu lệnh return thì trình biên dịch sẽ tự động chèn ngầm dòng “return this;” ở cuối hàm. Nếu constructor function trả về một giá trị nguyên thủy (primitive value) thì việc tự động chèn ngầm này sẽ bị bỏ qua.

– Cùng xem cách từ khóa new 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;

// Tạo đối tượng
var obj1 = new MyFunc();

obj1.x;	// 100
obj1.y;	// 200

– Bây giờ, hãy xem điều gì sẽ xảy ra khi bạn tạo một object (instance) của MyFunc() bằng cách sử dụng từ khóa new:

– Hình dưới đây minh họa cho quá trình tạo đối tượng ở trên:

– Từ khóa new sẽ bỏ qua câu lệnh return, trả về giá trị nguyên thủy (primitive value).

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

var myObj = new myFunc();

myObj.x;	// 100

– Nếu hàm trả về một non-primitive value (custom object), thì từ khóa new không thực hiện 4 tác vụ nêu trên:

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

var myObj = new myFunc();

myObj.x;	// undefined

– Do đó, từ khóa new xây dựng đối tượng (object) của một hàm (function) trong JavaScript.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!