Tìm hiểu về Object (đối tượng) trong JavaScript

Object (đối tượng) trong JavaScript là kiểu dữ liệu quan trọng nhất và tạo thành các building block cho JavaScript hiện đại. Những object này khá khác với các kiểu dữ liệu nguyên thủy của JavaScript (Số, Chuỗi, Boolean, null, không xác định và biểu tượng) theo nghĩa là trong khi các kiểu dữ liệu nguyên thủy này đều lưu trữ một giá trị duy nhất cho mỗi kiểu (tùy thuộc vào loại của chúng).

• Các object phức tạp hơn và mỗi object có thể chứa bất kỳ sự kết hợp nào của các kiểu dữ liệu nguyên thủy này cũng như các kiểu dữ liệu tham chiếu.
• Một object, là một kiểu dữ liệu tham chiếu. Các biến được gán một giá trị tham chiếu sẽ được cung cấp một tham chiếu (reference) hoặc một con trỏ (pointer) tới giá trị đó. Tham chiếu hoặc con trỏ đó trỏ đến vị trí trong bộ nhớ nơi lưu trữ object. Các biến (variable) không thực sự lưu trữ giá trị.
• Nói một cách dễ hiểu, các object trong JavaScript có thể được định nghĩa là một tập hợp dữ liệu liên quan không có thứ tự, thuộc loại nguyên thủy hoặc tham chiếu, dưới dạng cặp “khóa: giá trị” (key-value pair). Các khóa này có thể là biến hoặc hàm (function) và được gọi là properties (thuộc tính) và methods (phương thức) tương ứng với context (ngữ cảnh) của một object.

Một object có thể được tạo bằng dấu ngoặc {…} với danh sách các properties tùy chọn. Property là một cặp "key: value", trong đó khóa là một chuỗi (còn được gọi là "property name") và giá trị có thể là bất kỳ thứ gì.

Để hiểu định nghĩa khá trừu tượng này, chúng ta hãy xem ví dụ về một Object JavaScript:

let school = {

    name : "Vivekananda School",

    location : "Delhi",

    established : "1971"

}

Trong ví dụ trên “name”, “location”, “established” đều là “key” và “Vivekananda school”, “Delhi” và “1971” là các “value” tương ứng.

Mỗi key này được coi là property của object. Một object trong JavaScript cũng có thể có một hàm như một thành viên (function as member), trong trường hợp đó nó sẽ được xem như một method của object đó.

Hãy xem một ví dụ này:

// javascript code demonstrating a simple object 

let school = { 

name: 'Vivekananda School', 

location : 'Delhi', 

established : '1971', 

displayInfo : function(){ 

console.log(`${school.name} was established 

in ${school.established} at ${school.location}`); 

} 

} 

school.displayInfo(); 

Output: 

Trong ví dụ trên, displayinfo là một phương thức của đối tượng trường (school object) đang được sử dụng để làm việc với dữ liệu của đối tượng, được lưu trữ trong các thuộc tính của nó.

Thuộc tính của đối tượng JavaScript

Tên thuộc tính có thể là chuỗi hoặc số. Trong trường hợp tên thuộc tính là số, chúng phải được truy cập bằng cách sử dụng "ký hiệu dấu ngoặc" như sau:

let school = {

    name: 'Vivekananda School',

    location : 'Delhi',

    established : '1971',

    20 : 1000,

    displayInfo : function(){

        console.log(`The value of the key 20 is ${school['20']}`);

    }

}

school.displayInfo();

Output:

Tên thuộc tính cũng có thể là chuỗi có nhiều hơn một từ được phân tách bằng dấu cách. Trong trường hợp đó, các tên thuộc tính này phải được đặt trong dấu ngoặc kép:

let school = {

    "school name" : "Vivekananda School",

}

Tương tự như tên thuộc tính là số, chúng cũng phải được truy cập bằng ký hiệu dấu ngoặc. Ví dụ nế

// bracket notation 

let school = {

    name: 'Vivekananda School',

    displayInfo : function(){

        console.log(`${school.name.split(' ')[0]}`);

    }

}

school.displayInfo(); // Vivekananda

u muốn truy cập ‘Vivekananda’ từ ‘Vivekananda School’, bạn có thể làm như sau:

Output:

Trong đoạn code trên, ký hiệu ngoặc đã được sử dụng, cũng như phương pháp phân tách (split method) của Javascript.

Thuộc tính được kế thừa (Inherited Properties)

Thuộc tính kế thừa của một đối tượng là những thuộc tính đã được kế thừa từ nguyên mẫu của đối tượng, thay vì được xác định cho chính đối tượng, được gọi là thuộc tính Riêng của đối tượng. Để xác minh xem một thuộc tính có phải là một Thuộc tính riêng hay không, chúng ta có thể sử dụng phương thức hasOwnProperty.

Thuộc tính tài sản

Thuộc tính dữ liệu trong JavaScript có bốn thuộc tính.

• value: Giá trị của thuộc tính.
• writable: Khi là đúng (true), giá trị của thuộc tính có thể được thay đổi
• enumerable: Khi là đúng, thuộc tính có thể được lặp lại bằng cách liệt kê “for-in”. Nếu không, thuộc tính được cho là không thể liệt kê được.
• configurable: Nếu sai, cố gắng xóa thuộc tính, thay đổi thuộc tính thành thuộc tính truy cập hoặc thuộc tính hoặc thay đổi các thuộc tính của nó (không phải [[Giá trị]] hoặc thay đổi [[Ghi]] thành sai) sẽ không thành công.

// hasOwnProperty code in js

const object1 = new Object();

object1.property1 = 42;

  

console.log(object1.hasOwnProperty('property1')); // true

Output:

Bài viết bên trên đã giới thiệu tổng quan các loại Object (đối tượng) trong JavaScript. Hy vọng đã cho bạn kiến thức nền để bắt đầu thử tạo các đối tượng đầu tiên cho mình.