Detailed explanation of data attributes and accessor attribute instances in Javascript objects

The properties of objects in ES5 can be divided into two types: 'data properties' and 'accessor properties'.

Data attributes are generally used to store data values. Accessor attributes correspond to set/get operations and cannot directly store data values.

Data attribute characteristics: value, writable, enumerable, configurable.

Explanation: configurable: true/false, whether the attribute can be deleted through delete, whether the characteristics of the attribute can be modified, whether the attribute can be modified as an accessor attribute, the default is false;

enumerable: true/false, whether it can be returned through a for in loop, the default is false;

writable: true/false, whether the value of the attribute can be modified, the default is false;

value: undefined, set the value of the attribute, the default is undefined.

Accessor attribute characteristics: set, get, enumerable, configurable.

Explanation: configurable: true/false, whether the attribute can be deleted through delete, whether the characteristics of the attribute can be modified, whether the attribute can be modified as an accessor attribute, the default is false;

enumerable: true/false, whether it can be returned through a for in loop, the default is false;

set: function, the function called when reading the attribute value;

get: function, modify Function called when the property value is passed.

To add properties to an object or modify the characteristics of an existing property use the Object.defineProperty() or Object.defineproperties() method;

Object.defineProperty(object, propertyname, descriptor):

Parameter explanation: object: the object whose properties need to be added or modified;

propertyname: the name of the property, string format;

descriptor: description of the property, set data attributes or Characteristics of accessor properties.

Example analysis:

Data attributes:

##

var emp = {
 
name:'tom'
 
};
   
 
Object.defineProperty(emp,'name',{
 
writable:false
 
});
 
emp.name = 'jery';
console.log(emp.name);//输出tom，因为已经设置了writable为false
 
 
Object.defineProperty(emp,'age',{
 
configurable:false,
 
writable:true,
 
value:22
 
});
 
console.log(emp.age);//输出22，因为设置了value为22
 
emp.age = 25;
 
console.log(emp.age);//输出25，设置了writable为true
 
delete emp.age;
 
console.log(emp.age);//输出25，设置了configurable为false，此属性删除不了

Accessor properties:

var emp ={
 
_name:'tom',
 
_age:20
 
};
 
  
Object.defineProperty(emp,'name',{
 
get:function(){
 
return this._name;
 
}
 
});
 
console.log(emp.name);//输出tom，由get方法返回_name的值
 
emp.name = 'jery';
 
console.log(emp.name);//输出tom，没有set方法，修改不了_name的值
 
   
Object.defineProperty(emp,'age',{
 
configurable:true,
 
get:function(){
 
 return this._age;
 
}
 
set:function(age){
 
this._age = age;
 
}
 
});
 
emp.age = 25;
console.log(emp.age)//输出25，emp.age=25是使用set方法将25赋值给_age，emp.age是使用get方法将_age的读取出来 
delete emp.age; 
console.log(emp.age);//输出undefined，configurable为true，可以使用delete方法将emp.age属性删除

Remarks: Accessor Attributes can play a very good protective role. When there is only a get method, it can only be read but not written; conversely, when there is only a set method, it can only be written but not read.

The above is the detailed content of Detailed explanation of data attributes and accessor attribute instances in Javascript objects. For more information, please follow other related articles on the PHP Chinese website!