Object trong Javascript - những điều cần biết

Nếu bạn là một web developer, đã hoặc đang làm việc với Javascript (JS), khả năng cao bạn sẽ biết đến câu "Almost everything is an object". Trong JS, object là kiểu dữ liệu (data type) căn bản nhất và được sử dụng nhiều nhất.

Nhắc lại về data types trong JS.

JS có 5 kiểu dữ liệu nguyên thủy (primitive data type) gồm Number, String, Boolean, Undefined, Null, và 1 kiểu dữ liệu tham chiếu (reference data type) là Object. Object là tập hợp các dữ liệu nguyên thủy được lưu dưới dạng key-value. Mỗi item được gọi là property hoặc method (nếu item đó chứa 1 hàm). Ví dụ một object cơ bản:

var me = {
    name: 'John',
    age: 24
};

Như ví dụ trên, chúng ta thấy được 2 thuộc tính gồm "name", "age". Giá trị tương ứng gồm "John" (string), 24 (number). Để truy cập tới thuộc tính, chúng ra gọi:

console.log(me.name, "is", me.age, "years old"); // John is 24 years old

Tên thuộc tính có thể dùng số, ví dụ:

var ageStrength = {
    18: 'Strong',
    30: 'Moderate',
    50: 'Weak'
};

Tuy nhiên, để truy cập tới thuộc tính, chúng ra phải dùng ngoặc vuông (braket notation) thay vì dấu chấm (dot notation) như trên:

console.log(age.18); // error will be thrown
console.log(age[18]); // Strong

Aha, bạn có thấy cách truy cập giá trị này quen thuộc không. Giống hệt cách truy cập phần tử mảng nhỉ. Đúng vậy, suy ngược ra thì mảng trong JS cũng chính là obejct với property name mặc định bắt đầu từ 0.

Kiểu dữ liệu nguyên thủy (primitive data type) và kiểu dữ liệu tham chiếu (reference data type)

Sự khác nhau cơ bản giữa 2 kiểu dữ liệu:

• Primitive data type thì bất biến (immutable)
• Reference data type có thể biến đổi (mutable)

Ví dụ về primitive data type nhé:

var rose = 'red';
var tulipa = rose;
rose = 'black';
console.log(rose); // black 
console.log(tulipa); // red

Như các bạn thấy, mặc dù sau khi gán lại biến rose thành "black" thì biến tulipa vẫn giữ nguyên giá trị "red".

Ví dụ về reference data type:

var flower = {
    name: 'Rose'
};
var flower2 = flower;
flower.name = 'violet';
console.log(flower2.name); // violet
console.log(flower.name); // violet

Ở ví dụ trên, mặc dù chúng ta đã gán flower2 bằng flower, tuy nhiên flower không thực sự được lưu thành 1 bản copy mà flower2 chỉ tham chiếu đến flower. Do đó, khi flower bị thay đổi, flower2 cũng bị thay đổi. Đó chính là đặc tính mutable của Object trong JS.

Các cách khởi tạo object

1. Object literals.

Đây là cách khởi tạo rất phổ biến:

var emptyObj = {}; // initialize an empty object

// initialize a person with 4 properties
var person = {
    firstName: 'John';
    lastName: 'Doe',
    age: 24,
    greet: function() {
        console.log('Hello world');
    }
}

2. Object constructor

Cách khởi tạo này bạn sử dụng toán tử new để khởi tạo một object rỗng:

var dog = new Object();
dog.speech = 'bow-wow';
dog.apperance = 'cute';
dog.say = function() {
    console.log(this.speech);
}

Áp dụng object vào thực tiễn như thế nào?!

Giả sử bạn có một cửa hàng bán điện thoại di động. Với một trong 2 cách trên, dữ liệu thể hiện 1 chiếc điện thoại (trong ví dụ dưới là iphone 5) sẽ như sau:

var iphone5 = {
    os: 'ios',
    screenSize: '4-inch',
    camera: '5MP',
    getFullInfo: function() {
        console.log('This phone run on', this.os, 'with', this.screenSize, 'screen and', this.camera, 'camera');
    }
}

hoặc

var iphone5 = new Object();
iphone5.os = 'ios';
iphone5.screenSize = '4-inch';
iphone5.camera = '5MP';
iphone5.getFullInfo = function() {
    console.log('This phone run on', this.os, 'with', this.screenSize, 'screen and', this.camera, 'camera');
}

2 cách trên cũng ổn nhỉ. Nhưng chờ đã, bạn có hẳn một cửa hàng điện thoại, vậy thì để lưu một chiếc iPhone 6 thì sẽ thế nào, bạn không thể tiếp tục code lại được. Chúng ta sẽ cần giải pháp dùng lại. Có 2 cách phổ biến nhất để khở tạo object và dùng lại, đó là Constructor pattern và Prototype pattern.

Constructor pattern

function Phone (os, screenSize, camera) {
    this.os = os;
    this.screenSize = screenSize;
    this.camera = camera;
    this.getFullInfo = function() {
        console.log('This phone run on', this.os, 'with', this.screenSize, 'screen and', this.camera, 'camera');
    }
}

lúc này chúng ta có thể dễ dàng khởi tạo bao nhiêu điện thoại tùy thích:

var iphone5 = new Phone('ios', '4-inch', '5MP');
iphone5.getFullInfo(); // This phone run on ios with 4-inch screen and 5MP camera
var iphone6 = new Phone('ios', '4.7-inch', '8MP');
iphone6.getFullInfo(); // This phone run on ios with 4.7-inch screen and 8MP camera

Prototype pattern

function Phone (os, screenSize, camera) {
    this.os = os;
    this.screenSize = screenSize;
    this.camera = camera;
}
Phone.prototype.salePercentage = '10%';
Phone.prototype.getFullInfo = function() {
    console.log('This phone run on', this.os, 'with', this.screenSize, 'screen and', this.camera, 'camera');
    if (this.salePercentage) {
        console.log('This phone is current under', this.salePercentage, 'sale');
    }
}

Và cách dùng tương tự như constructor pattern:

var iphone6 = new Phone('ios', '4.7-inch', '8MP');
iphone6.getFullInfo(); 
// This phone run on ios with 4.7-inch screen and 8MP camera
// This phone is current under 10% sale

Đến đây hi vọng các bạn đã có cái nhìn cơ bản về Object trong javascript. Hẹn các bạn trong các bài tiếp theo.