6.1 Tạo đối tượng
Đối tượng là một trong những kiểu dữ liệu chính trong JavaScript và được sử dụng rộng rãi để lưu trữ và quản lý dữ liệu. Đối tượng là một bộ sưu tập các thuộc tính, trong đó mỗi thuộc tính bao gồm một khóa (tên) và một giá trị. Trong bài giảng này, chúng ta sẽ tìm hiểu cách tạo đối tượng, cũng như truy cập vào các thuộc tính và phương thức của chúng.
1. Literal đối tượng
Cách phổ biến nhất để tạo đối tượng trong JavaScript là sử dụng literal đối tượng.
Trong ví dụ này, chúng ta đã tạo đối tượng person với bốn thuộc tính: name, age, isStudent và greet.
let person = {
name: 'John',
age: 30,
isStudent: false,
greet: function() {
return 'Hello!';
}
};
2. Constructor Object
Đối tượng cũng có thể được tạo bằng cách sử dụng constructor Object().
Cách này tương đương với việc tạo đối tượng bằng cách sử dụng literal đối tượng, nhưng dài dòng hơn:
let person = new Object();
person.name = 'John';
person.age = 30;
person.isStudent = false;
person.greet = function() {
return 'Hello!';
};
3. Hàm constructor
Hàm constructor cho phép tạo nhiều instance của đối tượng với cùng thuộc tính và phương thức.
Trong ví dụ này, hàm constructor Person() được sử dụng để tạo các đối tượng john
và jane với cùng thuộc tính và phương thức:
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
this.greet = function() {
return 'Hello!';
};
}
let john = new Person('John', 30, false);
let jane = new Person('Jane', 25, true);
4. Phương thức Object.create()
Phương thức Object.create() tạo một đối tượng mới với prototype và thuộc tính chỉ định.
Trong ví dụ này, đối tượng john được tạo dựa trên prototype personPrototype:
let personPrototype = {
greet: function() {
return 'Hello!';
}
};
let john = Object.create(personPrototype);
john.name = 'John';
john.age = 30;
john.isStudent = false;
6.2 Truy cập vào thuộc tính và phương thức
1. Truy cập bằng dấu chấm
Cách phổ biến nhất để truy cập vào thuộc tính và phương thức của đối tượng là qua dấu chấm:
let person = {
name: 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person.name); // Sẽ hiển thị: John
console.log(person.age); // Sẽ hiển thị: 30
console.log(person.greet()); // Sẽ hiển thị: Hello!
2. Truy cập bằng dấu ngoặc vuông
Thuộc tính của đối tượng cũng có thể được truy cập bằng dấu ngoặc vuông. Cách này hữu ích khi tên thuộc tính được lưu trữ trong biến hoặc chứa khoảng trắng hay ký tự đặc biệt:
let person = {
'first name': 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person['first name']); // Sẽ hiển thị: John
console.log(person['age']); // Sẽ hiển thị: 30
let propertyName = 'greet';
console.log(person[propertyName]()); // Sẽ hiển thị: Hello!
3. Thay đổi và thêm thuộc tính
Thuộc tính của đối tượng có thể được thay đổi hoặc thêm vào bất cứ lúc nào:
let person = {
name: 'John',
age: 30
};
// Thay đổi thuộc tính hiện có
person.age = 31;
console.log(person.age); // Sẽ hiển thị: 31
// Thêm thuộc tính mới
person.isStudent = false;
console.log(person.isStudent); // Sẽ hiển thị: false
4. Xóa thuộc tính
Thuộc tính của đối tượng có thể bị xóa bằng cách sử dụng toán tử delete:
let person = {
name: 'John',
age: 30,
isStudent: false
};
delete person.isStudent;
console.log(person.isStudent); // Sẽ hiển thị: undefined
6.3 Lặp qua các thuộc tính của đối tượng
1. Vòng lặp for...in
Vòng lặp for...in cho phép duyệt qua tất cả các thuộc tính liệt kê của đối tượng:
let person = {
name: 'John',
age: 30,
isStudent: false
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Sẽ hiển thị:
// name: John
// age: 30
// isStudent: false
2. Phương thức Object.keys()
Phương thức Object.keys() trả về một mảng chứa tất cả các thuộc tính liệt kê của đối tượng:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let keys = Object.keys(person);
console.log(keys); // Sẽ hiển thị: ['name', 'age', 'isStudent']
3. Phương thức Object.values()
Phương thức Object.values() trả về một mảng chứa giá trị của tất cả các thuộc tính liệt kê của đối tượng:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let values = Object.values(person);
console.log(values); // Sẽ hiển thị: ['John', 30, false]
4. Phương thức Object.entries()
Phương thức Object.entries() trả về một mảng các cặp [khóa, giá trị] cho tất cả các thuộc tính liệt kê của đối tượng:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let entries = Object.entries(person);
console.log(entries); // Sẽ hiển thị: [['name', 'John'], ['age', 30], ['isStudent', false]]
6.4 Kiểm tra sự tồn tại của thuộc tính
1. Toán tử in
Toán tử in cho phép kiểm tra sự tồn tại của thuộc tính trong đối tượng:
let person = {
name: 'John',
age: 30
};
console.log('name' in person); // Sẽ hiển thị: true
console.log('isStudent' in person); // Sẽ hiển thị: false
2. Phương thức hasOwnProperty()
Phương thức hasOwnProperty() kiểm tra xem đối tượng có thuộc tính chỉ định như thuộc tính riêng của nó không (không phải kế thừa):
let person = {
name: 'John',
age: 30
};
console.log(person.hasOwnProperty('name')); // Sẽ hiển thị: true
console.log(person.hasOwnProperty('isStudent')); // Sẽ hiển thị: false
GO TO FULL VERSION