🔸getter/setter
JS ⟩ value ⟩ object ⟩ property ⟩ getter/setter
(⭐️ ES5)
an accessor property (not a data property) that has a getter and/or a setter method.
// defining "accessor properties"
// method 1:
let obj = {
// data property
_value: 0,
// accessor property (pair of methods)
get prop() { return this._value },
set prop(value) { this._value = value },
};
// method 2:
Object.defineProperty(obj, 'prop', {
get() { ... }, // getter
set(value) { ... }, // setter
});
obj.prop; // getting obj.prop
obj.prop = value; // setting obj.prop🈯 synonyms: "accessor property"
class getter/setter
⭐️ ES6 (2015) (shorthand method names)
replit:define properties
// object
const obj = { _name: 'john doe' };
const _age = 38;
// 🔸 using `Object.defineProperty()`
Object.defineProperty(obj, 'age', {
// shorthand method names (ES2015)
// -------------------------------
// ⭐️ 注意:這裡沒有 ":" 冒號❗️
// ↑
get() { return _age; },
set(value) { _age = value; },
enumerable: true,
configurable: true
});
// 🔸 using `Object.defineProperties()`
Object.defineProperties(obj, {
// ⭐️ data property
isMale: {
value: true,
writable: true,
},
// ⭐️ accessor property
name: {
get() { return this._name },
set(value) { this._name = value },
},
});
// test
obj.name = 'Joe'; // "setter" called
obj.name, // 'Joe'
obj.isMale, // true
obj.age, // 38more examples ...
Last updated
Was this helpful?