A brief discussion on JavaScript data attributes and accessor attributes

Author：Eve Cole Update Time：2025-08-30 02:48:01

In JavaScript, objects are defined as "a collection of unordered attributes whose properties can contain basic values, objects, or functions." In layman's terms, we can understand objects as sets of name-value pairs, where values can be data or functions.

There are usually two ways to create a custom object. The first is to create an instance of an Object and then add properties and methods to it, such as:

 var person = new Object(); person.name = "Scott"; person.age = 24; person.sayName = function(){ alert(person.name); }

The second method is the object literal method. It is generally recommended to use this method to create objects, for example:

 var person = { name: "Scott", age: 24, sayName: function(){ alert(this.name); } }

Attribute Type

There are two different properties defined in JavaScript: data properties and accessor properties. Data attributes are generally used to store data values, while accessor attributes generally perform get/set operations and cannot directly store data values. In ES5, we define attributes to describe various features of properties. In JavaScript, we cannot directly access the feature, so we put it in two pairs of square brackets, such as [[Enumerable]].

•Data properties

Data attributes mainly describe their behavior:

1.[[Configurable]]: Default is true. Indicates whether the attribute can be deleted to redefine the attribute, whether the attribute characteristics can be modified, or whether the attribute can be modified to the accessor attribute;

2.[[Enumerable]]: Default is true. Indicates whether the attribute can be returned through the for-in loop;

3.[[Writable]]: Default is true. Indicates whether the value of the attribute can be modified.

4.[[Value]]: The default value is undefined. Represents the data value containing the attribute. Reading and writing attribute values are performed from this position.

For properties defined above directly on the person object, their [[Configurable]], [[Enumerable]], and [[Writable]] properties are set to true by default, while the [[Value]] properties are set to a specific value. If you want to modify the default properties of a property, you can use the Object.defineProperty() method provided by ES5. This method receives three parameters: the object where the property is located, the name of the property, and a descriptor object. A descriptor object can only contain one or more of the above four characteristics. Examples are as follows:

 var person = { name: "Scott"} Object.defineProperty(person,"name",{ writable:false; }) console.log(person.name); //"Scott" person.name = "Evan"; console.log(person.name); //"Scott"

Set the writable property of the person object name attribute to false. The value of this attribute is unmodified, so the copy operation of this attribute will be ignored directly.

 var person = { name: "Scott"} Object.defineProperty(person,"name",{ configurable:false; }) console.log(person.name); //"Scott" delete person.name; console.log(person.name); //"Scott"

It can be seen that when the property value configurable of the name attribute is set to false, it means that the attribute cannot be deleted from the object. But it should be noted that when a property is defined as unconfigurable, it cannot be turned back into configurable. At this time, modifying other features other than writable will cause an error, for example:

 var person = { name: "Scott"} Object.defineProperty(person,"name",{ configurable:false; }) Object.defineProperty(person,"name",{ configurable:true; // An error will be thrown here})

That is to say, after modifying the configurable feature to false, there will be restrictions when modifying other features.

•Accessor Properties

The accessor attribute does not contain data values. It contains a pair of getter and setter functions. When the accessor attribute is read, the getter function is called and the valid value is returned; when the accessor attribute is written, the setter function is called and the new value is passed, and the setter function is responsible for processing the data. This property has four characteristics:

2.[[Enumerable]]: Default is true. Indicates whether the attribute can be returned through the for-in loop;

3.[[Get]]: The function called when reading attributes, default is undefined;

4.[[Set]]: The function called when writing attributes, default is undefined.

Accessor properties cannot be defined directly, they must be defined through the Object.defineProperty() function, for example:

 var person = { _name: "Scott", _age: 24, _tel: 86247 }; //The name attribute is read-only Object.defineProperty(person,"name",{ get: function(){ return this._name; } }); //The age attribute is write-only Object.defineProperty(person,"age",{ set: function(p){ this._age = p; } }); //The tel attribute is read-only Object.defineProperty(person,"tel",{ get:function(){ return this._tel; }, set: function(p){ this._tel = p; } }); console.log(person.name); //"Scott" person.name = "Evan"; console.log(person.name); //"Scott", the modification of the name attribute is invalid.console.log(person.age); //undefined, the unreadable attribute person.age = 25; console.log(person._age); //25, the console.log(person.tel); //"86247", the readable attribute person.tel = "13975"; console.log(person.tel); //"13975", the modification can be made

The underscore before the attribute indicates an attribute that can only be accessed through the object method. When we use person.name, we actually call the getter function of the name attribute, and when we assign a value to person.name, we call the setter function of the name attribute, so that the relationship between the attribute and the accessor is very clear.

Define multiple attributes

In fact, ES5 provides us with a method to define multiple properties for an object, namely Object.defineProperties(). This function receives two parameters, the object where the property is located, and the object composed of the attributes that need to be modified and its descriptor objects. For example, modify the above example to define multiple properties at once, as follows:

 var person = { _name: "Scott", _age: 24, _tel: 86247 }; Object.defineProperties(person,{ name:{ get: function(){ return this._name; } }, age:{ set: function(p){ this._age = p; } }, tel:{ get:function(){ return this._tel; }, set: function(p){ this._tel = p; } } });

Read properties

ES5 provides the Object.getOwnPropertyDescripter() method to get the descriptor for a given property. This method receives two parameters: the object where the attribute resides and the attribute name of its descriptor to be read. The result will return an object. If it is an accessor attribute, the returned objects include configuable, enumerable, get and set; if it is a data attribute, the properties of the returned object include configuable, enumerable, writable and value. For the above example, use the following:

 var person = { _name: "Scott", _age: 24, _tel: 86247 }; Object.defineProperties(person,{ name:{ get: function(){ return this._name; } }, age:{ set: function(p){ this._age = p; } }, tel:{ get:function(){ return this._tel; }, set: function(p){ this._tel = p; } } }); var describer = Object.getOwnPropertyDescripter(person,"tel"); console.log(descripter.value); //undefined console.log(descripter.enumerable); //false console.log(typeof descriptioner.get); //"function"

The above code obtains the tel property of the person object. Since it is an accessor property, its value is undefined, enumerable is false, and get is a pointer to the getter function.

The above article briefly discusses JavaScript data attributes and accessor attributes is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.