Trong hướng dẫn này, chúng ta sẽ cùng tìm hiểu sâu hơn về các thuộc tính (Properties) của Đối tượng trong JavaScript và các thuộc tính của chúng như có thể định cấu hình (configurable), có thể liệt kê (enumerable), có thể ghi (writable), lấy (get), thiết lập (set) và giá trị (value)
JavaScript chỉ định các đặc điểm thuộc tính của các đối tượng thông qua các thuộc tính bên trong được bao quanh bởi hai cặp dấu ngoặc vuông, ví dụ, [[Enumerable]].
Có hai loại thuộc tính đối tượng:
-
Data Properties: Thuộc tính dữ liệu
-
Accesor Properties: Thuộc tính trình truy cập
> Lưu ý: Nếu bạn chưa rõ về đối tượng thì xem ngay bài viết Object trong JavaScript này nhé!
Ok, bây giờ chúng ta tìm hiểu chi tiết hơn về:
1. Data Properties: Thuộc tính dữ liệu
Data Properties (thuộc tính dữ liệu) chứa một vị trí duy nhất cho một giá trị dữ liệu.
Thuộc tính dữ liệu có bốn thuộc tính:
-
[[Configurable]] - Xác định xem một thuộc tính có thể được định nghĩa lại hoặc loại bỏ thông qua toán tử delete hay không.
-
[[Enumerable]] - Chỉ ra rằng một thuộc tính sẽ được trả về trong vòng lặp for in.
-
[[Writable]] - Chỉ định rằng giá trị của một thuộc tính có thể được thay đổi.
-
[[Value]] - Chứa giá trị thực của thuộc tính.
Theo mặc định, các thuộc tính [[Configurable]], [[Enumerable]] và [[Writable]] được đặt thành true cho tất cả các thuộc tính được xác định trực tiếp trên một đối tượng.
Và giá trị mặc định của thuộc tính [[Value]] là undefined
Ví dụ: Tạo một đối tượng student có thuộc tính name và age là các thuộc tính Configurable, Enumerable và Writable đặt thành true. Giá trị của chúng được đặt thành "Ngọc Anh" và 18.
let student = {
name: "Ngọc Anh",
age: 18
};
Để thay đổi bất kỳ thuộc tính nào của một thuộc tính, bạn sử dụng phương thức Object.defineProperty().
Phương thức Object.defineProperty() chấp nhận ba đối số:
-
Tên thuộc tính của đối tượng.
-
Một đối tượng mô tả thuộc tính có bốn thuộc tính:
Configurable, Enumerable, Writable và Value
Nếu bạn sử dụng phương thức Object.defineProperty() để xác định thuộc tính của đối tượng, các giá trị mặc định của [[Configurable]], [[Enumerable]] và [[Writable]] được đặt thành false trừ khi được chỉ định khác.
Ví dụ sau tạo một đối tượng student với thuộc tính age:
// B1: Tạo đối tượng trống
let student = {};
// B2: Tạo thuộc tính và thiết lập giá trị
// cho thuộc tính đó
student.age = 18;
Vì giá trị mặc định của thuộc tính [[Configurable]] được đặt thành true, bạn có thể xóa nó thông qua toán tử delete:
// Xóa thuộc tính age
delete student.age;
// Thử kiểm tra xem age còn hay không
console.log(student.age);
Kết quả:
undefined
Ví dụ sau tạo một đối tượng student và thêm thuộc tính phoneNumber vào nó bằng phương thức Object.defineProperty():
// Bật chế độ nghiêm ngặt (Strict Mode)
'use strict';
// Tạo đối tượng trống
let student = {};
// Tạo thuộc tính với Object.defineProperty()
Object.defineProperty(student, "phoneNumber", {
configurable: false,
value: "0383-180086"
});
// Xóa thuộc tính
delete student.phoneNumber;
Kết quả:
error: Uncaught TypeError: Cannot delete property 'phoneNumber' of #<Object>
Trong ví dụ này, thuộc tính có thể configurable được đặt thành false, do đó việc xóa thuộc tính phoneNumber trong chế độ nghiêm ngặt (Strict Mode) sẽ gây ra lỗi.
Ngoài ra, một khi thuộc tính được xác định là không thể định cấu hình (non-configurable), thì nó không thể định cấu hình lại được.
Nếu bạn sử dụng phương thức Object.defineProperty() để thay đổi bất kỳ thuộc tính nào khác với thuộc tính Writable, bạn sẽ gặp lỗi.
Ví dụ:
// Bật chế độ nghiêm ngặt (Strict Mode)
'use strict';
// Tạo đối tượng trống
let student = {};
// Tạo thuộc tính với Object.defineProperty()
Object.defineProperty(student, 'phoneNumber', {
configurable: false,
value: '0383-180086'
});
// Cố gắng thay đổi thuộc tính ngoài writable
Object.defineProperty(student, 'phoneNumber', {
configurable: true
});
Kết quả:
error: Uncaught TypeError: Cannot redefine property: phoneNumber
Theo mặc định, thuộc tính enumerable của tất cả các thuộc tính được xác định trên một đối tượng là true.
Điều đó có nghĩa là bạn có thể lặp qua tất cả các thuộc tính đó bằng cách sử dụng vòng lặp for in như ví dụ sau:
// Tạo đối tượng trống
let student = {};
// Thêm thuộc tính
student.name = 'Ngọc Anh';
student.
age =
18;
student.phoneNumber = '0383-180086';
// Lặp qua các thuộc tính
// và log ra màn hình console
for (let prop in student) {
console.log(prop);
}
Kết quả:
name
age
phoneNumber
Cách bên dưới làm cho thuộc tính phoneNumber không thể liệt kê bằng cách thiết lập thuộc tính enumerable thành false.
// Tạo đối tượng trống
let student = {};
// Thêm thuộc tính
student.name = 'Ngọc Anh';
student.age = 18;
student.phoneNumber = '0383-180086';
// Thiết lập thuộc tính phoneNumber
// thành không thể liệt kê
Object.defineProperty(student, 'phoneNumber', {
enumerable: false
});
// Lặp qua các thuộc tính
// và log ra màn hình console
for (let prop in student) {
console.log(prop);
}
Kết quả:
name
age
> Note: Nếu bạn đang mong muốn học JS một cách bài bản và đi sâu về Front end thì mình đề nghị bạn tham gia ngay KHÓA HỌC FRONT END chuyên sâu với React.js này.
2. Accessor Properties: Thuộc tính trình truy cập
Tương tự như thuộc tính dữ liệu, thuộc tính trình truy cập cũng có các thuộc tính [[Configurable]] và [[Enumerable]].
Nhưng các thuộc tính của trình truy cập lại các thuộc tính [[Get]] và [[Set]] thay vì [[Value]] và [[Writable]].
Khi bạn đọc dữ liệu từ một thuộc tính của trình truy cập, hàm [[Get]] sẽ tự động được gọi để trả về một giá trị. Giá trị trả về mặc định của hàm [[Get]] là undefined.
Nếu bạn gán giá trị cho thuộc tính trình truy cập, hàm [[Set]] sẽ tự động được gọi.
Để xác định thuộc tính trình truy cập, bạn phải sử dụng phương thức Object.defineProperty(). Ví dụ:
// Tạo một đối tượng
let student = {
name: 'Ngọc Anh',
age: 18
}
// Định nghĩa accessor
Object.defineProperty(student, 'infor', {
// Phương thức get
get: function () {
return this.name + ' ' + this.age + ' tuổi';
},
// Phương thức set
set: function (value) {
if (value.length === 2) {
this.name = value[0];
this.age = value[1];
} else {
throw 'Thiếu thông tin';
}
}
});
// Lấy thông tin đối tượng
console.log(student.infor);
// Gán dữ liệu mới
student.infor = ['Vũ Hà', 20];
// Lấy thông tin đối tượng
console.log(student.infor);
Kết quả:
Ngọc Anh 18 tuổi
Vũ Hà 20 tuổi
Trong ví dụ trên:
-
Đối tượng stutent có 2 thuộc tính là
name và age
-
Thuộc tính
infor là thuộc tính accessor
Trong thuộc tính infor:
-
[[Get]] trả về thông tin của đối tượng
-
[[Set]] nhận vào một biến, kiểm tra xem nếu biến có độ dài là 2 (mảng có 2 phần tử) thì đặt phần tử đầu tiên là name, phần tử thứ hai là age. Nếu không đúng thì ném ra một lỗi "Thiếu thông tin"
Định nghĩa nhiều thuộc tính với Object.defineProperties()
Trong ES5, bạn có thể định nghĩa nhiều thuộc tính trong một câu lệnh bằng cách sử dụng phương thức Object.defineProperties(). Ví dụ:
let student = {};
// Định nghĩa nhiều thuộc tính
Object.defineProperties(student, {
name: {
value: 'Ngọc Anh'
},
age: {
value: 18
},
phoneNumber: {
value: '0383-180086'
},
infor: {
get: function () {
return this.name + ' ' + this.age + ' tuổi';
},
set: function (value) {
if (value.length === 2) {
this.name = value[0];
this.age = value[1];
} else {
throw 'Thiếu thông tin';
}
}
}
});
console.log(student.infor);
Kết quả:
Ngọc Anh 18 tuổi
3. Bộ mô tả thuộc tính của đối tượng
Phương thức Object.getOwnPropertyDescriptor() cho phép bạn lấy đối tượng mô tả của một thuộc tính.
Phương thức Object.getOwnPropertyDescriptor() nhận hai đối số:
-
Một thuộc tính của đối tượng
Nó trả về một đối tượng mô tả mô tả một thuộc tính. Đối tượng mô tả có bốn thuộc tính: Configurable, Enumerable, Writable và Value
Ví dụ sau lấy đối tượng mô tả của thuộc tính tên của đối tượng student trong ví dụ trước.
// Tạo một đối tượng
let student = {
name: 'Ngọc Anh',
age: 18
}
let descriptor = Object.getOwnPropertyDescriptor(student, 'name');
console.log(descriptor);
Kết quả:
Tổng kết
Như vậy là qua bài viết này, mình đã giúp bạn về các loại thuộc tính của đối tượng và cả các đặc điểm của thuộc tính đó trong JavaScript.
Hi vọng bài viết giúp ích cho bạn trong quá trình tìm hiểu sâu về JS.
> Nếu bạn đã có nền tảng JS tốt, hãy HỌC REACT.JS ngay để nâng cao level của bạn hơn nữa.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python