🔸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

• arr.last

• ⭐️ ES6 (2015) (shorthand method names)

• helpers

💈範例

• 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,             // 38

• more examples ...

  • window.name

  • __proto__

📗 參考

• JavaScript: The Definitive Guide ⟩ 6.10.6 Property Getters & Setters

📘 手冊

• Functions ⟩ getter

• Object.defineProperty()