ECMAScript 5 of the attribute descriptor detailed _ basic knowledge

The property descriptor is a new concept in ES5 that adds more control to the object's properties.

Object.defineproperty

To study the attribute descriptor, we first need to talk about the Object.defineproperty method. The purpose of this method is to define a new property or modify an existing property for an object. The prototype is as follows:

Copy Code code as follows:

Object.defineproperty (obj, prop, descriptor)

Use examples:

Copy Code code as follows:

var obj = {};
Object.defineproperty (obj, ' attr ', {value:1});

The preceding code adds an attribute named attr to the Obj object, with a value of 1. Equivalent:

Copy Code code as follows:

var obj = {};
obj.attr = 1;

Object.defineproperty's writing seems more complicated than that. However, its greatest mystery lies in its third parameter.

Data descriptor

Suppose we want attr to be a read-only property, we can add the writable data descriptor:

Copy Code code as follows:

var obj = {};
Object.defineproperty (obj, ' attr ', {
Value:1,
Writable:false
});
Console.log (OBJ.ATTR);
Obj.attr = 2; Fail
Console.log (OBJ.ATTR);

The above program shows that the value of the two printed attr is 1, which means that the write to the property fails. However, such a result would be a bit confusing, because the assignment statement execution is not unusual, but failed, just imagine if this problem occurs in large tracts of code, it is difficult to troubleshoot. In fact, as long as the code is run in strict mode, an exception is generated:

Copy Code code as follows:

' Use strict '; Enter Strict mode
var obj = {};
Object.defineproperty (obj, ' attr ', {
Value:1,
Writable:false
});
Obj.attr = 2; Throw exception

Let's look at another data descriptor, enumerable, which controls whether an attribute can be enumerated. If you simply define a property, this property can be enumerated in the for...in loop:

Copy Code code as follows:

var obj = {};
obj.attr = 1;
for (var i in obj) {console.log (obj[i]);}
Enumerable can "hide" it:

var obj = {};
Object.defineproperty (obj, ' attr ', {
Value:1,
Enumerable:false
});
for (var i in obj) {console.log (obj[i]);}

Executing the above code will find that the console has no output, because the Attr property cannot be enumerated at this time.

Here, you may have a question, can the attribute descriptor be modified? For example, can a read-only attribute be defined again as writable? It actually depends on another data descriptor configurable, which controls whether the attribute descriptor can be changed.

Copy Code code as follows:

var obj = {};
Object.defineproperty (obj, ' attr ', {
Value:1,
Writable:false,
Configurable:true
});
Object.defineproperty (obj, ' attr ', {
Writable:true
});
Obj.attr = 2;

The preceding code first defines attr as a read-only property and then redefined as writable. So the write to attr is successful.

Accessor descriptor

Access descriptors are similar to Get/set accessors in object-oriented objects.

Copy Code code as follows:

var obj = {};
Object.defineproperty (obj, ' attr ', {
Set:function (val) {this._attr = Math.max (0, Val);},
Get:function () {return this._attr;}
});
Obj.attr =-1;
Console.log (OBJ.ATTR); 0

In the preceding code, access to attr in fact becomes access to _attr, and the minimum value is limited to 0 in the set function.

Get attribute Descriptor

All of these are set property descriptors, so how do you get the descriptors that have been set? Object.getownpropertydescriptor can do this work.

Copy Code code as follows:

var obj = {};
Object.defineproperty (obj, ' attr ', {
Value:1,
Writable:false,
Configurable:true
});
var desc = object.getownpropertydescriptor (obj, ' attr ');
Console.dir (DESC);

Object Control

The previous Object.defineproperty, which operates on the object's properties, and the three methods described below manipulate the object directly.

object.preventextensions can make an object unable to have a new property:

Copy Code code as follows:

var obj = {};
obj.attr = 1;
Object.preventextensions (obj);
OBJ.ATTR2 = 2; Fail

Object.sealYou can make an object leave only property values modifiable (even property values cannot be modified if the property is read-only):

Copy Code code as follows:

var obj = {};
obj.attr = 1;
Object.seal (obj);
Obj.attr = 1.5;
Delete obj.attr; Fail

Object.freezeYou can make an object completely unmodified:

Copy Code code as follows:

var obj = {};
obj.attr = 1;
Object.freeze (obj);
Obj.attr = 1.5; Fail
OBJ.ATTR2 = 2; Fail

Then you may ask, how do you know if an object has been preventextensions, seal or freeze? The answer is to call object.isextensible, object.issealed, Object.isfrozen respectively, the use of these three functions is relatively simple, no longer cumbersome.

In general, through the attribute descriptor can further strict control of the object, strengthen the rigor of the program logic, the only problem is that ES5 in the IE9 only basic implementation (IE9 also does not support the strict model), taking into account the domestic IE8 share is still relatively high situation, This set of things can only be used in mobile browsers and Node.js now.