Deep understanding of object data properties and accessor properties

There are two ways to create an object: The first, with the object constructor followed by the new operator, and the second, the object literal. As follows

var New  = ' Nicy '=+function() {    Console.log (this. name);};         var person = {    ' nicy ',    +,    function () {        Console.log (this. Name);    }}

The objects created in both ways are the same, with the same properties and methods. Inside these properties are property descriptors that describe their behavior.

Object.defineproperty ()

You can create a property directly on an object by using Object.defineproperty (), or you can modify an existing property.

Object.defineproperty (obj, prop, descriptor) receives three parameters:

OBJ: The object where the property resides

Prop: The name of the property to access

Descriptor: Descriptor Object

The Descriptor object contains six properties: Configurable, enumerable, writable, value, get, set, and the Object.defineproperty () method must be used to modify the attributes of the property.

The property of the object that was added in both of these ways, whose Boolean attribute default value is True, When you modify attribute properties by using Object.defineproperty, only the attributes that need to be modified are set, and the properties that are created by Object.defineproperty have a Boolean attribute whose default value is False.

There are two types of attributes in ECMAScript: Data properties and accessor properties.

Data properties

A Data property contains four property descriptors:

[[Configurable]]: Indicates whether the property can be redefined by deleting the property, whether the property attribute can be modified, or whether the property can be modified as an accessor property. The object property, which is added by the above method, is true by default.

[[Enumerable]]: Indicates whether the property can be looped through for-in. The object property, which is added by the above method, is true by default.

[[writable]]: Indicates whether the value of the property can be modified. The object property, which is added by the above method, is true by default.

[[Value]]: Contains the data value of this property, can read the write. The object properties that are added in the above manner are undefined by default.

Writable

var person ="Name", {    ' nicy '= ' Lee '; Console.log (person.name)    //  ' nicy '"name", {    True = ' Lee '; Console.log (person.name)    //  ' Lee ' 

Object.defineproperty directly created property writable default to False,value value can not be modified, at this time to modify the name of Lee, in the non-strict mode will not error, but the operation is ignored, in strict mode will be error.

Configurable

varperson ={name:' Nicy ', Age:21st, Sayname:function() {Console.log ( This. Name); }}object.defineproperty (person,"Name", {configurable:false})DeletePerson.name;//operation ignored, unable to delete property via delete
Object.defineproperty (person, "name", {//Throw ErrorConfigurable:true    })
Object.defineproperty (person,"Name", {//Throw ErrorEnumerablefalse})
Object.defineproperty (person,"Name", {//because writable is true, you can modify the valueValue: ' Lucy '})
Console.log (Person.name)//Lucy

Object.defineproperty (person, "name", {//writable a one-way modification that can be true-to-falseWritable:false})
Object.defineproperty (person,"Name", {//Throw ErrorValue: ' Lee '})
Object.defineproperty (person,"Name", {//throw error, at which point writable cannot be false---trueWritable:true})

Summarize configurable: When configurable is set to False,

1, you can not delete the property by deleting it to redefine the attribute;

2, can not be converted to accessor attributes;

3, configurable and enumerable cannot be modified;

4,writable can be modified one-way to false, but can not be changed from false to true;

5, value can be modified according to writable.

When configurable is false, delete this property with delete, in non-strict mode, will not error, but the operation is ignored, in strict mode will be error, and other non-modified features will be error-corrected.

Enumerable

Enumerable indicates whether an object property can be enumerated in for...in and Object.keys ().

varperson ={};object.defineproperty (person,"A", {value:1, enumerable:true}); Object.defineproperty (person,"B", {value:2, enumerable:false}); Object.defineproperty (person,"C", {value:3});//enumerable defaults to FalsePERSON.D = 4;//If you create a property of an object using a direct assignment, the enumerable of this property defaults to True for(varIinchPerson )  {Console.log (i); }//' A ' and ' d 'Object.keys (person);//["A", "D"]

Accessor properties

The Accessor property contains four property descriptors:

[[[Configurable]]: Indicates whether the property can be redefined by deleting the attribute, whether the property attribute can be modified, or whether the property can be modified to a data property. property that is defined directly on the object, which defaults to true.

[[Enumerable]]: Indicates whether the property can be looped through for-in. property that is defined directly on the object, which defaults to true.

[[Get]]: The function that is called when the property is read, the default is undefined.

[[Set]]: The function that is called when the property is written, the default is undefined.

varperson ={name:' Nicy ', _age:21st, Year:1997, _year:1997, Sayname:function() {Console.log ( This. Name); }}object.defineproperty (person,"Age", {get:function() {        return  This. _age; }, set:function(value) { This. _age =value; // ...    }})

accessor properties defined with Object.defineproperty (), whose configurable and enumerable default to False.

Conversion of data properties to accessor properties Object.getownpropertydescriptor properties of Read attributes

Use Object.getownpropertydescriptor to get a descriptor for a property:

Object.getownpropertydescriptor (obj, prop)

OBJ: The object where the property resides;

Prop: The name of the property to access.

Accessor properties, data properties

Attributes can only be one of the accessor descriptors and data descriptors, and the value and writable of their properties are discarded when an existing data attribute plus get or set is converted to an accessor property.

The following code converts the original data attribute year of the object to an accessor property:

* Note: In the get and set of accessor properties, this can not be used to access the property itself, otherwise infinite recursion will result in a memory leak.

//set get and set any one of them to be converted to accessor propertiesObject.defineproperty (person, ' year ', {get:function() {//return this,year; Error        return  This. _year; }, set:function(value) {//this.year = value; Error         This. _year=value; }})varDescriptor = Object.getownpropertydescriptor (person, ' year '); Console.log (descriptor); //{get:ƒ, set:ƒ, Enumerable:true, configurable:true}

In the original Data property year, set the Get or set for the property using Object.defineproperty (), which you can convert to accessor properties.

Accessor properties, data properties

Converting an accessor property to a data property requires only one of the two property descriptors of value or writable to be set for an existing accessor property, and its original get and set are discarded to convert to data properties.

The accessor properties defined for person above, age, set only get and set through Object.defineproperty (), so configurable defaults to false and cannot be converted to data properties. properties that can be converted between accessor properties and data properties whose configurable attribute value must be true.

In the following code, we define a new accessor property job for person, set its configurable to true, and convert it to a data property:

Object.defineproperty (person, "job", {configurable:true, Enumerable:true, get:function() {        return  This. _job; }, set:function(value) { This. _job =value; }})//set value and writable to convert to data propertiesObject.defineproperty (person, "job", {value:' Worker ', writable:true})varDescriptor = Object.getownpropertydescriptor (person, ' job '); Console.log (descriptor); //{value: "Worker", Writable:true, Enumerable:true, configurable:true}

The data descriptor value, writable, and accessor descriptor get, set cannot be set at the same time, or an error will be presented.

Object.defineproperties ()

You can define multiple properties for an object at once through Object.defineproperties ().

varperson ={};object.defineproperties (person, {name: {value:' Nicy ', writable:true}, _age: {value:21st, Enumerable:true, writable:true, Configurable:true}, Age: {get:function() {    return  This. _age; }, set:function(value) { This. _age =value; }  }});