An object-oriented articles JS, understood that the object characteristics and properties (attribute descriptors)

This article
1, the object understood;
2, the ECMAScript there are two types of attributes: data access attributes and properties (getter and setter functions);
3, attribute properties characteristic data: [[Configurable]], [ [Enumerable]], [ [the Writable]], [[value]];
. 4, access characteristic attribute properties: [[the Configurable]], [[Enumerable]], [[GET]], [[SET]];
. 5, Object.defineProperty ( ), Object.defineProperties (), Object.getOwnPropertyDescriptor ( ) to set or read the attribute properties (attribute descriptor) method

Understanding objects

ECMA-262 put the object is defined as: a set of unordered attributes, properties which may comprise the base value, the object or function.
That is not the object is a set of name-value pairs in a particular order, a name corresponding to a value, the value may be data (including the basic value and the reference value types) and functions, each attribute value is the name of the object.

var person = {
name: 'youyang',
age: 25,
job: 'coder',
sayName: function() {
console.log(this.name)
}
}

The above code creates an object for the person, it has four attributes: name, age, job and sayName. Note that although we usually say name, age, job for the property, while sayName person called object methods, in fact, it is the property, but the value is a function of it.

Property type and property characteristics

1, you first need to define what type of property javascript objects there?

ECMAScript There are two properties: the data access attributes and properties.

2. What is the attribute characteristics?

Properties of each object (including the methods) when it is created with a few characteristic values, ECMA-262 defines the characteristic values ​​in order to achieve a javascript engine, i.e., internal use, so that the specification put them in two square brackets : The [[Enumerable]].

3, the characteristics which describe the behavior of the property has it? Different property type characteristics, what difference will it make?

Property data

There are four data attributes describe its behavior characteristics:

  1. [[Configurable]]: indicates whether to delete by the delete keyword attribute redefines properties, can modify the properties of the properties (including [[Configurable]] The following three properties itself and other properties), or the ability to modify the properties accessor property. Like the example above defined directly on the object attribute default is true.
  2. [[Enumerable]]: is enumerable (for-in loop can return the property), as defined above directly on the object attribute default is true.
  3. [[Writable]]: whether the value of a property can be modified, the default is true;
  4. [[Value]]: When the value of the corresponding attribute is read from this read, while the write of the new value stored here, the default value is undefined;
var obj = {
num: 10
}

Here creates an attribute named num, its [[configurable]], [[Enumerable]], [[Writable]] are true, and [[value]] 10.

Access Properties

Compared to data attributes, access attributes no [[value]] This property characteristics, but has a pair of functions: getter () and setter (), when read accessor property, call getter (), the function responsible for returning a valid value, that is, written when calling setter set the property values ​​of () and passing new values ​​by the setter () responsible for executing the operation process data.

Access properties characteristic comprises four attributes:

  1. [[Configurable]]: indicates whether the attribute deleted by delete, can modify the characteristics of attributes (including [[Configurable]] Other features characteristic of itself and three below), or can modify the attribute data attribute. Defined directly on the object attribute default value of true;
  2. [[Enumerable]]: is enumerable (for-in loop can return the property), as defined above directly on the object attribute default value is true;
  3. [[Get]]: function called when reading attributes, default is undefined;
  4. [[Set]]: function called when writing the property, the default is undefined.

Object.defineProperty()

This method has two purposes, one is to modify the default property attribute properties, and the other is the definition of attributes, because if you want to specify some of its characteristic properties then you must use this method, and when you want to define the definition of a property at the same time use only when a property accessor Object.defineProperty () to achieve, because access properties can not be defined directly.
This receiving method parameters: the object, the specified attribute name, a descriptor object (an object to set the attribute property)
used as follows:
1, to modify a default characteristic attribute

var obj = {
num: 10
}
Object.defineProperty(obj, 'num', {
value: 20,
writable: false
})
console.log(obj.num) // 20
obj.num = 30
console.log(obj.num) // 20

In the above example, we attribute of the object obj num [[Writable]] whether to modify the characteristics set false, then a num attribute that can not be modified, when attempting to write a new value (obj.num = 30) for it, non-strict mode, this operation will be ignored, strict mode gives an error.

2, access attributes define
access properties can not be defined directly, must Object.defineProperty ().

var obj = {
num: 10
}
Object.defineProperty(obj, 'data', {
get: function() {
return this.num
},
set: function(newVal) {
if (newVal > 10) {
this.num = newVal
}
}
})
console.log(obj.data) // 10
obj.data = 20
console.log(obj.data) // 20
console.log(obj.num) // 20

getter and setter functions Perhaps you often hear, but what they do not know in the end, because we do rarely have the opportunity to use them in their daily development, but they are common to several applications in source code framework.

Object.defineProperties()

Same Object.defineProperty () method, Object.defineProperties () method has the same effect: modify the properties and characteristics is provided, but Object.defineProperties () method may be provided a plurality of attributes.
Use as follows:

var obj = {
num: 10
}
Object.defineProperties(obj, {
name: {
writable: false,
value: '张三'
},
data: {
get: function () {
return this.num
},
set: function (newVal) {
if (newVal > 10) {
this.num = newVal
}
} 
}
})

Code uses Object.defineProperties () defines a property and a data access attributes.

Object.getOwnPropertyDescriptor()

The role of this method is to get property descriptors specified properties, the so-called property descriptor is characteristic of our properties have been mentioned before.
It accepts two parameters: Object location and attributes specified attribute name
Returns: an object, if access properties, properties of the object comprising: configurable, enumerable, get SET and, if the data attributes, the object property is returned there : configurable, enumerable, writable, value .

var obj = {
num: 10
}
console.log(Object.getOwnPropertyDescriptor(obj, 'num')) // {value: 10, writable: true, enumerable: true, configurable: true}

Guess you like

Origin www.cnblogs.com/youyang-2018/p/11764050.html