When it comes to the principle of responsiveness, we must mention the API in JavaScript ES5 - the Object.defineProperty() method. It is also the principle of interview questions, let's study hard today!
definition:
Object.defineProperty() is a static method that precisely controls the behavior of the property by defining the metadata information of the property .
This definition is as if it has not been explained, so let me interpret it:
It is used to change the property value or enumerate its method after defining the object . The behavior in the definition refers to the read or write operation.
That is to say:
An object is an unordered collection of key/value pairs . Each property in an object can be a value of any type.
Objects can be defined using constructors or literals:
var obj = new Object; //obj = {}
obj.name = "张三"; //添加描述
obj.say = function(){}; //添加行为
In addition to the above methods of adding attributes, you can also Object.definePropertydefine new attributes or modify existing attributes.
grammar:
Object.defineProperty(obj,prop,descriptor)
Interpretation of parameters:
obj - represents the object on which to define the property
prop ——Accepts String and Symbol types, indicating the name of the property to be defined or the ball cover
descriptor - (very important attribute) The attribute descriptor that is defined or modified , which can define the metadata information of the attribute behavior. In the vernacular, it means: use it to restrict the reading and writing behavior of attributes .
return value:
Returns an Object. Returns the object obj passed to the function
There are two types of attribute descriptors : data descriptors and access descriptors .
The keys that both have are: configurable and enumerable
configurable：
Boolean value. When set to true, the attribute descriptor of the attribute can be modified again, and the attribute can also be deleted from the corresponding object. The default is false. (But when we generally use Object.defineProperty, we need to set it to true, because we need to change these key values)
enumerable：
Boolean value. When set to true, this property can appear in the enumeration property of the object, and the default is false.
That is to say: when we loop an object, if we set the enumerable of one of the properties to false, the property will not appear in this loop.
Key values specific to data descriptors :
value - indicates the initial value of the attribute, which can be any valid JavaScript value, and the default is undefined
writable - Boolean value. When set to true, it means that the attribute can only be written into the value, and the default is false.
The unique key values of access operators are: get and set , which are equivalent to interceptors,
get - a method that provides a getter for the property, or undefined if there is no getter. When the property is accessed, the method will be executed, and no parameters will be passed in when the method is executed , but the this object will be passed in (due to the inheritance relationship, this here is not necessarily the object defining the property), and the default is undefined.
set - a method that provides a setter for the property, or undefined if there is no setter. When the value of the property is modified, this method is triggered to be executed. The method will accept a single parameter , the new parameter value for the property, which defaults to undefined.
Let's see the code example below for details.
1. Example of creating a data descriptor:
2. Example of creating an access descriptor:
Let's do another written test~
//以下代码的输出结果是：
var o = { a: 1 };
Object.defineProperty(o, "b", {value: 2, writable: false, enumerable: false, configurable: true})；
o.a = 2;
o.b = 3;
console.log(o.a, o.b); The answer is: 2 2
Because the second parameter of Object.defineProperty indicates the name of the property to be defined or the ball cover , we know from the previous knowledge that writable: false means that it is not rewritable , enumerable: false means that it is not enumerable , and configurable: true means that it can be modified again The property descriptor for this property.
So the initial value of ob is value=2, the data is hijacked, ob is not rewritable, and cannot be enumerated, that is, it is still ob or 2;
Here Object.defineProperty modifies the b property, which has nothing to do with a. If oa is later modified to 2, then oa is 2.