How to use Object.defineProperty()

1. Take a look at how object.defineProperty is used

Object.defineproperty (obj,' attribute ',{value:'1', // The value of the attribute. It can be any valid JavaScript value (numeric value, object, function, etc.). The descriptor of this property can be changed and deleted from the corresponding object only if and if the additional key is set to true, works freely and freely. The default is false. Enumerable: False, // This property appears in an object's enumerable properties if and only if the property's Enumerable key is true. Writable: false, // The value of the property, the value above, can be changed by the assignment operator if and only if the writable key of the property is true. The default is false. Get (){// The getter function for the property that is called when the property is accessed. }, the setter function for the set(value){// undefined if there is no setter. This function is called when the property value is modified. This method takes an argument (that is, the new value being assigned) and passes in the this object at the time of assignment. }})Copy the code

Value cannot coexist with GET,set, and writable. An exception is raised if a descriptor has both value or writable and get or set keys.

2, simple can be understood

Var obj = {text: 'XXX'}; (2) in order to intuitively understand our interception of a property, we simply implement the input in the input box, synchronous output. <div> <input type="text" id="input"> <p id="myInput"></p> </div> const obj = {} Object.defineProperty(obj,'text',{ get()  { return obj }, set(v) { document.getElementById('input').value = v document.getElementById('myInput').innerText = v } }) input.addEventListener('keyup',(e)=>{ obj.text = e.target.value })Copy the code

3. Illustrate the meanings of each parameter in turn.

Different: Indicates whether the attributes of the object can be deleted and any other features other than the value and writable feature can be modified.

Const obj = {name: 3}; const value = 1; Object.defineProperty(obj,'name',{ configurable: Get () {return value}}) delete obj.name console.log(obj.name) // undefinedCopy the code

Value: The default value of the object property. The default value is undefined

Const obj = {name: 3}; Object.defineProperty(obj,'name',{ value: 1 }) console.log(obj.name) // 1Copy the code

Enumerable: Whether an Object's property can be enumerable, such as for in object.keys ()

Const obj = {a:1, b:2, c:3}; For (let I in obj){console.log(I) // a,b,c} Object.defineProperty(obj,'a',{ enumerable: False}) for(let I in obj){console.log(I) // b,c} Console. log(object.keys (obj)) // ["b","c"]Copy the code

Writable: Indicates whether the value of an object can be changed

const obj = {
        a:1
    };
    Object.defineProperty(obj,'a',{
        writable: false
    })
    obj.a = 3
console.log(obj.a) // 1
Copy the code

Get (){} : If there is a getter, this function is called when accessing the property. There will be this, but this doesn't have to be the object that defines the property. The return value of this function is used as the value of the property.

Const obj = {a:1}; Object.defineProperty(obj,'a',{ get() { return 2 } }) console.log(obj.a) // 2Copy the code

Set (value){} : This function is called when the value of an attribute is modified. This method takes an argument (that is, the new value being assigned) and passes in the this object at the time of assignment

Const obj = {a:1}; Object.defineProperty(obj,'a',{ set(v) { console.log(v) // 3 } }) obj.a = 3Copy the code

Vue is data hijacking. In combination with the publishe-subscribe model, object.defineProperty () is used to hijack the setter and getter of each property. When the Object changes, a message is sent to the subscriber to trigger the callback function processing.