JavaScript: Understanding Objects

ECMA-262 defines an object as: "A collection of unordered attributes whose properties can contain basic values, objects, or functions." ”

Strictly speaking, this is equivalent to saying that the object is a set of values that do not have a particular order. Each property or method of an object has a name, and each name is mapped to a value.

Because of this, we can think of the ECMAScript object as a hash table: nothing more than a set of name-value pairs, where values can be data or functions.

Property type

ECMA-262 version 5th describes the various characteristics of a property when it defines an intrinsic-only feature (attribute).

These attributes are defined for the purpose of implementing the JavaScript engine, so they are not directly accessible in JavaScript. To indicate that the attribute is an intrinsic value, the specification places them in two pairs of square brackets, such as [[Enumerable]].

There are two properties in ECMAScript: Data properties and accessor properties.

1. Data properties

The Data property contains the location of a data value. Values can be read and written at this location. The data attribute has 4 attributes that describe its behavior.

• [[Configurable]]: Indicates whether the property can be redefined by deleting the property, whether the attribute is modified, or whether the property is modified as an accessor property. This feature is typically true by default.
• [[Enumerable]]: Indicates whether the property can be returned through a for-in loop. The default is true.
• [[writable]]: Indicates whether the value of the property can be modified. The default is true.
• [[Value]]: Contains the data value for this property. When reading the property value, read from this position, and when writing the value of the property, save the new value in this position. The default value is undefined.

To modify the properties default attribute, use the ECMAScript5 Object.definedproperty () method. This method receives three parameters: the object where the property resides, the name of the property, and a descriptor object. Where the properties of the descriptor (descriptor) object must be: Configurable, enumerable, writable, and value. Set one or more of these values to modify the corresponding attribute values.

var person ="Name", {    false,    "Nick"//  " Nick "person.name =" Gray "//  " Nick "//  name is a read-only attribute, non-strict mode, The assignment operation is ignored; In strict mode, the assignment operation throws an error

varperson ={};object.defineproperty (person,"Name", {configurable:false; Value:"Nick."}); alert (person.name); //"Nick."DeletePerson.name;alert (person.name);//"Nick."//set configurable to False to indicate that the property cannot be removed from the object//If you call Delete on this property, nothing will happen in the non-strict mode, and the next one in strict mode causes an error//also, once the attribute is defined as not configurable, it cannot be changed back to configurable//at this point, calling the Object.defineproperty () method to modify an attribute other than writable will result in an error

2. Accessor Properties

Accessor properties do not contain data values; they contain a pair of getter and setter functions (however, neither of these functions is required).

When the accessor property is read, the Getter function is called, which is responsible for returning a valid value, and when writing the accessor property, the setter function is called and the new value is passed, which determines how the data is processed. Accessor properties have the following 4 attributes:

• [[Configurable]]: Indicates whether the property can be redefined by deleting the property, whether the attribute is modified, or whether the property is modified as an accessor property. This feature is typically true by default.
• [[Enumerable]]: Indicates whether the property can be returned through a for-in loop. The default is true.
• [[Get]]: The function that is called when the property is read. The default value is undefined.
• [[Set]]: The function that is called when the property is written. The default value is undefined.

Accessor properties cannot be defined directly and must be defined using Object.defineproperty ().

varBook ={_year:2004, Edition:1};object.defineproperty (book,"Year", {get:function(){             return  This. _year; }, set:function(newvalue) {if(NewValue > 2004) {                  This. _year =NewValue;  This. edition + = newValue-2004; }}); Book.year= 2005; alert (book.edition);//2

The book object defines two default properties: _year and edition. _year the preceding underscore is a common notation used to represent properties that can only be accessed through object methods. The accessor property, year, consists of a getter function and a setter function. The Getter function returns the value of _year, and the setter function determines the correct version by calculation. Therefore, modifying the Year property to 2005 causes _year to become 2005, and edition becomes 2. This is a common way of using accessor properties, where setting the value of one property causes other properties to change.

You do not have to specify both getter and setter at the same time. Specifying only getter means that the property is not writable, and attempting to write the property is not ignored. In strict mode, attempting to write a property that specifies only the Getter function throws an error. Similarly, properties that specify only the setter function cannot be read, otherwise the undefined is returned in non-strict mode, and an error is thrown in strict mode.

This method of supporting ECMASCript5 Object.defineproperty () has ie9+, firefox4+, safari5+, opera12+, and Chrome. Before this method, to create an accessor property, you typically use two non-callout methods: __definegetter__ () and __definesetter__ ().

varBook ={_year:2004, Edition:1};//to define an old method of an accessorBOOK.__DEFINEGETTER__ ("Year",function(){       return  This. _year;}); BOOK.__DEFINESETTER__ ("Year",function(newvalue) {if(NewValue > 2004) {            This. _year =NewValue;  This. edition + = newValue-2004; }}); Book.year= 2005; alert (book.edition);//2

[[Configurable] and [[Enumerable]] cannot be modified in browsers that do not support the Object.defineproperty () method.

3. Define multiple properties

The Object.defineproperties () method is defined in ECMAScript5, and multiple properties can be defined once by descriptor.

This method receives two object parameters:

The first object is the object whose properties are to be added or modified, and the property of the second object corresponds to the property one by one added or modified by the first object.

varBook ={};object.defineproperties (book, {_year: {value:2004}, Edition: {value:1}, Year: {get:function(){            return  This. _year; }, set:function(newvalue) {if(NewValue > 2004){                 This. _year =NewValue;  This. edition + = newValue-2004; }        }    }});

The code on the book object defines two data properties _year and edition and an accessor property of year.

The final object is the same as the object defined in the previous section. The only difference is that the properties here are created at the same time.

4. Properties of the Read attribute

Using the ECMASCript5 Object.getownpropertydescriptor () method, you can obtain a descriptor for a given property.

This method receives two parameters: the object where the property resides and the name of the property whose descriptor you want to read. The return value is an object.

For example, the book object created in the previous section:

varDescriptor = object.getownpropertydescriptor (book, "_year"); alert (descriptor.value); //2004alert (descriptor.configurable);//falseAlerttypeofDescriptor.get)//"undfined"varDescriptor = object.getownpropertydescriptor (book, ' Year '); alert (descriptor.value); //undefinedalert (descriptor.enumerable);//falseAlerttypeofDescriptor.get)//"function"

In JavaScript, you can use the Object.getownpropertydescriptor () method for any object-including DOM and BOM objects.

JavaScript: Understanding Objects