Data properties and accessor properties in JavaScript

1. Properties

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

　　First, data properties

The Data property contains the position of a data value, where the value can be read and written.

var person = {Name: "Nicholas"};

To modify a property's default attribute, you must use the Object.defineproperty () method of ECMAScript 5, which receives 3 parameters: the object where the property resides, the name of the property, and a descriptor object. Where the properties of the descriptor (descriptor) object must be: Configurable, enumerable, writable, and value. Set one or more of these values to modify the corresponding attribute values. For example:　

var person = {};
Object.defineproperty (person, "name", {
Writable:false,
Value: "Nicholas"
});
alert (person.name); "Nicholas"
Person.name = "Greg";
alert (person.name); "Nicholas"

This example creates a property named name whose value "Nicholas" is read-only. The value of this property is not modifiable, and if you attempt to specify a new value for it, the assignment is ignored in non-strict mode, and in strict mode, the assignment will result in an error being thrown.

　　Similar rules apply to non-configurable properties. For example:

var person = {};
Object.defineproperty (person, "name", {
Configurable:false,
Value: "Nicholas"
});
alert (person.name); "Nicholas"
Delete Person.name;
alert (person.name); "Nicholas"

Set configurable to False to indicate that the property cannot be removed from the object. If you call delete on this property, nothing will happen in the non-strict mode and will cause an error in strict mode. Furthermore, once the attribute is defined as not configurable, it cannot be changed back to configurable. 　　At this point, calling the Object.defineproperty () method to modify an attribute other than writable will result in an error: var person = {}; Object.defineproperty (person, "name", {

Configurable:false,
Value: "Nicholas"
});
Throw error
Object.defineproperty (person, "name", {
Configurable:true,
Value: "Nicholas"
});
In other words, the Object.defineproperty () method can be called multiple times to modify the same property, but the configurable
After the attribute is set to False, there is a limit.

When you call the Object.defineproperty () method, the default values for the configurable, enumerable, and writable attributes are false if you do not specify them. In most cases, it may not be necessary to take advantage of these advanced features provided by the Object.defineproperty () method. However, understanding these concepts is useful for understanding JavaScript objects.

Second, accessor properties

Accessor properties do not contain data values; they contain a pair of getter and setter functions (however, neither of these functions is required).

When the accessor property is read, the Getter function is called, which is responsible for returning a valid value, and when writing the accessor property, the setter function is called and the new value is passed, which determines how the data is processed. Accessor properties have the following 4 attributes.

? [[Configurable]]: Indicates whether the property can be redefined by deleting the property from Delete, can modify the attribute's attributes, or can modify the property to a data property. The default value for this attribute is true for properties that are defined directly on the object.

? [[Enumerable]]: Indicates whether the property can be returned through a for-in loop. The default value for this attribute is true for properties that are defined directly on the object.

? [[Get]]: The function that is called when the property is read. The default value is undefined.
? [[Set]]: The function that is called when the property is written. The default value is undefined.
Accessor properties cannot be defined directly and must be defined using Object.defineproperty (). Take a look at the following example:

var book = {

_year:2004,
Edition:1
};
Object.defineproperty (book, ' Year ', {
Get:function () {
return this._year;
},
Set:function (NewValue) {
if (NewValue > 2004) {
This._year = newvalue;
This.edition + = newValue-2004;
}
}
});
Book.year = 2005;
alert (book.edition); 2

　The above code creates a book object and defines two default properties for it: _year and edition. _year the preceding underscore is a common notation used to represent properties that can be accessed only through object methods. The accessor property, year, consists of a getter function and a setter function. The Getter function returns the value of _year, and the setter function determines the correct version by calculation. Therefore, modifying the Year property to 2005 causes _year to become 2005, and edition becomes 2. This is a common way of using accessor properties, where setting the value of one property causes other properties to change.

You do not have to specify both getter and setter at the same time. Specifying the getter only means that the property is not writable, and the attempt to write the property is ignored. In strict mode, attempting to write a property that specifies only the Getter function throws an error. Similarly, properties that specify only setter functions are also unreadable, otherwise undefined are returned in non-strict mode, and errors are thrown in strict mode.

　　browsers that support ECMAScript 5 are ie9+ (IE8 is only partially implemented), Firefox 4+, Safari 5+, Opera 12+ and Chrome. Before this approach, to create accessor properties, you typically use two nonstandard methods:__definegetter__ () and __definesetter__ (). The two methods were originally introduced by Firefox, and laterthe same implementation was made for Safari 3,Chrome 1, and Opera 9.5. Using these two legacy methods, you can rewrite the previous example as follows.

var book = {
_year:2004,
Edition:1
};
To define an old method of an accessor
BOOK.__DEFINEGETTER__ ("Year", function () {
return this._year;
});
BOOK.__DEFINESETTER__ ("Year", function (NewValue) {
if (NewValue > 2004) {
This._year = newvalue;
This.edition + = newValue-2004;
}
});
Book.year = 2005;
alert (book.edition); 2

　[[Configurable] and [[Enumerable]] cannot be modified in browsers that do not support the Object.defineproperty () method.

Data properties and accessor properties in JavaScript