Object trong javascript

Object là khỉ gì?

Ai từng học qua môn Lập trình hướng đối tượng đều biết đến các khái niệm Class và Object (Có thể xem lại ở đây:http://www.qhonline.info/php-nang-cao/57/lap-trinh-huong-doi-tuong-co-ban-ve-nhung-khai-niem.html). Tuy nhiên, trong JavaScript không có Class mà chỉ có Object, do đó sẽ khiến một số bạn cảm thấy khó hiểu (Đấy, mình đã nói bao nhiêu lần là js nó sida rồi mà).

Trong các ngôn ngữ OOP như C++, Java, C#, … Có thể tạm hiểu Class chính là cái khung, còn Object là vật thể tạo ra dựa vào cái khung đó. Js không có class, ta có thể khởi tạo 1 object mà không cần xác định class của nó, có thể hiểu toàn bộ object đều có class chung là Object.

Ta có thể hiểu một object là một tập hợp các trường dữ liệu (property) và các hàm (method). Như ví dụ dưới đây, object Student có 2 trường là firstName và lastName, có hàm showName

var person = {
  firstName: 'Hoang',
  lastName: 'Pham',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

Khởi tạo object thế éo nào

Trong một số ngôn ngữ khác, để khởi tạo object, ta dùng từ khóa new + tên class. Tuy nhiên, do trong JavaScript không có khái niệm class, ta có thể tạo object theo 1 trong 2 cách sau. Cách khởi tạo object bằng Object Literal thường được sử dụng nhiều hơn.

// Cách 1 : Object literal
// Khai báo toàn bộ các trường và hàm
var person = {
  firstName: 'Hoang',
  lastName: 'Pham',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

// Cách 2 : Object constructor
// Cách 1 : Object literal
// Khai báo toàn bộ các trường và hàm
var person = {
  firstName: 'Hoang',
  lastName: 'Pham',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

// Cách 2 : Object constructor
var psn = new Object();
psn.firstName = 'Hoang';
psn.lastName = 'Pham';
psn.showName = function() {
    console.log(this.firstName + ' ' + this.lastName);
  };

Với các ứng dụng đơn giản, ta có thể tạm dùng 2 cách này. Tuy nhiên, với một số bài toán phức tạp hơn, nếu dùng object literal mỗi lần khởi tạo object sẽ khiến code dài và trùng lặp (Lần nào cũng phải khai báo lại các property và method). Để giải quyết vấn đề này, người ta sử dụng một pattern gọi là Constructor pattern. Một function sẽ đóng vai trò constructor để khởi tạo object (Cách này na ná khai báo class trong các ngôn ngữ khác).

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.showName = function() {
     console.log(this.firstName + ' ' + this.lastName);
  };
}

// Khi muốn tạo object person chỉ cần gọi constructor
var psn1 = new Person('Hoang', 'Pham');
var psn2 = new Person('Hoang', 'Nguyen');

Một cách khác cũng hay được sử dụng đó là dùng prototype (Mình sẽ nói kĩ hơn về prototype trong những bài sau), nhưng mình thấy đa phần người ta sử dụng Constructor pattern nhiều hơn.

function Person() {}

Person.prototype.firstName = 'Hoang';
Person.prototype.lastName = 'Pham';
Person.prototype.showName = function() {
     console.log(this.firstName + ' ' + this.lastName);
};

// Object được tạo sẽ có sẵn các trường firstName, lastName
// và hàm showName
var psn1 = new Person();
console.log(psn1.firstName); //Hoang
psn1.showName; //Hoang Pham

1. Truy xuất một trường/hàm của object:

Để truy xuất một trường/hàm của object, ta có thể dùng dấu . (dot notation) và dấu [] (bracket notation). Dot notation thường được sử dụng nhiều hơn, nhưng bracket notation có thể làm được nhiều trò hay hơn.

var person = {
  firstName: 'Hoang',
  lastName: 'Pham',
  50: 'Hi', // Property có tên là số, không dùng dotNotation được
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

console.log(person.firstName); // Hoang
console.log(person['firstName']); // Hoang

console.log(person.50); // Bị lỗi
console.log(person['50']); // Hi

console.log(person.showName()); // Hoang Pham
console.log(person['showName']()); // Hoang Pham

Để duyệt qua toàn bộ các trường của một object, ta chỉ cần dùng hàm for đơn giản

var person = {
  firstName: 'Hoang',
  lastName: 'Pham',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

for(var prop in person) {
  console.log(prop); // firstName, lastName, showName
}

2. Thêm/Xóa một trường/hàm của object

Với các ngôn ngữ static typing như C#, Java, một object được khởi tạo dựa trên class, do đó chúng luôn có các trường và hàm cố định. Tuy nhiên, do JavaScript là ngôn ngữ dynamic typing, ta có thể dễ dàng thêm/xóa các trường trong code

var person = {
  firstName: 'Hoang',
  lastName: 'Pham',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

delete person.lastName; // Xóa trường lastName
person.lName = 'Just adding'; // Thêm trường lName

console.log(person.lastName); // undefined
console.log(person.lName); // Just adding

3. Serialize và deserialize

Để giao tiếp với server, JavaScript thường submit dữ liệu dưới dạng pair-value (thông qua form) hoặc JSON. Do đó, javascript hỗ trợ sẵn việc chuyển object sang chuỗi JSON và ngược lại

var person = {
  firstName: 'Hoang',
  lastName: 'Pham',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

// Serialize sẽ làm mất method, chỉ giữ các property
JSON.stringify(person); // '{"firstName":"Hoang","lastName":"Pham"}'

var jsonString = '{"firstName":"Hoang","lastName":"Pham"}';
var psn = JSON.parse(jsonString); // Chuyển string thành object
console.log(psn.firstName); // Hoang
console.log(psn.lastName); // Pham

Archive