Powerful Object. DefneProperty Details

Powerful JS Method Object.defineProperty Detailed

Object.defineProperty is a great method. The reason why vue.js can achieve bidirectional binding is thanks to it! Definition Property is translated directly as "Defining attributes", but this method is not only as simple as defining attributes, we can also use it to intercept and set attributes!

var obj={};//Or obj=new Object;
// Add attributes (descriptions)
obj.userName="laotie";//Or obj["userName"]="laotie"
// Adding Method (Behavior)
obj.run=function(){};//Or obj["run"]=function() {};

In addition to the above methods, we can define new attributes by Object.defineProperty, or modify the original attributes.

Object.defineProperty(obj, prop, descriptor):

  • obj: necessary. Target object
  • prop: Necessary. Names of attributes to be defined or modified
  • descriptor: Necessary. Characteristics of target attributes

Let's look at the code and see the third parameter descriptor.

1, value

Attributes can be set for objects by value, and the corresponding values can be of any type, undefined by default.

var obj={};
console.log(obj.userName);// undefined
Object.defineProperty(obj,"userName",{
    value:"zhouyajing"
});
console.log(obj.userName);// zhouyajing

The original value can be modified.

var obj={};
obj.userName="laoli"
console.log(obj.userName);// laoli
Object.defineProperty(obj,"userName",{
    value:"zhouyajing"
});
console.log(obj.userName);// zhouyajing

The value returned is the object of the incoming function, the first parameter obj

var obj={};
var obj2=Object.defineProperty(obj,"userName",{
    value:"laozhang"
});
console.log(obj==obj2);// true

2,writable

The value used to set the property is allowed to be overridden. true is allowed, false is not allowed to be rewritten, default is false

Setting to false does not allow overrides and no errors are thrown

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    writable:false
});
obj.userName="laoliu";
console.log(obj.userName);// zhouyajing

Errors will be reported if described strictly.

"use strict";
var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    writable:false
});
obj.userName="laoliu";
//Error: TypeError: Cannot assign to read only property'userName'of object

The default is false and the value is not allowed to be modified

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing"
});
obj.userName="laoliu";
console.log(obj.userName);// laozhang

Set to true to allow modification

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    writable:true
});
obj.userName="laoliu";
console.log(obj.userName);// laoliu

2,enumerable

This description determines whether the specified attribute is allowed to be enumerated (using for... in or Object.keys(). Setting true can be enumerated; setting false cannot be enumerated. Default to false

Setting to false does not allow enumeration

var obj={
	age:18
};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    writable:false,
    enumerable:false
});
for(var key in obj){
    console.log(key,obj[key])// age 18
}
console.log(Object.keys(obj));//[ 'age' ]

The default value is false and is not allowed to be enumerated

var obj={
	age:18
};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    writable:false
});
for(var key in obj){
    console.log(key,obj[key])// age 18
}
console.log(Object.keys(obj));//[ 'age' ]

Set to true to allow enumeration

var obj={
    age:18
};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    writable:false,
    enumerable:true
});
for(var key in obj){
    /*  age 18 
        userName zhouyajing*/ 
    console.log(key,obj[key]);
}
console.log(Object.keys(obj));//[ 'age', 'userName' ]

4,configurable

Congurable is a master switch. Once you set it to false, you can neither delete the specified attribute nor set it to true. It allows deletion or setting.

No deletion allowed for false, no error reported

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    configurable:false
});
delete obj.userName;
console.log(obj.userName);//zhouyajing

Not allowed to be reset for false, error will be reported

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    configurable:false
});
Object.defineProperty(obj,"userName",{
    value:"laoli"
});
//Error: TypeError: Cannot redefine property: userName

When true, deletion is allowed

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    configurable:true
});
delete obj.userName;
console.log(obj.userName);//undefined

When true, it is allowed to be reset

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zhouyajing",
    configurable:true
});
Object.defineProperty(obj,"userName",{
    value:"laoli"
});
console.log(obj.userName);//laoli

5. get/set Accessor Description

This method can be used when you need to set or get an attribute value of an object.

var obj={};
var initValue="zzz";
Object.defineProperty(obj,"userName",{
    get(){
        // Output when reading userName
        console.log("Executed get");
        return initValue;
    },
    set(newValue){
        // New Value is the value written
        console.log("Executed set");
        initValue= newValue+"Now!"
    }
});

/*  Executed get
    zzz */
console.log(obj.userName);

obj.userName="zhouyajing";// set was executed

/*  Executed get
    zhouyajing */
console.log(obj.userName);

get or set does not have to appear in pairs, just write one.

var obj={};
Object.defineProperty(obj,"userName",{
    get(){
        return "zhouyajing"
    }
});
console.log(obj.userName);//zhouyajing

Writtable and value are not allowed when using get or set methods

var obj={};
Object.defineProperty(obj,"userName",{
    value:"zzz",
    get(){
        return "zhouyajing"
    }
});
console.log(obj.userName);
//Error reporting: Invalid property descriptor. Cannot both specify y accessors and a value or writable attribute

Example

var obj={};
var userName="";
var userArr=[];
Object.defineProperty(obj,"userName",{
    get(){
        return userName;
    },
    set(value){
        userArr.push(value);
        userName=value;
    }
});
obj.userName="Zhang San";
obj.userName="Li Si";
obj.userName="Wang Wu";
console.log(userArr);// ['Zhang San','Li Si','Wang Wu']

Tags: Attribute Vue

Posted on Fri, 06 Sep 2019 03:27:02 -0700 by eggradio