Các cách khác nhau để khởi tạo một đối tượng trong javascript

Trong bài này chúng ta sẽ học nhiều cách để tạo các đối tượng trong JavaScript như Object Literal, Constructor Function, Object. Tạo method và ES6 Class.

Tạo đối tượng trong Javascript với Object Literal

Một trong những cách dễ dàng nhất để tạo ra một đối tượng javascript là đối tượng literal, đơn giản chỉ định thuộc tính và giá trị bên trong dấu ngoặc nhọn như minh hoạ dưới đây

let bike = {name: 'SuperSport', maker:'Ducati', engine:'937cc'};

Property accessors

Các thuộc tính của một đối tượng javascript có thể được truy cập bằng ký hiệu chấm hoặc ký hiệu khung như thể hiện dưới đâ

let bike = {name: 'SuperSport', maker:'Ducati', engine:'937cc'};
console.log(bike.engine);     //Output: '937cc'
console.log(bike['maker']);   //Output: 'Ducati'

Thêm thuộc tinh vào object

Để thêm thuộc tính vào đối tượng đã tạo, không cần phải thay đổi ký tự hiện tại của đối tượng, thuộc tính có thể được thêm vào sau bằng dấu chấm như thể hiện dưới đây

let bike = {name: 'SuperSport', maker:'Ducati', engine:'937cc'};
bike.wheelType = 'Alloy';
console.log(bike.wheelType);   //Output: Alloy

Object method

Hành vi có thể được thêm vào đối tượng là tốt, hành vi là gì, nhưng các chức năng hoặc các phương pháp. Phương pháp có thể là một phần của đối tượng trong khi tạo hoặc có thể được thêm vào sau như các thuộc tính như được hiển thị bên dưới

let bike = {
   name: 'SuperSport', 
   maker:'Ducati', 
   start: function() {
       console.log('Starting the engine...');
   }
};
bike.start();   //Output: Starting the engine...
/* Adding method stop() later to the object */
bike.stop = function() {
    console.log('Applying Brake...');  
}
bike.stop();    //Output: Applying Brake...

Tạo mội object trong javascript với Constructor

constructor cho phép tạo nhiều đối tượng có cùng thuộc tính như thể hiện dưới đây

function Vehicle(name, maker) {
   this.name = name;
   this.maker = maker;
}
let car1 = new Vehicle(’Fiesta’, 'Ford’);
let car2 = new Vehicle(’Santa Fe’, 'Hyundai’)
console.log(car1.name);    //Output: Fiesta
console.log(car2.name);    //Output: Santa Fe

Mỗi chức năng, trong khi thực hiện có một tham chiếu đến bối cảnh thực hiện hiện tại của nó được gọi this

Tạo mội object trong javascript với Create

Object.create () được phép tạo đối tượng với các tùy chọn khác như cấu hình, liệt kê, ghi và giá trị được hiển thị dưới đây

let car = Object.create(Object.prototype,
  {
    name:{
      value: 'Fiesta',
      configurable: true,
      writable: true,
      enumerable: false
    },
    maker:{
      value: 'Ford',
      configurable: true,
      writable: true,
      enumerable: true
    }
  });
console.log(car.name)    //Output: Fiesta

• Mỗi một đối tượng được xây dựng bởi hàm dựng sẵn.
• Một hàm xây dựng làm cho một đối tượng liên kết với nguyên mẫu riêng của nó
• Prototype là một liên kết tùy ý giữa hàm dựng hàm và đối tượng.

Tạo mội object trong javascript với ES6 classes

ECMAScript 6 (phiên bản mới hơn của javascript) hỗ trợ khái niệm lớp như bất kỳ ngôn ngữ lập trình tĩnh hoặc đối tượng tĩnh khác. Vì vậy, đối tượng có thể được tạo ra trong một lớp học trong javascript cũng như hiển thị dưới đây

class Vehicle {
  constructor(name, maker, engine) {
    this.name = name;
    this.maker =  maker;
    this.engine = engine;
  }
}
let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc');
let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');
console.log(bike1.name);    //Output: Hayabusa
console.log(bike2.maker);   //Output: Kawasaki

Các phương thức có thể là một phần của lớp trong khi khai báo hoặc có thể được thêm vào sau đối tượng đã tạo như thể hiện dưới đây

class Vehicle {
  constructor(name, maker, engine) {
    this.name = name;
    this.maker =  maker;
    this.engine = engine;
  }
  start() {
    console.log("Starting...");
  }
}
let bike = new Vehicle('Hayabusa', 'Suzuki', '1340cc');
bike.start();    //Output: Starting...
/* Adding method brake() later to the created object */
bike.brake = function() {
  console.log("Applying Brake...");
}
bike.brake();    //Output: Applying Brake...

Kết

Chúng ta đã học được về Object literal, cách phổ biến nhất để tạo ra đối tượng JavaScript, sau đó hiểu hàm dựng tạo giúp tạo nhiều đối tượng có cùng thuộc tính và cuối cùng là cách mới tạo đối tượng javascript với ES6.

Cám ơn bạn đã đọc.

Nguồn: codeburst.io.