当前位置：网站首页>7.Object. Defineproperty and data broker (data hijacking)

7.Object. Defineproperty and data broker (data hijacking)

2022-07-20 08:40:00 【Where the wind falls】

1.Object.definePropery

Object.defineProperty() Method will define a new attribute directly on the object , Or modify the existing properties of an object , And return this object .
remarks ：
（1） Should be directly in Object Constructor object calls this method , Not in any one Object Instance of type
                 On the call .
grammar ：
Object.defineProperty(obj, prop, descriptor)
Parameters ：
obj： The object to define the property
prop： The name of the property to be defined or modified or Symbol
descriptor： Property descriptor to define or modify
Return value ： The object passed to the function .
describe ：
This method allows you to accurately add or modify the properties of an object . Common properties added by assignment are enumerable ,
         When enumerating object properties, it will be enumerated to (for...in or Object.keys Method ), You can change the values of these properties ,
         You can also delete these attributes . This method allows you to change the default extra options （ Or configuration ）. By default ,
Use Object.defineProperty() The added property value is immutable .

The descriptor （descriptor）：
：

(1) configurable（ Data property descriptor 、 Access attribute descriptor public ）：
If and only if the configurable The key value is true when , Only the descriptor of this property can be changed ,
         At the same time, this attribute can also be deleted from the corresponding object .
The default value is ： false
(2) enumerable（ Data property descriptor 、 Access attribute descriptor public ）
If and only if the enumerable The key value is true when , This property will appear in the enumeration property of the object .
The default value is ：false
When set to false when , Attributes in this object cannot be for...in and Object.keys Enumerate it , Other ways can
         Normal value

(3) value（ Data property descriptor ）
The value corresponding to this property . It can be anything that works javaScript value （ The number , object , Functions, etc ）
The default value is ：undefined

        (4) writable（ Data property descriptor ）
If and only if the writable The key value is true when , The value of the property , That's the top value, can
         Changed by the assignment operator .
The default value is false

(5) get（ Access property descriptor ）
Attribute getter function , without getter, Then for undefined. When accessing this property , This function will be called
No parameters are passed in during execution , But it will pass in this object （ By inheritance , there this It doesn't have to be
The object that defines this attribute ）. The return value of this function will be used as the value of the property
The default is ：undefined

(6) set（ Access property descriptor ）
Attribute setter function , without setter, Then for undefined. When the property value is modified , This function will be called
This method takes a parameter （ That is, the new value given ）, The this object .

verification Object.defineProperty The descriptor ：
value
writable
configurable
enumerable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    let number = 18
    let person = {
        age: 20
    }
    //  demonstration writable The default value of 
    Object.defineProperty(person,'age', {
        value: 18, // The default value is undefined
        writable:false,// Controls whether attributes can be modified , The default value is false
    })
    person.age = 30
    console.log(" verification writable: false",person.age)

    //  demonstration enumerable
    Object.defineProperty(person,"age", {
        value: 18,
        enumerable: false, // Controls whether attributes can be enumerated 
    })
    console.log(" verification enumerable: false, adopt console",person)
    for (let key in person) {
        //  Cannot enumerate age
        console.log(`key:${key},value:${person[key]}`)
    }
    //  Cannot enumerate age
    console.log("Object.keys(person)",Object.keys(person))

    //  demonstration configurable
    Object.defineProperty(person, "age", {
        configurable: false, // Controls whether descriptors can be modified and whether attributes can be deleted 
    })
    console.log(" Delete person Object age front ",person)
    delete person.age
    console.log(" Delete person Object age after ",person)
</script>

2. Data brokers

Data brokers , Also called data hijacking . It refers to when accessing or modifying a property of an object , Block this behavior with a piece of code , Perform additional operations or modify the returned results . typically Object.defineProperty() and ES2015 In the new Proxy object . in addition , There are also abandoned Object.observe(), The reason for abandonment is Proxy Appearance .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> What is a data broker </title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript" >
    let obj = {x:100}
    let obj2 = {y:200}
    /** 
         Yes obj2 Object x Property for data hijacking , In fact, we use an intermediate variable obj.x
         This is to avoid repeated triggering get
    */
    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
    
    //  The following code does not use intermediate variables , When the obj3.x Infinite trigger will be reported when reading and assigning , The abnormal 
    let obj3 = { x: 100 }
    Object.defineProperty(obj3,'x', {
        get() {
            return obj3.x
        },
        set(value) {
            obj3.x = value
        }
    })
</script>