“This is my 11th day of the November Gwen Challenge.The final text challenge in 2021”.

What is the Object

Object is a type. In JavaScript, almost all objects are instances of the object type. They inherit properties and methods from Object.prototype.

Object constructor

The Object constructor creates an Object based on the parameters given:

  • If the given value is zeronull 或 undefined, will create and return an empty object
  • If a value of a primitive type is passed in, an object of its wrapper type is constructed
  • If a reference type is passed in, the value is still returned, and the variable they copy retains the same reference address as the source object

When called as a non-constructor, Object behaves like new Object().

Static methods of Object

Static methods are methods called on constructors, while member methods are methods called by instances. Suppose you have a class:

Class Person {static eat(){console.log(" eat! ") Const a = new Person("xiaowang") // This is an instance console.log(a.eat()) //errorCopy the code

Today we’re going to talk about defineProperty, one of Object’s static methods,

Object.defineProperty()

role

Defines a new property on an object, or modifies an existing property of an object and returns the object.

parameter

Object. DefineProperty (Obj, Prop, Descriptor) OBj ==> An Object prop ==> Name descriptor to be added or modified ==> Attribute descriptor to be defined or modified

Attribute descriptor

There are two main types of property descriptors that currently exist in objects: data descriptors and access descriptors

Data descriptor

A data descriptor can be thought of as a property in a class, and a class itself is an object. Let’s take a quick example

const person = {}
Object.defineProperty(person,"name",{
    value = "xiaochen",
})
console.log(person.name); // xiaochen
person.name = "orange"
console.log(person.name); // xiaochen
Copy the code

This is the most basic way to write it, because person doesn’t have a name attribute, so we create a name attribute, and then we assign the value of value to name, so why do we assign a new value to name, and we print it out again as Xiaochen, and the property descriptor actually has a default attribute, again this example

const person = {}
Object.defineProperty(person,"name",{
    value = "xiaochen",
    enumerable: false,
    configurable: false,
    writable: false,
})
console.log(person.name); // xiaochen
Copy the code

1.configurable — Public attribute

The descriptor of this property can be changed and deleted from the corresponding object only when the property’s key is set to true. The default is false.

2.enumerable — Public attribute

The property appears in the object’s enumerable property if and only if its Enumerable key value is true. The default is False.

3.writable — Data descriptor properties

If and only if the writable key of the property is true, the value above can be changed, that is, the property can be assigned

4.value — Data descriptor properties

The value assigned to the property

Except for value, the other three default values are false and need to be set manually. If you change false to true, you can operate on the property.

Access descriptor

Access descriptors can be thought of as methods in a class.

Function Person(){} const Person = new Person() object.defineProperty (Person,"name",{value:"orange" get(){ Console. log(" call at value "); Return 1}, set(value){return console.log(" call when assignment "); } }) console.log(person); // Person{} person.name = "orange" // Call console.log(person.name) when assigning; // Call 1 when the value is specifiedCopy the code

Get () — Accesses descriptor properties

The get() method is called on the value, so what does that mean? When you print console.log(person.name), the get() method will be called, not as a class. Method name calls, the get and set are not methods that are called, they’re methods that are executed internally when you’re evaluating or assigning,

Set () — Accesses descriptor properties

The set() method is called when an assignment is performed. Person.name = “orange” will print the assignment call. That’s how get and set are used.

Value — Data descriptor property

Value is an attribute of the data descriptor. If used in an access descriptor, an error is reported.

conclusion

When objecr.defineProperty () is used, the third argument is the property descriptor. When passing in an argument, you can only select either the data descriptor or the access descriptor. The incoming data descriptor can be used to create or modify the property value, while the incoming access descriptor can be used to listen for changes to the property.

expand

1. Variables are removed

Const person = {} const a = {get(){console.log(" call on value "); Return 1}, set(value){return console.log(" call when assignment "); } } Object.defineProperty(person,"name",a) console.log(person.name); person.name = "orange"Copy the code

Parameters can be extracted, manipulated, and passed to Object.defineProperty for flexibility

2. Function internal call

Function Person(){let name = 'a' object.defineProperty (this,"name",{get(){return name + 1}, set(value){ name = value } }) } const person = new Person() console.log(person.name); //a1 person.name = "orange" console.log(person.name); //orange1Copy the code

Inside a function or a class, we pass this, which is the function or the class itself, so we can use properties inside the function, or member properties of the class,

Here the specific use method has been introduced, more use or to be analyzed in the specific situation, if you are interested, you can see my response principle, there are examples of use, you can refer to.

Finish this chapter