• Skip to primary navigation
  • Skip to main content

In JS We Trust

trung tâm giáo dục thường xuyên javascript: youtube.com/hoccoban

  • giới thiệu
  • js cơ bản
  • bài tập
  • interview
  • tài nguyên

6 ways to create object in JavaScript

by Vuong Nguyen
January 9, 2019December 30, 2019Filed under:
  • js cơ bản

Trong bài về object trong JavaScript, chúng ta biết rằng ngoài object tạo với các constructor dựng sẵn như String, Number, Boolean…, chẳng hạn:

let x = new String("hello"); 

// Chú ý: Cách này không được khuyến cáo, ta nên dùng cách dưới như khi khai báo y;

let y = "hello";

typeof x// object

typeof y //string // y vẫn kế thừa các thuộc tính và phương thức như khi khai dạng object như x.

Thông thường, ta có 6 cách sau để tạo object riêng trong JavaScript.

1) Cách 1: object literal


let x = {};

x này sẽ có __proto__ trỏ tới Object.prototype tức nó sẽ kế thừa trực tiếp các property hoặc method từ Object.

2. Cách 2, new Object;

 
let x = new Object(); 

Cách này cho kết quả như cách 1, không khuyến khích dùng.

3. Cách 3: Object.create

Đây cũng là một trong số các hình thức kế thừa giữa 2 object. Ví dụ:

 
let x = {name: "Vượng"}; 
let y = Object.create(x); 
y.name; // Vượng -> y sẽ kế thừa name của x. 
let z = Object.create(y); // z kế thừa từ x z.name; // "Vượng" 

Quan trọng: let x = Object.create(null).

Đây là cách tạo object duy nhất mà x không có link tới bất cứ prototype trong Javascript, do đó sẽ không hề có method hay property sẵn có nào. Một object rỗng thực sự :-), thậm chí, còn không có cả thuộc tính __proto__. Tất nhiên, vì nó không có link tới bất kì object nào cấp cao hơn nên không có __proto__ là đương nhiên.

4. Cách 4: Function constructor

Đây là cách quan trọng nhất và thường dùng nhất trong ES5, từ ES6, ta có thể dùng cách tạo class, cho dù class trong JS thực chất chỉ là một dạng cải tiến syntax.

Trong ví dụ dưới, Foo là một hàm constructor (hàm đóng vai trò constructor thường viết theo PascalCase, nếu hàm bình thường sẽ dùng camelCase). Hàm Foo được gọi thông thường Foo(1), hoặc trở thành constructor khi viết foo = new Foo(2). Khi đó Foo đóng vai một dạng “class”, theo tư duy OOP của PHP hay Java.

So sánh giữa cách Function constructor và {}

So sánh kế thừa giữa 2 cách.

Một so sánh khác giữa cách {} và function constructor. Chú ý:

  1. Nếu tạo object bằng {}, kế thừa giữa các object sẽ dùng Object.create
  2. Nếu tạo object qua function constructor, các object sẽ được mở rộng qua chính Foo.prototype của function constructor. Chúng ta cũng có thể dùng object.__proto__ vì nếu Foo là constructor và foo là object tạo với từ khóa “new” thì:

foo.__proto__ === Foo.prototype //true

5. Cách 5: Anonymous function

“Function” (viết hoa) và “function” hoàn toàn khác nhau :-(. Xem bảng sau:

Minh họa:

Minh họa tiếp theo:

6. Cách 6: Class constructor (Từ ES6)

Từ ES6, “class” đã có mặt trên JS. Chú ý typeof class vẫn là “function”.

So sánh giữa kế thừa với Function constructor và class-based constructor:

Tham khảo thêm slide khá cool sau. Trong slide này đề cập 3 cách tạo object.

Javascript under the hood 2 from Thang Tran Duc

Tham khảo thêm video hữu dụng phía dưới:

Rất dễ hiểu: http://www.objectplayground.com/

Post navigation

Previous Post Kế thừa Prototype ngang và dọc
Next Post testing object and prototype

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2021 · Milan Pro on Genesis Framework · WordPress · Log in