Các cách tạo đối tượng trong JavaScript

Chào các bạn, Trong JavaScript ta có muôn vàn cách tạo ra 1 object, trong bài này chúng ta sẽ tìm hiểu về các kiểu tạo object này.

Kiểu đầu tiên tôi muốn giới thiệu đó là Object Literals , 1 kiểu tạo đối tượng không class, không template, không prototype, chỉ cần method và data Ví dụ:

var o = {
  x: 42,
  y: 3.14,
  f: function() {},
  g: function() {}
};

Nhưng nó có 1 nhược điẻm là nếu bạn muốn tạo 1 đối tượng cùng loại ở 1 nơi khác, chúng ta lại phải copy-pase object với các thuộc tính và method và tiến hành khởi tạo chúng. Điều này là không tốt, vì chúng ta muốn tạo ra 1 nhóm objects thay vì chỉ 1 object cụ thể.

Tiếp theo chúng ta đi đến tìm hiểu về factory function. Thì hiểu đơn giản thì đây là 1 cách đơn giản để tạo ra 1 gia đình các đối tượng, trong đó các đối tượng này cùng chia sẻ 1 cấu trúc, inteface và implementation Ví dụ:

function thing() {
  return {
    x: 42,
    y: 3.14,
    f: function() {},
    g: function() {}
  };
}

var o = thing();

Nhưng có 1 nhựơc điểm là với cách tạo này thì có thể gây ra phồng bộ nhớ. Bởi vì mỗi đối tượng có chứa bản sao của riêng nó.Lý tưởng nhất là chúng ta muốn đối tượng object có thể chia sẻ, tái sử dụng

JavaScript cung cấp cơ chế tích sẵn cho việc share dữ liệ object, được gọi là prototype chain. Khi đó chúng ta có thể sử dụng và thay đổi các chức năng cho factory function, để mỗi dữ liẹu được tạo ra chưa dữ liệu duy nhất và ủy thác tất cả các yêu cầu thuộc tính khách cho một đối tượng chia sẻ duy nhất Ví dụ:

var thingPrototype = {
  f: function() {},
  g: function() {}
};

function thing() {
  var o = Object.create(thingPrototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

Thực tế đây là 1 common pattern đã được support. Vì vậy chúng ta không cần tạo ra 1 own shared object (prototype object), thay vào đó sử dụng prototype object cho việc tạo đối tượng này:

thing.prototype.f = function() {};
thing.prototype.g = function() {};

function thing() {
  var o = Object.create(thing.prototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

Điều này có 1 hạn chế là gây ra sự lặp lại code. Dòng đầu tiên và dòng cuối cùng của chức năng "thing" đều bị lặp lại.

Chúng ta có thể loại bỏ sự lặp lại code trên bẳng cách move chúng vào trong own function. Đây là cách tạo object nguyên mẫu cho các object nguyên mẫu khác. sau đó gọi hàm với đối tượng vừa tạo ra như đối số và cuối cùng trả về đối tượng

function create(fn) {
  var o = Object.create(fn.prototype);

  fn.call(o);

  return o;
}

// ...

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = create(Thing);

Và thực tế thì ta có thể đơn giản hóa code trên bằng cách loại bỏ việc "create" bằng "new" object:

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = new Thing();

Một cách khác cho việc tạo ra 1 object mới bằng 1 cú pháp rất clean là:

class Thing {
  constructor() {
    this.x = 42;
    this.y = 3.14;
  }

  f() {}
  g() {}
}

var o = new Thing();

Trên đây là các cách mà chúng ta có thể tạo mới 1 object trong JavaScipt. Về cá nhân thì tôi prefer việc tạo theo class syntax của ES6. Nó khá đơn giản, gọn nhẹ và dễ hiểu. Thanks for watching!!!