JavaScript Object Properties —— Property attributes

Please indicate the source of the original reprint: http://agilestyle.iteye.com/blog/2341900

 

Property attributes

All properties have several associated attributes. These attributes define how the properties work.

 

Common Attributes

Both data and accessor properties have [[Enumerable]] and [[Configurable]] attributes.

var person1 = {
    name: "Nicholas"
};

Object.defineProperty(person1, "name", {
    enumerable: false
});

console.log("name" in person1);                     // true
console.log(person1.propertyIsEnumerable("name"));  // false

var properties = Object.keys(person1);
console.log(properties.length);                     // 0

Object.defineProperty(person1, "name", {
    configurable: false
});

// try to delete the Property
delete person1.name;
console.log("name" in person1); // true
console.log(person1.name);

// Object.defineProperty(person1, "name", { // error!!!
//     configurable: true
// });

 

Data Property Attributes

Data properties also have [[Writable]] and [[Value]] attributes,

var person1 = {};

Object.defineProperty(person1, "name", {
    value: "Nicholas",
    enumerable: true,
    configurable: true,
    writable: true
});

 

while accessor properties have [[Get]] and [[Set]] attributes.

var person1 = {
    _name: "Nicholas"
};

Object.defineProperty(person1, "name", {
    get: function () {
        console.log("Reading name");
        return this._name;
    },
    set: function (value) {
        console.log("Setting name to %s", value);
        this._name = value;
    },
    enumerable: true,
    configurable: true
});

console.log("name" in person1);                     // true
console.log(person1.propertyIsEnumerable("name"));  // true
delete person1.name;
console.log("name" in person1);                     // false
person1.name = "Greg";
console.log(person1.name);                          // "Greg"

Note: 

By default, [[Enumerable]] and [[Configurable]] are set to true for all properties, and [[Writable]] is set to true for data properties.

 

Defining Multiple Properties

You can change these attributes by using Object. defineProperty() or Object.defineProperties().

It's also possible to define multiple properties on an object simultaneously if you use Object.defineProperties() instead of Object.defineProperty(). This method accepts two arguments: the object to work on and an object containing all of the property information. The keys of that second argument are property names, and the values are descriptor objects defining the attributes for those properties.

For example, the following code defines two properties:

var person1 = {};

Object.defineProperties(person1, {
    // data property to store data
    _name: {
        value: "Nicholas",
        enumerable: true,
        configurable: true,
        writable: true
    },
    // accessor property
    name: {
        get: function () {
            console.log("Reading name");
            return this._name;
        },
        set: function (value) {
            console.log("Setting name to %s", value);
            this._name = value;
        },
        enumerable: true,
        configurable: true
    }
});

 

Retrieving Property Attributes

It’s also possible to retrieve these attributes by using Object.getOwnPropertyDescriptor().

var person1 = {
    name: "Nicholas"
};

var descriptor = Object.getOwnPropertyDescriptor(person1, "name");

console.log(descriptor.enumerable);         // true
console.log(descriptor.configurable);       // true
console.log(descriptor.writable);           // true
console.log(descriptor.value);              // "Nicholas"


var person2 = {};
Object.defineProperty(person2, "name", {
    value: "Nicholas"
});

var desc = Object.getOwnPropertyDescriptor(person2, "name");
console.log(desc.enumerable);               // false
console.log(desc.configurable);             // false
console.log(desc.writable);                 // false
console.log(desc.value);                    // "Nicholas"

 

Reference

Leanpub.Principles.of.Object-Oriented.Programming.in.JavaScript.Jun.2014