Define the object

There are two ways to define objects

Age = 23 Object. Sex = 'male' Object. GetAge = function() {return this. Age}Copy the code

The above example creates an instance of a Person object and adds properties and methods to it. In the early days, JS developers often used this way, but now object literals are the first way to define objects.

Let person = {name: 'frogman ', age: 23, sex: 'male', getAge() {return this. Age}}Copy the code

As you can see, the above method of defining objects using literals is much more concise, and the literals are defined in the same way as the first method.

Attribute types

In THE Es5 version, when defining the attribute that is only used internally, it describes the various characteristics of the attribute property. These attributes are defined for the implementation of the JS engine, so it is not possible to access the internal attribute in JS. The inner attribute is enclosed in two brackets such as [[Enumerable]].

Data attributes

The position where a data attribute contains a data value, where the value can be read and written, is the data attribute description object.

  • [[Configuralbe]]: indicates whether the property can be deleted by delete, whether other properties can be defined on the object, and whether the value of the property can be modified. The default return is true.
  • [[Enumerable]]: indicates whether the property can be enumeratedfor in, returns true by default.
  • [[Writeable]]: indicates whether the property can be read and written. The default value is true.
  • [[Value]]: represents the position of the property value, each time the property is read, from this[[Value]]Internal property returns a value, and when we write the value of the property, we store it in this position, and the default value is undefined, which is why we return undefined when we read a property that doesn’t exist on the object we’re reading.

So the theory is done, so let’s go straight to the code

[[Value]]

Let person = {name: 'frogman'}Copy the code

[[Value]] = = = = = = = = = = = = = = = = = = =

Modify a property description object

To modify the description Object of a data property, use the object.defineProperty () method in Es5. This method takes three arguments, the target Object, the property to be accessed, and the description Object of the property. The description Object must be: You can set one or more properties of a different, Enumerable, writeable, or value property to change the value of the corresponding description property.

Let person = {} object.defineProperty (person, 'name', {writeable: false, 'you don't have permission'}) console.log(person.name) // You don't have permission person.name = "frogman" console.log(person.name) // You don't have the permissionCopy the code

In the example above, we set the Person object to be read-only and not writable, and we set the value property to it, so whatever it reads, it returns you do not have permission to write. Note that this code will throw an error in strict mode. In non-strict mode assignment is ignored, and more importantly, the third argument of object.defineProperty must be written, otherwise code will report an error

Accessor property

Data accessor properties do not contain data values; they contain a pair of getter and setter functions (which are not required and optional). When you read the accessor property, you call the getter, and when you write the accessor property, you call the setter, and the function takes a parameter and that parameter is the value that was written.

  • [[get]]: function called when a property is read. Returns undefined by default
  • [[set]]: function called when a property is written. Returns undefined by default

Accessor properties cannot be defined directly. Use object.defineProperty (). See example below

let person = { _age: 23, name: } object.defineProperty (person, "age", {get() {return this._age}, set(val) { this._age = val } }) person.age = 24Copy the code

In example above, writing the age property triggers the set function in the accessor object, which reassigns the value, and then triggers the get method, which returns the value of the property. Properties that can only be accessed through object methods. Do not write them directly in the return of the get function. For example, this.age = XXX

Define multiple description properties

In the Es5 version, there is also an Api method that defines multiple objects to write description properties. This method takes two parameters, the target object and the value of the property. See example below

let person = {} Object.defineProperties(person, { _age: { value: 23 }, name: { value: "Frogman"}, age: {get() {return this._age}, set(val) {this._age = val; }}})Copy the code

The example above is the same as the example above, but it is defined differently. This method is not often used, so you should know.

Gets the description property of an object

Es5 version defines an Api method can view the current description attribute of an Object, the Object. The getOwnPropertyDescriptor (), the method takes two parameters, the target Object, attribute values.

let person = {
     age: 23
}
let descriptor = Object.getOwnPropertyDescriptor(person, "age")
console.log(descriptor.writable)  // true
console.log(descriptor) // {"value":23,"writable":true,"enumerable":true,"configurable":true}
Copy the code

In the example above, we can clearly see the description object of the current object attribute, so that when a bug occurs, we can also check whether the current description attribute can be changed, and quickly locate the bug. Can be used on any Object in the js Object. GetOwnPropertyDescriptor (), including BOM and DOM Object, compatible with ie 9 +, firefox 4 +, Safari5 +, Opera12 +, Chrome.

If this post helped you, please give it a like