🚩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.

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);
        },
    },

});

Previousproperty Nextproperty descriptor

Last updated 2 years ago

Was this helpful?