1,

DefineProperty can define an Object as its name implies, but this is not only its main function, its main function is that it can configure the defined attributes, it can also use set, GET to do data hijacking, to achieve responsive data, vue2 uses it to update data. You can update the RESPONSIVE principle of the DOM.

2, usage,

Object.defineproperty (obj, property, descriptor) has three attributes:

  • The first argument, obj, is the original object to define the attribute

  • The second argument: property is the name of the defined property or symbol

  • Third parameter: The description configuration of the property to define

    • Different: configurable property and controldescriptorWhether can be changed again andobjDefines the deletion of attributes, default isfalse
    • Enumerable: An enumerable property that controls an objectpropertyWhether traversal is possible. The default value isfalse
    • Writable: modifiable. Controls whether a property can be modified by the assignment operator. Defaultfalse
    • Value: The initial value of the property. The default value isundefined
    • Set:setterFunction, which can be interceptedobj.prop = 'xxx'In which to do some logical processing
    • The get:getterFunction, which can be interceptedobj.propTo do some logical processing in the read operation

  • Return value: Returns the obj after defining the properties and adding the description configuration

Example 3,

Configurable:

If the 64x is specified as false for the first time, it disables the modification of the property. No modification can be made unless the 64X is configured as true for the first time. In addition, defined attributes can only be deleted if this attribute is true.

 // 例1
 const obj = {};
 Object.defineProperty(obj, "name", {
     // The default is false. This is just a use case
     configurable: false.value: 'jack'
 });
 console.log(obj.name); // 'jack'
 ​
 // Re-define property: name
 Object.defineProperty(obj, "name", {
     configurable: true.value: "tom"
 });
 ​
 // 例2
 const obj = {};
 Object.defineProperty(obj, "name", {
     // The default is false. This is just a use case
     configurable: true.value: 'jack'
 });
 console.log(obj.name); // 'jack'
 delete obj.name;
 console.log(obj.name); // undefined
 ​
 // You can modify the configuration again
 Object.defineProperty(obj, "name", {
     value: "tom"
 });
 console.log(obj.name);// 'tom'
Copy the code

Enumerable:

Controls whether the property can be traversed, whether it can be used in for.. in.. And object.keys ()

 // 例1 
 const obj = {
     age: 20.gender: "Male".address: "Beijing"
 };
 Object.defineProperty(obj, "name", {
   // Enumerate to true when set
     enumerable: true.value: 'jack'
 });
 console.log(Object.keys(obj)); // [ 'age', 'gender', 'address', 'name' ]
 for (key in obj) {
     console.log(key); // 'age', 'gender', 'address', 'name'
 }
 ​
 // 例2
 const obj = {
     age: 20.gender: "Male".address: "Beijing"
 };
 Object.defineProperty(obj, "name", {
     enumerable: false.value: 'jack'
 });
 console.log(Object.keys(obj)); // [[ 'age', 'gender', 'address' ]
 for (key in obj) {
     console.log(key); // 'age', 'gender', 'address'
 }
Copy the code

writable:

Controls whether a defined property can be reassigned

 // 例1
 const obj = {};
 Object.defineProperty(obj, "name", {
     writable: true.value: 'jack'
 });
 console.log(obj.name); // 'jack'
 obj.name = "tom";
 console.log(obj.name);// 'tom'
 ​
 // 例2
 const obj = {};
 Object.defineProperty(obj, "name", {
     writable: false.// Set the modifiable property to false
     value: 'jack'
 });
 console.log(obj.name);// 'jack'
 obj.name = "tom";
 console.log(obj.name);// 'jack'
Copy the code

Set and get:

Set setter functions to intercept property assignment operations, and set getters to intercept reading property values.

⚠️ Note: An exception is raised if a descriptor has both value or writable and get or set keys. Cannot both specify accessors and a value or writable attribute

⚠️ Note: In the set function, this refers to the assigned object. Due to inheritance, this in the get function does not necessarily refer to the defined object.

 // Create a new object argument as the __proto__ of the new object
 const proto = {
     age: 20
 };
 const obj = Object.create(proto);
 console.log(proto); // { age: 20 }
 Object.defineProperty(obj.__proto__, "name", {
     set: (val) = > {
         console.log("Assigned!!");
         this.name = val;
     },
     get: () = > {
         console.log("Read!!");
         return this.name
     }
 });
 obj.name = "jack"; // Obj inherits proto attributes and methods, so obj changes can trigger the set function
 console.log(proto.name); // Trigger this in get to read name in proto
 // Output the result
 // Is assigned!!
 // Read!!
 // jack
Copy the code

Here’s a second example:

 function Person () {};const p1 = new Person("tom");
 const p2 = new Person("tom");
 Object.defineProperty(Person.prototype, "name", {
     set: (val) = > {
         console.log("Attribute value assigned!!");
         this.name = val;
     },
     get: () = > {
         console.log("Property value accessed!!");
         return this.name; }}); p1.name ="jack";
 console.log(Person.prototype.name); // jack
 console.log(p2.name) //jack
 // Output the result
 // Attribute value is accessed!!
 // jack
 // Attribute value is accessed!!
 // jack
 ​
Copy the code

This article is just a front-end beginner’s personal understanding… Spray gently if there is any error…