On JavaScript data attributes and accessor properties _javascript tips

In JavaScript, an object is defined as "a collection of unordered attributes, whose properties can contain basic values, objects, or functions." In layman's terms, we can interpret an object as a set of name-value pairs, where the value can be data or functions.

There are usually two ways to create a custom object, the first of which is to create an instance of object and then add properties and methods to it, for example:

var person = new Object (); 
Person.name = "Scott"; 
Person.age =; 
Person.sayname = function () { 
  alert (person.name); 

The second method, the object literal method, is generally recommended for creating objects such as:

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

Property type

Two different properties are defined in JavaScript: Data properties and accessor properties. Data properties are typically used to store data values, and accessor properties are generally get/set operations and cannot store data values directly. In ES5, we define attributes for describing the various characteristics of a property. There is no direct access to the attribute in JavaScript, we put it in two opposite brackets, for example [[Enumerable]].

• Data Properties

Data properties describe their behavior primarily with four attributes:

1.[[configurable]]: default is True. Indicates whether the attribute can be deleted by deleting the attribute, whether the attribute attribute is modified, or whether the property can be modified to an accessor property;

2.[[enumerable]]: default is True. Indicates whether the property can be returned by for-in Loop;

3.[[writable]]: default is True. Indicates whether the property's value can be modified.

4.[[value]]: The default value is undefined. Represents a data value that contains a property. Read-write property values are from this location.

For the properties above defined directly on the person object, their [[configurable]], [[Enumerable]], [[writable]] attributes are set to True by default, and the [[Value]] attribute is set to a specific value. If you want to modify property default attributes, you can use the Object.defineproperty () method provided by ES5, which receives three parameters: the object of the property, the name of the property, and a descriptor object. A descriptor object can contain only one or more of the four attributes mentioned above. 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."

The attribute writable of the person object Name property is set to False, and the value of this property is not modifiable, so the copy operation on the property is 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." 

As you can see, when you set the attribute value of the Name property configurable to False, you are not able to remove the attribute from the object. It should be noted, however, that when the attribute is defined as not configurable, it cannot be changed back to configurable. Modifying any features other than writable at this time will be an error, for example:

var person = { 
  name: ' Scott '
} 
object.defineproperty (person, ' name ', { 
  configurable:false; 
}) 

Object.defineproperty (person, "name", { 
  configurable:true;  Error is thrown here 
}) 

That is, after modifying the configurable attribute to False, there is a limit to modifying other attributes.

• Accessor Properties

Accessor properties do not contain data values. It contains a pair of getter and setter functions. When the accessor property is read, the Getter function is invoked and a valid value is returned, and when the accessor property is written, the setter function is invoked and the new value is passed in, and the setter function handles the data. This property has four attributes:

1.[[configurable]]: default is True. Indicates whether the attribute can be deleted by deleting the attribute, whether the attribute attribute is modified, or whether the property can be modified to an accessor property;

2.[[enumerable]]: default is True. Indicates whether the property can be returned by for-in Loop;

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

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

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

var person = { 
  _name: "Scott", 
  _age:24, 
  _tel:86247 
}; 
The Name property is read-only 
(person, ' name ', { 
  get:function () {return 
    this._name; 
  } 
}) Object.defineproperty; 
The Age property is write-only unreadable 
object.defineproperty (person, ' age ', { 
  set:function (p) { 
     this._age = p; 
  } 
}); 
The Tel property is readable and writable 
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, unreadable attribute 
person.age =; 
Console.log (person._age);  25, has modified 
console.log (Person.tel);  "86247", readable attribute 
Person.tel = "13975"; 
Console.log (Person.tel);  "13975", you can modify

An underscore in front of a property represents a property that can only be accessed through an object method. When we use person.name, we actually call the Getter function of the Name property, which is called the setter function of the Name property when assigning a value to Person.name, so the relationship between the property and the accessor is clear.

Defining multiple properties

In fact, ES5 provides us with a way to define multiple properties for an object, that is, object.defineproperties (), which receives two parameters, the object that contains the property, and the object that the property and its descriptor object that you want to modify. For example, modify the example above to define multiple attributes 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;}} 
);

Attributes of Read properties

ES5 provides a object.getownpropertydescripter () method to obtain a descriptor for a given property. The method receives two parameters: the object that contains the property and the name of the property whose descriptor is being read. The result returns an object, and if it is an accessor property, the returned object has configuable, enumerable, get, and set, and if it is a data property, the properties of the returned object include Configuable, enumerable, Writable and value. For example above, 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 descripter = Object.getownpropertydescripter (Person, "tel"); 
Console.log (descripter.value);  Undefined 
console.log (descripter.enumerable);  False 
Console.log (typeof descripter.get);  "Function"

The above code gets the Tel property of the person object, because it is an accessor property, so its value is undefined,enumerable to false, and get is a pointer to the Getter function.

This article on the JavaScript data properties and accessor properties is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud-dwelling community.