Discussion on Javascript data attribute and accessor attribute

The attributes of objects in ES5 can be divided into'data attributes' and'accessor attributes'.

Data attribute 1 is generally used to store data values, while accessor attribute corresponds to set/get operation, and cannot directly store data values.

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

Explanation: configurable: true/false, whether you can delete attributes through delete, whether you can modify attributes, whether you can modify attributes to accessor attributes, and the default is false;

enumerable: true/false, whether it can be returned through 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, sets the value of the property, default undefined.

Accessor Attributes: set, get, enumerable, configurable.

Explanation: configurable: true/false, whether you can delete attributes through delete, whether you can modify attributes, whether you can modify attributes to accessor attributes, the default is false;

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

set: function, the function called when the property value is read;

get: function, the function called when the property value is modified.

Adding properties to objects or modifying properties of existing properties uses the Object. defineProperty () or Object. defineproperties () methods;

Object.defineProperty(object, propertyname, descriptor):

Parameter explanation: object: Object that needs to add or modify attributes;

propertyname: Attribute name, string format;

descriptor: Description of a property that sets the properties of a data property or accessor property.

Case analysis:

Data attributes:

var emp = {

name:'tom'

};

 

Object.defineProperty(emp,'name',{

writable:false

});

emp.name = 'jery';
console.log(emp.name);// Output tom Because the writable For false



Object.defineProperty(emp,'age',{

configurable:false,

writable:true,

value:22

});

console.log(emp.age);// Output 22 Because the value For 22

emp.age = 25;

console.log(emp.age);// Output 25 , set up writable For true

delete emp.age;

console.log(emp.age);// Output 25 , set up configurable For false This property cannot be deleted 

Accessor properties:

var emp ={

_name:'tom',

_age:20

};



Object.defineProperty(emp,'name',{

get:function(){

return this._name;

}

});

console.log(emp.name);// Output tom , by get Method returns _name Value of 

emp.name = 'jery';

console.log(emp.name);// Output tom , no set Method, you can't modify it _name Value of 

 

Object.defineProperty(emp,'age',{

configurable:true,

get:function(){

 return this._age;

}

set:function(age){

this._age = age;

}

});

emp.age = 25;
console.log(emp.age)// Output 25 , emp.age=25 Is to use set Method sets the 25 Assign a value to _age , emp.age Is to use get Method sets the _age Read it out 

delete emp.age;

console.log(emp.age);// Output undefined , configurable For true You can use the delete Method sets the emp.age Property deletion 

Note: Visitor attributes can play a very good role in protection, when only get method, it can be read-only can not write; On the contrary, only set, it can only be written, not read