🚩attribute

(value/writable) | (get/set) / enumerable / configurable

JS ⟩ value ⟩ object ⟩ property ⟩ attribute

each property has a name and 4 attributes：

• data property - value / writable / enumerable / configurable

• accessor property - get / set / enumerable / configurable

  • can be a getter, setter (only), or getter/setter.

where：

• writable - value (of a data property) can be reassigned.

• enumerable - property is enumerated by for-in loop.

• configurable - property can be deleted / attributes can be changed (👉 ⭐️ 重點)

🈯 synonyms： "property flag"

🧨 雷區

Object.assign()

• only copies the values of enumerable properties, not their attributes❗

• if one of the source objects has an accessor property, it is the value returned by the getter that is copied to the target object, not the getter itself❗

⭐️ 重點

🔰 redefine property

• configurable properties

  • ✅ data property -> accessor property

  • ✅ accessor property -> (non-writable) data property

  • ✅ configurable -> non-configurable ( one-way❗)

  • ✅ enumerable <-> non-enumerable

  • ✅ writable <-> non-writable

  • ✅ value <-> another value

• non-configurable properties

  • ✅ writable -> non-writable ( one-way❗)

  • ❌ TypeError (otherwise)

🔰 reassign value (to data property)

• ✅ writable - can reassign explicitly. (obj.prop = 1)

• ✅ non-writable , but configurable - can reassign implicitly. (Object.defineProperty(obj, 'prop', {value: 1}))

• ❌ TypeError (otherwise)

• non-writable only means that the value can't be reassigned directly.

• if configurable, all the attributes could be changed or overwritten completely (data <-> accessor).

By default, all properties of the objects you create are writable, enumerable, and configurable.

🔴 主題

• property descriptor - the attributes of an object.

• property enumeration - how methods enumerate properties.

• tools

  • ownPropertyFlags(obj)

👥 相關

• obj.mergeWith() - copy properties (and their attributes) from other sources.

• prototype of a class is non-writable, non-configurable, that is, can't reassign it, can't delete it or change its flags.

• used in isClass() to distinguish between a function and a class.

• Object.assign() copies source's own enumerable properties to target.

💈範例

• replit ⟩ property attributes , require ⟩ Object extension

// ⭐ import
const _Object = require('./ext/Object_ext.js');    // extend Object.prototype
// ---------------------------------------------------------------------------

// ⭐ property attributes
// ----------------------------------------------
// • configurable: can change attributes
// • writable    : can reassign value
// • enumerable  : listed in loops (for-of, ...)

// ⭐ configurable properties
const obj = {                           
                                        
    data: 1,                             // data (writable)
    
    get getter()  { return this.data },  // accessor (getter)
    set setter(v)  {  },                 // accessor (setter only)
    
    get gSetter()  { return this.data }, // accessor (getter/setter)
    set gSetter(v) {  },
};

// ⭐ non-configurable properties
obj.defineProperties({                  
                                        
    x: { value: 1, writable: true },    // data (⭐ writable) (value can be reassigned)
    y: { value: 2 },                    // data (⭐ non-writable)
    
    z : {                               // accessor (getter)
        get() { return "hello" } 
    },           
});

// ⭐ log

// -------------------------------
//     configurable properties
// -------------------------------

// ✅ redefine property

// 1. data -> getter/setter

obj.data,          // 1
obj.defineProperty('data', { get() { return 2 } }), 
obj.propertyDescriptor('data'),
// { get: [Function], set: undefined, enumerable: true, configurable: true }

// 2. getter/setter -> (non-writable) data

obj.getter,        // 2
obj.defineProperty('getter, { value: 'hi' }),      
obj.propertyDescriptor('getter'),
// { value: 'hi', writable: false, enumerable: true, configurable: true }

obj.setter = 3,    // 3
obj.defineProperty('setter', { value: 'jo' }),   
obj.propertyDescriptor('setter'),
// { value: 'jo', writable: false, enumerable: true, configurable: true }

obj.gSetter = 4,    // 4
obj.defineProperty('gSetter', { value: 'bravo' }),   
obj.propertyDescriptor('gSetter'),
// { value: 'bravo', writable: false, enumerable: true, configurable: true }

// -----------------------------------
//     non-configurable properties
// -----------------------------------

// 1. reassign value

// writable
obj.x = 5,    // ✅ OK

// non-writable
obj.y = 6,    // ⛔ TypeError (fails "silently" in sloppy mode❗)
// Cannot assign to read only property 'y' of object

// 2. redefine property

obj.defineProperty('z', { value: 'hi' }),   // ⛔ TypeError
// Cannot redefine property: 'z'

💾 程式

• replit ⟩ Object_ext.js

// -----------------------------
// ⭐️ extending Object.prototype
// -----------------------------

Object.defineProperties(Object.prototype, {

    // 🔸 obj.defineProperty(prop, desc)
    defineProperty: {
        value: function(prop, descr) {
            return Object.defineProperty(this, prop, descr);
        },
    },

    // 🔸 obj.defineProperties(desc)
    defineProperties: {
        value: function(descr) {
            return Object.defineProperties(this, descr);
        },
    },

    // 🔸 obj.propertyDescriptor(prop)
    propertyDescriptor: {
        value: function(prop) {
            return Object.getOwnPropertyDescriptor(this, prop);
        },
    },

    // 🔸 obj.prototype
    prototype: {
        get: function() {
            return Object.getPrototypeOf(this);
        },
    },

});

📗 參考

• JS.info ⟩ Property flags and descriptors

• JavaScript: The Definitive Guide ⟩

  • 6.3, 6.4, 6.5, 6.6 Querying/Setting/Deleting/Testing/Enumerating Properties

  • 14.1 Property Attributes

📘 手冊

• Object.getOwnPropertyDescriptors()

• Object.defineProperty()

• Object.defineProperties()

• Object.prototype.propertyIsEnumerable()