Object in JavaScript
Object trong JavaScript là gì?
Trong JavaScript, object (đối tượng) là một kiểu dữ liệu cho phép lưu trữ và tổ chức thông tin dưới dạng cặp key-value (khóa-giá trị). Một object có thể chứa các thuộc tính (properties) và phương thức (methods). Thuộc tính là các biến được liên kết với object, trong khi phương thức là các hàm được liên kết với object.
1. Khởi tạo object
Trong JavaScript, có nhiều cách để khởi tạo một object. Dưới đây là một số phương pháp phổ biến:
1.1. Object literals (Đối tượng từ chính định nghĩa):
object literals được biểu diễn bằng dấu phẩy ngăn cách giữa các cặp key-value nằm trong ngoặc nhọn { }
const obj1 = { key1: value1, key2: value2 };
1.2. Sử dụng Built-in constructors (Hàm khởi tạo tích hợp sẵn):
JavaScript cung cấp một số constructor functions tích hợp sẵn như Object(), Array(), String(), và những constructor này có thể được sử dụng để tạo object mới. Khi sử dụng từ khóa "new" với các constructor này, JavaScript tạo ra một phiên bản mới của object tương ứng.
const obj2 = new Object();
obj2.key1 = "value1";
obj2.key2 = "value2";
1.3. Sử dụng Constructor function (Hàm khởi tạo):
Bạn có thể tạo một constructor function, tạo ra các thuộc tính của object bằng cách sử dụng từ khóa "this". Khi tạo object mới bằng cách sử dụng từ khóa "new" với constructor function, JavaScript sẽ tạo một phiên bản mới của object và gán các thuộc tính cho nó.
function ObjectName(key1, key2) {
this.key1 = key1;
this.key2 = key2;
}
const obj3 = new objectName("value1", "value2");
1.4. Sử dụng Object.create() với prototype inheritance (Kế thừa nguyên mẫu):
Object.create() cho phép bạn tạo một object mới sử dụng một object đã tồn tại làm nguyên mẫu (prototype). Object mới sẽ kế thừa các thuộc tính và phương thức từ object nguyên mẫu.
const prototypeObj = { key1: "value1", key2: "value2" };
const obj4 = Object.create(prototypeObj);
1.5. Sử dụng ES6 Classes (Lớp):
ES6 giới thiệu khái niệm lớp (class) trong JavaScript, cho phép bạn tạo ra các đối tượng theo mô hình lớp. Bằng cách định nghĩa một lớp và sử dụng từ khóa "new" với lớp đó, bạn có thể tạo ra các object mới có các thuộc tính và phương thức tương ứng với lớp.
class ClassName {
constructor(key1, key2) {
this.key1 = key1;
this.key2 = key2;
}
}
const obj5 = new ClassName("value1", "value2");
2. Object Properties
Trong JavaScript, object properties (thuộc tính của đối tượng) là các biến được liên kết với một đối tượng. Thuộc tính của một đối tượng lưu trữ thông tin và trạng thái của đối tượng đó.
const obj = {
key1: "value1", key2: "value2", key3: "value3", key4: "value4", key5: "value5",
};
// Sử dụng dot notation
console.log(obj.key1); // In ra giá trị của key1: value1
// Sử dụng bracket notation
console.log(obj["key2"]); // In ra giá trị của key2: value2\
obj.key1 = "newValue1"; // Gán giá trị mới cho key1
obj["key2"] = "newValue2"; // Gán giá trị mới cho key2
console.log(obj.key1);
console.log(obj["key2"]);
delete obj.key1; // Xóa thuộc tính key1 khỏi đối tượng obj
console.log(obj.key1);
const keys = Object.keys(obj); // Lấy danh sách các thuộc tính thành một mảng
console.log(keys); // In ra mảng các thuộc tính
3. object methods
Trong JavaScript, object methods (phương thức của đối tượng) là các hàm được định nghĩa và gắn liền với đối tượng. Chúng cho phép bạn thực hiện các hành động và tính toán liên quan đến đối tượng đó.
const calculator = {
operand1: 0,
operand2: 0,
setOperands: function (operand1, operand2) {
this.operand1 = operand1;
this.operand2 = operand2;
},
add: function () {
return this.operand1 + this.operand2;
},
subtract: function () {
return this.operand1 - this.operand2;
},
multiply: function () {
return this.operand1 * this.operand2;
},
divide: function () {
return this.operand1 / this.operand2;
},
};
calculator.setOperands(10, 5);
console.log(calculator.add()); // Kết quả: 15
console.log(calculator.subtract()); // Kết quả: 5
console.log(calculator.multiply()); // Kết quả: 50
console.log(calculator.divide()); // Kết quả: 2
Trong ví dụ trên, chúng ta có một đối tượng calculator với các thuộc tính operand1 và operand2, và các phương thức setOperands, add, subtract, multiply, và divide.
- Phương thức setOperands được sử dụng để thiết lập giá trị của operand1 và operand2.
- Các phương thức add, subtract, multiply, và divide được sử dụng để thực hiện các phép toán cộng, trừ, nhân và chia giữa operand1 và operand2.
Khi gọi các phương thức của đối tượng calculator, chúng ta có thể thực hiện các phép toán và nhận kết quả tương ứng. Ngoài ra, Object còn có một vài phường thức có sẵn trong các đối tượng nhất định. vị dụ như: keys, values, entries, assign, hasOwn,...
const object1 = {
a: "value1",
b: "value2",
c: "value3",
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// In ra mảng hình:
// a: value1
// b: value2
// c: value3
console.log("values: ", Object.values(object1));
// In ra mảng hình: Array ['value1', 'value2', 'value3']
console.log("keys: ", Object.keys(object1));
// In ra mảng hình: Array ['a', 'b', 'c']
console.log(Object.hasOwn(object1, "a"));
//In ra mảng hình: true
console.log(Object.hasOwn(object1, "d"));
// In ra mảng hình: true
4. Cái nhìn chi tiết hơn về Object
4.1. Kiểu dữ liệu tham trị và tham chiếu
Sự khác biệt cơ bản là giá trị của kiểu dữ liệu tham chiếu không được lưu trực trực tiếp tại biến, mà biến đó sẽ lưu một tham chiếu tới giá trị thực.
Các kiểu dữ liệu cơ bản trong JS là các kiểu dữ liệu tham trị, còn kiểu dữ liệu Object là kiểu dữ liệu tham chiếu.
var num = 1;
var otherNum = num;
num = 10;
console.log(num); // 10
console.log(otherNum); // 1
var person = { name: "Thanh Long" };
var otherPerson = person;
person.name = "Vo Danh";
console.log(person.name); //Vo Danh
console.log(otherPerson.name); //Vo Danh
Như đã thấy, mặc dù thay đổi giá trị của biến person, nhưng giá trị của biến otherPerson cũng bị thay đổi. Nguyên do của việc này là bởi các đối tượng Object lưu giá trị theo kiểu tham chiếu, tức là 2 biến này cùng tham chiếu tới 1 vùng giá trị.
4.3. Thuộc tính riêng và thuộc tính kế thừa trong Object
- Thuộc tính riêng (own property) là thuộc tính được định nghĩa tại bản thân của đối tượng (object).
- Thuộc tính kế thừa (inherited property) là những thuộc tính được kế thừa từ đối tượng prototype của object đó.
Kiểm tra 1 thuộc tính có phải thuộc tính riêng hay không, ta có thể dùng phương thức hasOwnProperty của Object
/tạo mẫu khởi tạo
class Fruit {
constructor() {}
}
Fruit.prototype.color = "general_color";
//tạo đối tượng và thuộc tính riêng
var apple = new Fruit();
console.log("apple :", apple);
apple.name = "ownName";
//kiểm tra thuộc tính
console.log(apple.hasOwnProperty("color")); //false
console.log(apple.hasOwnProperty("name")); //true
All rights reserved
