The small method Object.defineProperty of virtual dom+es5
Object.defineProperty() of es5 is used to define a property for an object. The principle of two-way binding of vue is based on the accessor properties of defineProperty.
obj: object type, the object whose attributes need to be defined
key: string type, the name of the attribute
descriptor: object type, a descriptor, which is also a parameter of focus
< p>descriptor parameter
The third parameter is that an object has six key values. They are: configurable(boolean, default true), enumerable(boolean, default true), writable(boolean, default true), value(any, default undefined), get(function, default undefined), set(function, default undefined) . Any one of writable, value and either get or set cannot exist at the same time. why? Regarding the introduction on the Red Book, it is a textbook description, which is rather obscure. The attributes defined by the defineProperty method are divided into two types: data attributes and accessor attributes. Therefore, the difference of the descriptor parameter determines the type of the corresponding attribute. Therefore, the descriptor has two ways to describe the data attributes (usually obj.name = ‘123’, in fact, it is defined in this way by default):
{
configurable: false, // The default is true, the description can be changed, such as delete or modify to accessor attributes
enumerable: false, // The default is true, the description can be in enumeration, such as for-in
writable: false, // default true, description can be changed
value: [1, 2, 3], // default undefined, which is the value of the property
}
Describe accessor attributes
{
configurable: false, // The default is true, describe whether it can be changed, such as delete or modify to accessor attributes
enumerable: false , // The default is true, describing whether it can be enumerated by in, such as for-in
get: function() {return this.name }, // default undefined, getter function
set: function( newVal) {this.name = newVal }, // Default undefined, setter function
}
Runtime
var obj = {};
Object. defineProperty(obj,'name', {
configurable: false, // The default is true, the description can be changed, such as delete or modify to accessor properties
enumerable: false, // The default is true , Describe whether it can be enumerated by for-in
writable: false, // The default is true, the description can be changed
value:'wython' // The default is undefined, which is the value of the property
});
You can see that an attribute name is defined. This method is no different from obj.name = ‘wython’; in fact. Here I changed configrable, enumerable, and writable to false. So if you change the value of the parameter, or traverse, it won’t work.
for(const i in obj) {console.log(i)} // Result: undefined
delete obj.name; // invalid
obj.name ='Another wython '; // invalid
Try to define the accessor properties
Object.defineProperty(obj,'_name', {
configurable: true,
enumerable: true,
get: function() {return this.name },
set: function(newVal) {
// We can try to change the value of name, because it cannot be changed Is invalid
this.name = newVal;
}
})
// verification
obj._name = 1; // invalid, because of accessor properties What is monitored is the unchangeable name attribute
So the accessor attribute is monitoring another attribute. If it is monitoring itself, a stack overflow error will be reported.
For example:
Object.defineProperty(obj,'_self', {
configurable: true,
enumerable: true,
get: function () {return this._self },
set: function(newVal) {
// We can try to change the value of name, because it cannot be changed, it is invalid.
this._self = newVal;
}
})
obj._self;