Tiếp theo chúng ta sẽ cùng Thế giới JS tìm hiểu về Các đối tượng(object) trong JavaScript, là loại dữ liệu quan trọng nhất và tạo thành các khối xây dựng cho JavaScript hiện đại. Các đối tượng này hoàn toàn 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à ký hiệu) 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 (tùy thuộc vào loại của chúng). Trong bài dưới đây có một vài ví dụ js, bạn có thể dùng các trình IDE online để chạy thử code bên dưới nha. Search “Javascript Online”.
Cú pháp:
let object_name = {
key_name : value,
...
}
Chúng ta hãy xem một ví dụ về Đối tượng JavaScript bên dưới:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// JavaScript code demonstrating a simple object
let school = {
name: 'HCM School',
location : 'VN',
established : '1971',
displayInfo : function(){
console.log(`${school.name} was established in ${school.established} at ${school.location}`);
}
}
school.displayInfo();
Đầu ra:
Trong ví dụ này, “name”, “location”, “established” đều là “keys” và “ HCM School”, “VN” và 1971 lần lượt là giá trị của các khóa này. Mỗi khóa này được gọi là thuộc tính của đối tượng. Một đối tượng trong JavaScript cũng có thể có một chức năng như một thành viên, trong trường hợp đó, nó sẽ được gọi là một phương thức của đối tượng đó. Ở đây “displayinfo” là một phương thức của đối tượng school đ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ó.
- Các đối tượng phức tạp hơn và mỗi đối tượng 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 đối tượng 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 hoặc một con trỏ tới giá trị đó. Tham chiếu hoặc con trỏ đó trỏ đến vị trí trong bộ nhớ nơi đối tượng được lưu trữ. Các biến không thực sự lưu trữ giá trị.
- Nói một cách lỏng lẻo, các đối tượng 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 các kiểu nguyên thủy hoặc tham chiếu, dưới dạng các cặp “khóa: giá trị”. Các khóa này có thể là các biến hoặc hàm và được gọi tương ứng là các thuộc tính và phương thức trong ngữ cảnh của một đối tượng.
Một đối tượng có thể được tạo bằng dấu ngoặc nhọn {…} với danh sách thuộc tính tùy chọn. Thuộc tính là một cặp “khóa: giá trị”, trong đó khóa là một chuỗi (còn được gọi là “tên thuộc tính”) và giá trị có thể là bất kỳ giá trị nào.
1.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 ngoặc” như sau:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let school = {
name: 'HCM School',
location : 'VN',
established : '1971',
20 : 1000,
displayInfo : function(){
console.log(`The value of the key 20 is ${school['20']}`);
}
}
school.displayInfo();
Đầu ra:
Nhưng nhiều hơn về ký hiệu dấu ngoặc sau. Tên thuộc tính cũng có thể là các chuỗi có nhiều 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" : "HCM School",
}
Giống như tên thuộc tính là số, chúng cũng phải được truy cập bằng cách sử dụng ký hiệu ngoặc. Giống như nếu chúng ta muốn truy cập ‘HCM’ từ ‘HCM School’, chúng ta có thể làm như sau:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// Bracket notation
let school = {
name: 'HCM School',
displayInfo : function(){
console.log(`${school.name.split(' ')[0]}`);
}
}
school.displayInfo();
Đầu ra:
HCM
Trong đoạn code trên, chúng tôi đã sử dụng ký hiệu ngoặc và phương thức phân tách do JavaScript cung cấp mà bạn sẽ tìm hiểu trong bài viết về chuỗi.
2.Thuộc tính kế thừa
Các 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, trái ngược với việc được khai báo 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à thuộc tính Riêng của đối tượng hay không, chúng ta có thể sử dụng phương thức hasOwnProperty . 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 true, giá trị của thuộc tính có thể được thay đổi
- enumerable: Khi true, thuộc tính có thể được lặp lại bằng cách liệt kê “for-in”. Mặt khác, tài sản được cho là không thể đếm được.
- configurable: Nếu fail, cố gắng xóa thuộc tính, thay đổi thuộc tính thành quyền truy cập hoặc thuộc tính hoặc thay đổi thuộc tính của thuộc tính sẽ không thành công.
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// hasOwnProperty code in js
const object1 = new Object();
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1')); // true
Đầu ra:
true
3.Tạo đối tượng
Chúng ta sẽ xem các cách khác nhau để khởi tạo các đối tượng trong JavaScript như thế nào trong phần dưới đây.
Trước khi chúng ta tiếp tục, điều quan trọng cần lưu ý là JavaScript là ngôn ngữ dựa trên đối tượng dựa trên các nguyên mẫu, thay vì dựa trên lớp. Do cơ sở khác nhau này, có thể ít rõ ràng hơn về cách JavaScript cho phép bạn tạo hệ thống phân cấp của các đối tượng và có sự kế thừa các thuộc tính cũng như giá trị của chúng.
3.1.Tạo đối tượng với hàm tạo:
Một trong những cách dễ nhất để khởi tạo một đối tượng trong JavaScript đó là Hàm tạo không là gì ngoài một hàm và với sự trợ giúp của từ khóa new, hàm tạo cho phép tạo nhiều đối tượng có cùng điểm chung như bên dưới:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
//simple function
function vehicle(name,maker,engine){
this.name = name;
this.maker = maker;
this.engine = engine;
}
//new keyword to create an object
let car = new vehicle('GT','KIA','1998cc');
//property accessors
console.log(car.name);
console.log(car.maker);
console.log(car['engine']);
Đầu ra:
GT KIA 1998cc
Giải thích: Một lớp trong OOP có hai thành phần chính, một số tham số nhất định và một vài hàm thành viên. Trong phương thức này chúng ta khai báo một hàm tương tự như một class, có 3 tham số là name, maker và engine ( từ khóa this dùng để phân biệt name,maker,engine của class với name,maker,engine của các đối số mà đang được cung cấp.). Sau đó, chúng ta đơn giản tạo một đối tượng obj của vehicle, khởi tạo nó và gọi nó là phương thức.
3.2.Tạo đối tượng với Literals:
Literals là những cách nhỏ hơn và đơn giản hơn để định nghĩa các đối tượng. Chúng tôi đơn giản định nghĩa thuộc tính và giá trị bên trong dấu ngoặc nhọn như hình bên dưới:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
//creating js objects with object literal
let car = {
name : 'GT',
maker : 'KN',
engine : '1998cc'
};
//property accessor
console.log(car.name); //dot notation
console.log(car['maker']); //bracket notation
Đầu ra:
GT KN
Trong đoạn code trên, chúng ta đã tạo một đối tượng đơn giản có tên là car với sự trợ giúp của đối tượng Literals, có các thuộc tính như name, maker, engine. Sau đó, chúng ta sử dụng các phương thức truy cập thuộc tính ( Ký hiệu dấu chấm, Ký hiệu dấu ngoặc ) để console.log các giá trị.
Bây giờ hãy xem cách chúng ta có thể thêm nhiều thuộc tính hơn vào một đối tượng đã được định nghĩa:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let car = {
name : 'Stanto',
maker : 'KN',
engine : '1998cc'
};
//adding property to the object
car.brakesType = 'All Disc';
console.log(car);
Chúng ta đã thêm thuộc tính mới có tên là brakeType vào đối tượng car được định nghĩa ở trên và khi chúng ta console.log toàn bộ đối tượng, chúng ta nhận được:
Ví dụ:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
//adding methods to the car object
let car = {
name : 'Stanto',
maker : 'KN',
engine : '1998cc',
start : function(){
console.log('Starting the engine...');
}
};
car.start();
// Adding method stop() later to the object
car.stop = function() {
console.log('Applying Brake...');
}
car.stop();
Đầu ra:
Starting the engine... Applying Brake...
Giải thích: Trong đoạn code trên, phương thức start đã được thêm vào đối tượng car và sau đó được gọi bởi phương thức car.start() và phương thức stop cũng được thêm vào sau khi đối tượng đã được khai báo.
3.3.Tạo đối tượng bằng phương thức Object.create():
Phương thức Object.create() tạo một đối tượng mới, sử dụng một đối tượng hiện có làm nguyên mẫu của đối tượng mới được tạo.
Ví dụ:
Ví dụ:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
const coder = {
isStudying : false,
printIntroduction : function(){
console.log(`My name is ${this.name}. Am I studying?: ${this.isStudying}`);
}
};
const me = Object.create(coder);
me.name = 'vpsus';
me.isStudying = true;
me.printIntroduction();
Đầu ra:
My name is WikiCode. Am I studying?: true
3.4.Sử dụng class trong es6:
ES6 hỗ trợ khái niệm class giống như bất kỳ ngôn ngữ định hướng đối tượng hoặc định kiểu tĩnh nào khác. Vì vậy, đối tượng có thể được tạo từ một lớp trong javascript cũng như được hiển thị bên dưới:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
//using es6 classes
class Vehicle {
constructor(name, maker, engine) {
this.name = name;
this.maker = maker;
this.engine = engine;
}
}
let car1 = new Vehicle('Santo', 'KN', '1998cc');
console.log(car1.name); //GT
Đầu ra:
Santo
4.Truy cập thành viên đối tượng
Các thành viên đối tượng (thuộc tính hoặc phương thức) có thể được truy cập bằng cách sử dụng:
ký hiệu dấu chấm:
(objectName.memberName)
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let school = {
name : "HCM",
location : "VN",
established : 1971,
20 : 1000,
displayinfo : function() {
console.log(`${school.name} was established
in ${school.established} at ${school.location}`);
}
}
console.log(school.name);
console.log(school.established);
Đầu ra:
HCM 1971
Ký hiệu ngoặc vuông:
objectName["memberName"]
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let school = {
name : "HCM School",
location : "VN",
established : 1995,
20 : 1000,
displayinfo : function() {
document.write(`${school.name} was established
in ${school.established} at ${school.location}`);
}
}
// Output : Vivekanada School
console.log(school['name']);
// Output: 1000
console.log(school['20']);
Đầu ra:
HCM School 1000
Không giống như ký hiệu dấu chấm, từ khóa dấu ngoặc hoạt động với bất kỳ tổ hợp chuỗi nào, bao gồm nhưng không giới hạn ở các chuỗi nhiều từ. Ví dụ:
somePerson.first name // invalid somePerson["first name"] // valid
Không giống như ký hiệu dấu chấm, ký hiệu dấu ngoặc cũng có thể chứa các tên là kết quả của bất kỳ biến biểu thức nào có giá trị được tính trong thời gian chạy. Ví dụ :
let key = "first name" somePerson[key] = "Name Surname"
Các thao tác tương tự không thể thực hiện được khi sử dụng ký hiệu dấu chấm.
5.Lặp tất cả các từ khóa của một đối tượng
Để lặp lại tất cả các từ khóa có thể đếm được hiện có của một đối tượng, chúng ta có thể sử dụng cấu trúc for…in . Điều đáng chú ý là điều này cho phép chúng ta chỉ truy cập các thuộc tính của một đối tượng có thể đếm được (Hãy nhớ rằng có thể đếm được là một trong bốn thuộc tính của thuộc tính dữ liệu). Chẳng hạn, các thuộc tính kế thừa từ Object.prototype không thể đếm được. Tuy nhiên, vô số thuộc tính được kế thừa từ một nơi nào đó cũng có thể được truy cập bằng cách sử dụng cấu trúc for…in Ví dụ:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let person = {
gender : "male"
}
var person1 = Object.create(person);
person1.name = "David Ho";
person1.age = 45;
person1.nationality = "VN";
for (let key in person1) {
// Output : name, age, nationality
// and gender
console.log(key);
}
Đầu ra:
name age nationality gender
6.Xóa thuộc tính
Để xóa một thuộc tính của một đối tượng, chúng ta có thể sử dụng toán tử delete. Một ví dụ về việc sử dụng nó đã được liệt kê dưới đây:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let obj1 = {
propfirst : "Name"
}
// Output : Name
console.log(obj1.propfirst);
delete obj1.propfirst
// Output : undefined
console.log(obj1.propfirst)
Đầu ra:
undefined
Điều quan trọng cần lưu ý là chúng ta không thể xóa các thuộc tính kế thừa hoặc các thuộc tính không thể cấu hình theo cách này. Ví dụ :
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let obj1 = {
propfirst : "Name"
}
// Output : Name
console.log(obj1.propfirst)
let obj2 = Object.create(obj1);
// Output : Name
console.log(obj2.propfirst);
// Output : true.
console.log(delete obj2.propfirst);
// Surprisingly Note that this will return true
// regardless of whether the deletion was successful
// Output : Name
console.log(obj2.propfirst);
Đầu ra:
Name Name true Name
Trên đây là tất cả những gì về đối tượng trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới đối tượng, hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
