Simple understanding of Object.defineProperty() method

Understand the object

When creating an object, some properties and methods are added to the object. These properties are created with some characteristic values . JavaScript defines their behavior through these characteristic values.

Attribute type

ECMA-261 defines these features to implement the JavaScript engine, so they cannot be accessed directly in Js. In order to indicate the internal value of the feature, the specification puts them in two pairs of square brackets. For example, [[ Enumerable ]]
ECMAScript There are two types of attributes: data attributes and access attributes

Data attributes

The data attribute contains the position of a data value, in which the value can be read and written, the data attribute has 4 characteristics that describe its behavior

[[Configurable]]: Indicates whether the attribute can be redefined by deleting the attribute, whether the characteristic of the attribute can be modified, or whether the attribute value can be changed to an accessor attribute , the default is true
[[Enumerable]]: Can the attribute be returned through a for-in loop, the default is true
[[Writable]]: Indicates whether the value of the attribute can be modified, the default is true
[[Value]]: Contains the data value of this attribute. When reading the property value, read from this location, when writing the property value, save the new value in this location, the default value is undefined.
For example, create an object and add the property value to it

const person = {
  name: 'poppy'
}

An attribute named name is created here, and the value specified for him is'poppy', which means that the [[Value]] feature will be set to'poppy', and the other three features will be set to true

Object.defineProperty()

To modify the default properties of the property, you must use the Object.defineProperty() method of ECMAScript5, which receives three parameters: the object where the property is located, the name of the object and a descriptor
object. The properties of the descriptor object must be: configurable, enumerable , Writable and value. Set one or more of the values, you can modify the corresponding attribute value

Create a read-only name attribute for person

let person = {
    
    }
Object.defineProperty(person,"name",{
    
    
  writable: false,
  value: "poppy"
})
console.log(person.name) // poppy
person.name = "yaping"
console.log(person.name) // poppy
// 当修改只读属性name的时候，非严格模式会忽略赋值操作，严格模式下会抛出异常

Set configurable to false, indicating that the attribute cannot be deleted from the object

let person = {
    
    }
Object.defineProperty(person,"name",{
    
    
  configurable: false,
  value: 'poppy'
})
// 如果对name属性调用delete，在非严格模式会被忽略操作，严格模式会抛出异常
// 这里需要注意，一旦把属性定义为不可配置，就不能再把它变回可配置。此时，再次调用Object.defineProperty()方法修改除writable之外的特性，都会导致错误
// 抛出错误
Object.defineProperty(person,"name",{
    
    
  configurable: true,
  value: 'poppy'
})

When calling the Object.defineProperty() method, if not specified, the default values of the configurable, enumerable, and writable properties are all false. In most cases, it may not be necessary to use the advanced features provided by the Object.defineProperty() method, but understanding these concepts is very useful for JavaScript objects

IE8 is the first browser version to implement the Object.defineProperty() method. However, this version has many limitations. This method can only be used on DOM objects and can only create accessor properties. Due to the incomplete implementation, readers are advised not to use the Object.defineProperty() method in IE8

Accessor properties

Accessor properties do not contain data values; they contain a pair of getter and setter functions (however, neither of these functions are required). When reading accessor properties, the getter function is called, which is responsible for returning a valid value; when writing accessor properties, the setter function is called and the new value is passed in. This function is responsible for how to process the data. The accessor has the following 4 characteristics

[[Configurable]]: Indicates whether the property can be redefined by deleting the property, whether the property of the property can be modified, or whether the property can be modified as a data property . For properties defined directly on the object, this property defaults to true
[[Enumerable]]: Indicates whether the attribute can be returned through a for-in loop, the default is true
[[Get]]: The function to be called when reading the property value, the default value is undefined
[[Set]]: The function called when writing the property value, the default value is undefined

Object.defineProperty()

Accessor properties cannot be defined directly, they must be defined using Object.defineProperty()

The common usage of using accessor attributes, setting the value of one attribute causes other attributes to change.
The following code creates an object book and defines two default attributes: _year and edition. The underscore in front of _year is a commonly used symbol to indicate that the property can only be accessed through object methods, and the accessor property year contains a getter function and a setter function. The getter returns the value of _year, and the setter confirms the correct version by calculation. Therefore, changing the year attribute to 2005 will cause _year to program 2005 and edition to 2

let book = {
    
    
  _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
console.log(book.edition) // 2