🚩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 1 year ago

// ⭐ 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'

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