Hướng dẫn dùng propertis JavaScript
Trong bài viết này, mình sẽ giúp bạn có cái nhìn chi tiết hơn về object properties và các attributes của nó như là configurable, enumerable, writable, get, set và value. Show Nội dung chính
Nội dung chính
Khi đã nắm vững các kiến thức này, mình tin chắc rằng bạn sẽ tự tin hơn khi làm việc với object trong JavaScript. Cùng tìm hiểu nhé! 1. Các loại object propertyJavaScript sử dụng internal attribute (attribute) để mô tả đặc điểm của một property. Nếu bạn chưa biết object property là gì thì bạn có thể tham khảo bài viết này: https://letdiv.com/object-trong-javascript/ Có hai loại object property: data property và accessor property. 1.1 Data propertyData property là property mang một giá trị nào đó. Đây là loại property mà chúng ta hay thường xuyên sử dụng. Một data property bao gồm 4 attributes:
Mặc định, các attribute Mình biết là bạn sẽ cảm thấy khó hiểu khi đọc các định nghĩa trên. Đừng lo lắng! Thông qua các ví dụ bên dưới, bạn sẽ hiểu rõ ngay, vì nó khá là đơn giản. Sau đây, mình sẽ tạo
object let person = { firstName: 'Nguyen', lastName: 'Hung' }; Lúc này, các attribute Để thay đổi attribute của một property, mình sử dụng method Method
Nếu mình sử dụng
method Đoạn code sau dùng để khởi tạo object let person = {}; person.age = 25; Bởi vì delete person.age; console.log(person.age); Output: undefined Ở ví dụ tiếp theo, mình sẽ tạo một object 'use strict'; let person = {}; Object.defineProperty(person, 'ssn', { configurable: false, value: '012-38-9119' }); delete person.ssn; Output: TypeError: Cannot delete property 'ssn' of # Qua đoạn code trên, bạn thấy rằng attribute Bên cạnh đó, nếu attribute 'use strict'; let person = {}; Object.defineProperty(person, 'ssn', { configurable: false, value: '012-38-9119' }); Object.defineProperty(person, 'ssn', { configurable: true }); Output: TypeError: Cannot redefine property: ssn Khi định nghĩa property trực tiếp bên trong object thì let person = {}; person.age = 25; person.ssn = '012-38-9119'; for (let prop in person) { console.log(prop); } Output: age ssn Sau đây, mình sẽ chuyển giá trị attribute let person = {}; person.age = 25; person.ssn = '012-38-9119'; Object.definedProperty(person, 'ssn', { enumerable: false }); for (let prop in person) { console.log(prop); } Output: age 1.2 Accessor propertyMột accessor property bao gồm 4 attributes:
Tương tự như data property, accessor property cũng có các attribute Nhưng accessor property không có các property Khi bạn muốn lấy giá trị của accessor property, function Nếu bạn gán giá trị cho accessor property, function
Để định nghĩa một accessor property, bạn phải sử dụng method let person = { firstName: 'Nguyen', lastName: 'Hung' }; Object.defineProperty(person, 'fullname', { get: function () { return this.firstName + ' ' + this.lastName; }, set: function (value) { let parts = value.split(' '); if (parts.length == 2) { this.firstName = parts[0]; this.lastName = parts[1]; } else { throw 'Invalid name format'; } } }); console.log(person.fullName); Output: 'Nguyen Hung' Ở ví dụ trên:
2. Dùng Object.defineProperties để định nghĩa nhiều propertyTrong phiên bản ES5, bạn có thể định nghĩa nhiều property cùng một lúc thông qua method Object.defineProperties(product, { name: { value: 'Smartphone' }, price: { value: 799 }, tax: { value: 0.1 }, netPrice: { get: function () { return this.price * (1 + this.tax); } } }); console.log('The net price of a ' + product.name + ' is ' + product.netPrice.toFixed(2) + ' USD'); Output: The net price of a Smartphone is 878.90 USD Ở ví dụ trên, mình đã định nghĩa 3 data property 3. Property descriptorMethod Method
let person = { firstName: 'Nguyen', lastName: 'Hung' } let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName'); console.log(descriptor); Output: { value: 'Nguyen', writable: true, enumerable: true, configurable: true } 4. Ghi nhớ
Tham Gia Cộng Đồng Học Lập Trình Thật Dễ!Nếu bạn quan tâm đến ngành lập trình, và muốn tìm hiểu những kiến thức bổ ích khác, hãy tham gia ngay cộng đồng Học Lập Trình Thật Dễ nhé! |