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

Nếu bạn là một web lập trình viêneloper, đã hoặc đang làm việc với Javascript (JS), tiềm năng cao bạn sẽ biết đến câu "Almost everything is an object". Trong JS, object là kiểu data (data type) cơ bản nhất và được dùng nhiều nhất.

đề cập tới về data types trong JS.

JS có 5 kiểu data nguyên thủy (primitive data type) gồm Number, String, Boolean, Undefined, Null, và 1 kiểu data tham chiếu (reference data type) là Object.
Object là tập hợp các data 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, ta thấy được 2 thuộc tính gồm "name", "age". Giá trị tương ứng gồm "John" (string), 24 (number). Để vào web 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' }; 

mặc dù vậy, để vào web 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 vào web giá trị này thân quen không. Giống hệt cách vào web 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 khởi đầu từ 0.

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

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

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ù ta đã gán flower2 bằng flower, mặc dù vậy 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ị đổi khác, flower2 cũng bị đổi khác. Đó 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 construGiám đốc kỹ thuậtr

Cách khởi tạo này bạn 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 mobile. Với một trong 2 cách trên, data phô diễ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 vận chuyển tận nhàe lại được. ta sẽ cần phương án dùng lại.
Có 2 cách phổ biến nhất để khở tạo object và dùng lại, đó là ConstruGiám đốc kỹ thuậtr patternPrototype pattern.

ConstruGiám đốc kỹ thuậtr 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 ta có thể rất dễ 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 giống như như construGiám đốc kỹ thuậtr 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.

Nguồn viblo.asia