javascript--data properties and accessor properties

The most basic method of creating an object in JavaScript is an instance of new object () and then adding properties and methods to it, the following example creates a person object that contains the property name, and the Name property has a characteristic value of "Xiaochang":

　　var person = new Object();person.name = "xiaochang";person.say = function(){ console.log("Hi, my name is " + this.name);};person.say(); //Hi, my name is xiaochang

Eamascript. 5 defines the various attributes that describe these attribute characteristics, including data properties and accessor properties.

Data properties: This property contains the position of a data value that contains 4 attributes that describe the behavior:

1. [[Configurable]]: Indicates whether the attribute can be deleted by deleting the attribute, whether the attribute is modified, and whether the property can be modified to an accessor property.

2. [[Enumerable]]: Indicates whether it can be returned using for-in loops.

3. [[writable]]: Indicates whether the value of the property can be modified.

4. [[Value]]: The data value that contains this property. Read the attribute value from this location and write the attribute value to this location, the default value is undefined.

The data attributes of the properties defined directly on the object default to the following:

1. [[Configurable]]:true

2. [[Enumerable]]:true

3. [[Writable]]:true

4. [[[Value]]: "Xiaochang" (initial assignment)

These attributes cannot be accessed directly, and the attribute can be modified only by the Object.defineproperty () method, which contains three parameters: the object of the property, the name of the property, the Descriptor object [configurable|enumerable| Writable|value]. For example:

　　var person = { age:100 };Object.defineProperty(person,"name",{ configurable:false, writable:false, value:"xiaochang"});Object.defineProperty(person,"tall",{ value:160});for(attr in person){ console.log(attr); //name,age}console.log(person.name); //xiaochangperson.name="CC"; //为name属性指定新值console.log(person.name); //xiaochangdelete person.name; //删除name属性console.log(person.name); //xiaochangconsole.log(person.age); //100person.age=200; //为age属性指定新值console.log(person.age); //200delete person.age; //删除age属性console.log(person.age); //undefinedconsole.log(person.tall); //160person.tall = 160; //修改tall属性的值console.log(person.tall); //160delete person.tall; //删除name属性console.log(person.tall); //160

The analysis example shows that properties defined directly on the object, such as Age,[[configurable]],[[enumerable]],[[writable], are set to true.

[[Configurable]],[[writable]] of the property name is set to False, so it cannot be modified and deleted.

When the Object.defineproperty () method is invoked, the default is false, such as property tall, if the value of the specified configurable,enumerable,writable is not displayed.

Also note that when configurable is set to false, it cannot be changed to true, and other attributes cannot be modified except writable. You can invoke Object.defineproperty () to modify the same property multiple times if configurable is true.

Modifying a property that cannot be configured under strict conditions is ignored, and an error is thrown in strict mode.

Accessor properties: Contains getter and setter functions. When the accessor property is read, the Getter function is invoked, a valid value is returned, and when the accessor property is written, the setter function is invoked to pass in the new value. It contains 4 features:

1. [[Configurable]]: Indicates whether the attribute can be deleted by deleting the attribute, whether the attribute is modified, and whether the property can be modified to an accessor property.

2. [[Enumerable]]: Indicates whether it can be returned using for-in loops.

3. [[Get]]: The function that is called when reading the property, the default undefined.

4. [[Set]]: The function called when writing the property, the default undefined.

Getter and setter do not have to appear in pairs, only the Getter function proves that the property is read-only, the attempt to write in the strict mode will be ignored, strict mode will throw an error. In the same way, only the setter function proves that write-only cannot read, attempts to read in a undefined mode to return to the, strict mode throws an error.

Accessor properties cannot be directly defined and must be defined using Object.defineproperty (), as follows:

　　var person = { _name:"xiaochang", //name属性只读不可写 _age:100, //age属性只写不可读 _tel:123456 //tel属性可读可写};Object.defineProperty(person,"name",{ get:function(){ return this._name; }});Object.defineProperty(person,"age",{ set:function(newage){ this._age = newage; }});Object.defineProperty(person,"tel",{ get:function(){ return this._tel; }, set:function(newtel){ this._tel= newtel; }});console.log(person.name); //"xiaochang"person.name = "CC"; //尝试修改name属性console.log(person.name); //"xiaochang"console.log(person.age); //不可读属性，undefinedperson.age = 200; //修改ageconsole.log(person._age); //直接读取对象方法才能访问的属性，可以看到值已更新200console.log(person.tel); //123456person.age = 654321; //更新telconsole.log(person.tel); //654321

The underscore in front of the attribute represents a property that can only be accessed through the object method, and when we call Person.name, the Getter function of the Name property is actually invoked (the same result can be obtained by calling Person._name directly, so that the accessor makes no sense). The relationship between the property and the accessor can be clearly seen in the example above.

Browsers that support the Object.defineproperty () method have ie9+ (IE8 is the browser that first implements the Object.defineproperty () method, but is limited to DOM objects and can only create accessor properties), firefox4+, safari5+,opera12+, Chrome. You cannot modify [[configurable]],[[enumerable]] in browsers that do not support the Object.defineproperty () method.

Before the Object.defineproperty () method, to create accessor properties, a nonstandard method is generally used: __definegetter__ () and __definesetter__ (), which were first introduced in Firefox, Later CHROME1 and Opera9.5 also supported. Overwrite the above Tel property accessor as follows:

　　person.__defineGetter__("tel",function(){ return this._tel;});person.__defineSetter__("tel",function(newtel){ this._tel = newtel;});

ECMAScript. 5 also defines the Object.defineproperties () method, which contains two parameters: the object in which the property is located, the name of multiple properties, and the object that consists of its descriptor object. The effect is the same for Object.defineproperty (), and the difference is that it can be set at once for multiple properties. Browsers that support this method are ie9+, firefox4+, safari5+,opera12+, and Chrome. The example above can be rewritten as follows:

　　var person = { _name:"xiaochang", //name属性只读不可写 _age:100, //age属性只写不可读 _tel:123456 //tel属性可读可写};Object.defineProperties(person,{ name:{ get:function(){ return this._name; } }, age:{ set:function(newage){ this._age = newage; } }, tel:{ get:function(){ return this._tel; }, set:function(newtel){ this._tel= newtel; } }});

For the attribute attributes mentioned above, ECMAScript. 5 gives a method Object.getownpropertydescriptor () that can get a descriptor for a given property, which contains two parameters: the object in which the property is located, and the name of the property to read its descriptor. method returns an object. For the above example, you can get:

　　var descriptor = Object.getOwnPropertyDescriptor(person,"tel");for(attr in descriptor ){ console.log(attr+":"+descriptor[attr]);}运行结果如下：get:function (){return this._tel;}set:function (newtel){this._tel= newtel;}enumerable:falseconfigurable:false