Đối tượng trong javascript

Chào các bạn

Hôm nay mình sẽ nói về object. Vậy object là gì?. object là một đối tượng có thể lưu trữ chìa khóa và nhiều giá trị khác nhau. Mỗi thuộc tính cách nhau bằng dấu ,. Mỗi object sẽ có địa chỉ vùng nhớ khác nhau.

1. Cú pháp

1let object1 = new Object();   // Cú pháp class
2
3let object2 = {};             // Cú pháp viết tắt

Khi chúng ta khai báo như vậy là chúng ta đang tạo ra một object mới. Và nó trống rỗng.

Để gán giá trị cho object đó bằng cách

1let object2 = {
2    key: value
3}

Ví dụ:

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4    showName () {
5        console.log(this.name)
6    },
7    showAge: function () {
8        console.log(this.age);
9    }
10}

Khi chúng ta khai báo như vậy. Chúng ta đang tạo ra một đối tượng có 4 thuộc tính name, age, showName, showAge

Để lấy ra một value nào đó chúng ta có thể viết. Đầu tiên là object tiếp theo là dấu . tiếp theo là key mà chúng ta cần lấy.

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4    showName () {
5        console.log(this.name)
6    },
7    showAge: function () {
8        console.log(this.age);
9    }
10}
11
12let age = user.age; // Lấy ra tuổi

Hoặc đầu tiên là object tiếp theo là dấu ngoặc [] truyền vào đó chuỗi key mà chúng ta cần lấy. object["key"]

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4    showName () {
5        console.log(this.name)
6    },
7    showAge: function () {
8        console.log(this.age);
9    }
10}
11
12let age = user["age"]; // Lấy ra tuổi

Để xóa một thuộc tính chúng ta dùng từ khóa delete

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4    showName () {
5        console.log(this.name)
6    },
7    showAge: function () {
8        console.log(this.age);
9    }
10}
11
12let age1 = user["age"]; // Lấy ra tuổi
13console.log(age1);      // 89
14
15delete user.age;        // Xóa thuộc tính age
16
17let age2 = user["age"]; // Lấy ra tuổi
18console.log(age2);      // undefined

Đối tượng lồng nhau sâu

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4    showName () {
5        console.log(this.name)
6    },
7    showAge: function () {
8        console.log(this.age);
9    },
10    object: {               // object lồng nhau
11        name: "Object",
12        age: 1000,
13        object1: {          // object lồng nhau
14            name: "Object 1",
15            age: 11111
16        }
17    }
18}

Khi đó để muốn truy cập lấy ra giá trị trong object lồng nhau đó thì chúng ta chỉ cần user.object.name, user["object"].name, user["object"]["name"]

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4    showName () {
5        console.log(this.name)
6    },
7    showAge: function () {
8        console.log(this.age);
9    },
10    object: {               // object lồng nhau
11        name: "Object",
12        age: 1000,
13        object1: {          // object lồng nhau
14            name: "Object 1",
15            age: 11111,
16        }
17    }
18}
19
20console.log(user.object.name);       // Object
21console.log(user["object"].name);    // Object
22console.log(user["object"]["name"]); // Object

Để kiểm tra thuộc tính trong object chúng ta dùng từ khóa in

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4    showName () {
5        console.log(this.name)
6    },
7    showAge: function () {
8        console.log(this.age);
9    },
10    object: {               // object lồng nhau
11        name: "Object",
12        age: 1000,
13        object1: {          // object lồng nhau
14            name: "Object 1",
15            age: 11111,
16        }
17    }
18}
19
20if("age" in user) {         // Kiểm tra age có trong user không
21    console.log(user.age);  // 89
22}

"key" in object chỉ trả về 1 trong 2 giá trị true hoặc false

Để lặp object chúng ta dùng vòng lặp for in

1let user = {
2    name : "Hồ Quang Trí",
3    age: 89,
4}
5
6for(let key in user) {
7    console.log(key);       // name, age
8    console.log(user[key]); // Hồ Quang Trí, 89
9}

Cuối cùng một thứ không kém phần quan trọng là. Giả sử nhà của các bạn là một object, và tivi là một thuộc tính trong cái nhà. Cả gia đình đang dùng chung nó. Nếu bố bạn bán cái tivi đó đi thì khi các bạn về nhà thì cái tivi đó đã biến mất rồi.

1let caiNha = {
2    tivi: "Ti Vi"
3}
4
5// Bố bạn và bạn chung 1 cái nhà
6let boBan = caiNha;  
7let ban = caiNha;
8
9delete boBan.tivi;          // Bố bạn bán tivi
10
11console.log(caiNha.tivi);   // undefined vì bố bạn đã bán nó đi

Ngược lại nếu bạn bán cái tivi đó đi

1let caiNha = {
2    tivi: "Ti Vi"
3}
4
5// Bố bạn và bạn chung 1 cái nhà
6let boBan = caiNha;  
7let ban = caiNha;
8
9delete ban.tivi;          // Bạn bán tivi
10
11console.log(caiNha.tivi);   // undefined vì bạn đã bán nó đi

Vậy bây giờ câu hỏi đặt ra là. Nếu bố bạn bán cái tivi đó đi nhưng bạn vẫn còn cái tivi đó thì làm như thế nào?. Đơn nhiên là bạn và bố bạn phải ở riêng đúng không. Nó cũng như đời thật. Và đây là code của nó.

1let caiNha = {
2    tivi: "Ti Vi"
3}
4
5
6// Bố bạn và bạn bây giờ khác nhà nhau
7let boBan = caiNha;  
8let ban = {};               // Mua nhà mới
9
10for(let key in caiNha) {
11    ban[key] = caiNha[key]; // Sao chép thiết kế nhà bố bạn
12}
13
14delete ban.tivi;            // Bạn bán tivi
15
16console.log(boBan.tivi);    // tivi nhà bố bạn vẫn còn
17console.log(ban.tivi);      // undefined vì bạn đã bán nó đi

Tổng kết

Trong bài viết này mình nói về object. object mình rất hay dùng trong lập trình.

Trong javascript object có sẵng rất nhiều. Các bạn có thể xem thêm chi tiết tại đây object. Đơn nhiên có nhiều cái hay. Từ từ về sâu trình lên cao sẽ biết.